feat: new aggregation format for notifications

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,14 +62,18 @@ 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,
     });
 
     expect(feed.state.getLatestValue().notification_status?.unseen).toBe(1);
     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 () => {

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({

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(() => {

sample-apps/react-sample-app/app/components/NewActivity.tsx

@@ -91,7 +91,7 @@ export const NewActivity = ({ feed }: { feed: Feed }) => {
       <button
         type="submit"
         className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none"
-        disabled={isSending || activityText === ''}
+        disabled={isSending || (activityText === '' && !files?.length)}
       >
         {isSending ? <LoadingIndicator /> : 'Post'}
       </button>

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 (
     <div
@@ -52,7 +53,9 @@ export const FeedSearchResultItem = ({ item }: FeedSearchResultItemProps) => {
           if (isFollowing) {
             ownTimeline?.unfollow(item.feed);
           } else {
-            ownTimeline?.follow(item.feed);
+            ownTimeline?.follow(item.feed, {
+              create_notification_activity: true,
+            });
           }
         }}
       >

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 (
     <div className="flex items-center justify-between gap-1">
-      <div>{notificationText}</div>
+      {notification.text && <div>{notification.text}</div>}
+      {notification.image && (
+        <img
+          src={notification.image}
+          alt="Notification image"
+          width={40}
+          height={40}
+        />
+      )}
       <div className="flex items-center gap-1.5">
         {!isRead && (
           <button