diff --git a/packages/feeds-client/__integration-tests__/aggregated-feed-pagination.test.ts b/packages/feeds-client/__integration-tests__/aggregated-feed-pagination.test.ts index d189fbca..b6779550 100644 --- a/packages/feeds-client/__integration-tests__/aggregated-feed-pagination.test.ts +++ b/packages/feeds-client/__integration-tests__/aggregated-feed-pagination.test.ts @@ -1,5 +1,9 @@ import { describe, it, expect, beforeAll, afterAll } from 'vitest'; -import type { FeedsClient, UserRequest } from '../src'; +import type { + FeedsClient, + NotificationFeedUpdatedEvent, + UserRequest, +} from '../src'; import { createTestClient, createTestTokenGenerator, @@ -58,7 +62,7 @@ describe('Aggregated Feed Pagination Integration Tests', () => { .aggregated_activities!.map((a) => a.group), }); - await waitForEvent(feed, 'feeds.notification_feed.updated', { + const event = await waitForEvent(feed, 'feeds.notification_feed.updated', { shouldReject: true, }); @@ -66,6 +70,10 @@ describe('Aggregated Feed Pagination Integration Tests', () => { expect( feed.state.getLatestValue().notification_status?.seen_activities?.length, ).toBe(2); + expect( + (event as NotificationFeedUpdatedEvent)?.notification_status + ?.seen_activities?.length, + ).toBe(2); }); it('should fetch next page of notifications', async () => { diff --git a/packages/feeds-client/__integration-tests__/docs-snippets/quick-start.test.ts b/packages/feeds-client/__integration-tests__/docs-snippets/quick-start.test.ts index 70e79678..3bd26e96 100644 --- a/packages/feeds-client/__integration-tests__/docs-snippets/quick-start.test.ts +++ b/packages/feeds-client/__integration-tests__/docs-snippets/quick-start.test.ts @@ -50,7 +50,7 @@ describe('Quick start page', () => { type: 'love', }); - notifications = client.feed('notification', 'john'); + notifications = client.feed('notification', 'john' + crypto.randomUUID()); await notifications.getOrCreate(); // Mark notifications as read await notifications.markActivity({ diff --git a/packages/feeds-client/__integration-tests__/utils.ts b/packages/feeds-client/__integration-tests__/utils.ts index dfeac722..ad478ec1 100644 --- a/packages/feeds-client/__integration-tests__/utils.ts +++ b/packages/feeds-client/__integration-tests__/utils.ts @@ -73,8 +73,8 @@ export const waitForEvent = ( ) => { return new Promise((resolve, reject) => { // @ts-expect-error client expects WSEvents - client.on(type, () => { - resolve(undefined); + client.on(type, (e) => { + resolve(e); clearTimeout(timeout); }); const timeout = setTimeout(() => { diff --git a/sample-apps/react-sample-app/app/components/NewActivity.tsx b/sample-apps/react-sample-app/app/components/NewActivity.tsx index aa23edea..74975206 100644 --- a/sample-apps/react-sample-app/app/components/NewActivity.tsx +++ b/sample-apps/react-sample-app/app/components/NewActivity.tsx @@ -91,7 +91,7 @@ export const NewActivity = ({ feed }: { feed: Feed }) => { diff --git a/sample-apps/react-sample-app/app/components/Search/SearchResults/SearchResultItem.tsx b/sample-apps/react-sample-app/app/components/Search/SearchResults/SearchResultItem.tsx index 13dbeda6..fa9f9d0c 100644 --- a/sample-apps/react-sample-app/app/components/Search/SearchResults/SearchResultItem.tsx +++ b/sample-apps/react-sample-app/app/components/Search/SearchResults/SearchResultItem.tsx @@ -34,8 +34,9 @@ export const FeedSearchResultItem = ({ item }: FeedSearchResultItemProps) => { ); const isFollowing = - ownFollows.some((follow) => follow.source_feed.feed === ownTimeline?.feed) ?? - false; + ownFollows.some( + (follow) => follow.source_feed.feed === ownTimeline?.feed, + ) ?? false; return (
{ if (isFollowing) { ownTimeline?.unfollow(item.feed); } else { - ownTimeline?.follow(item.feed); + ownTimeline?.follow(item.feed, { + create_notification_activity: true, + }); } }} > diff --git a/sample-apps/react-sample-app/app/components/notifications/Notification.tsx b/sample-apps/react-sample-app/app/components/notifications/Notification.tsx index b137e8ba..1f1b19db 100644 --- a/sample-apps/react-sample-app/app/components/notifications/Notification.tsx +++ b/sample-apps/react-sample-app/app/components/notifications/Notification.tsx @@ -12,52 +12,74 @@ export const Notification = ({ isSeen: boolean; onMarkRead: () => {}; }) => { - const notificationText = useMemo(() => { + const notification = useMemo(() => { const verb = group.activities[0].type; - let text = ''; + const targetActivity = group.activities[0].notification_context?.target; + const notification = { + text: '', + image: targetActivity?.text + ? undefined + : targetActivity?.attachments?.[0]?.image_url, + }; + + const targetActivityTruncatedText = targetActivity?.text + ? ` "${ + targetActivity.text.length > 20 + ? targetActivity?.text?.slice(0, 20) + '...' + : targetActivity?.text + }"` + : ''; + const previewCount = 5; + const previewActors = Array.from( + new Set(group.activities.map(({ user }) => user.name)), + ).slice(0, previewCount); + notification.text = previewActors.join(', '); + const remainingActors = group.user_count - previewActors.length; + + if (remainingActors > 1) { + notification.text += ` and ${remainingActors}${group.user_count_truncated ? '+' : ''} more people`; + } else if (remainingActors === 1) { + notification.text += ' and 1 more person'; + } switch (verb) { case 'comment': { - text += `${group.activity_count} new comments`; + notification.text += ` commented on your post${targetActivityTruncatedText}`; break; } case 'reaction': { - text += `${group.activity_count} likes`; + notification.text += ` reacted to your post${targetActivityTruncatedText}`; break; } case 'follow': { - const previewCount = 5; - text = Array.from( - new Set(group.activities.map(({ user }) => user.name)), - ) - .slice(0, previewCount) - .join(', '); - const remainingActors = group.user_count - previewCount; - if (remainingActors > 1) { - text += ` and ${remainingActors}${group.user_count_truncated ? '+' : ''} more people`; - } else if (remainingActors === 1) { - text += ' and 1 more person'; - } - text += ` started following you`; + notification.text += ` started following you`; break; } case 'comment_reaction': { - text += `${group.activity_count} new reactions to your comment`; + notification.text += ` reacted to your comment on post${targetActivityTruncatedText}`; break; } default: { - text += 'Unknown type'; + notification.text += 'Unknown type'; break; } } - return text; + return notification; }, [group]); return (
-
{notificationText}
+ {notification.text &&
{notification.text}
} + {notification.image && ( + Notification image + )}
{!isRead && (