@stream-io/feeds-client 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/feeds-client",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.node.js",
   "exports": {

package/src/Feed.ts

@@ -16,8 +16,10 @@ import {
   BookmarkUpdatedEvent,
   QueryFeedMembersRequest,
   SortParamRequest,
+  FollowResponse,
+  ThreadedCommentResponse,
 } from './gen/models';
-import { Patch, StateStore } from './common/StateStore';
+import { StateStore } from './common/StateStore';
 import { EventDispatcher } from './common/EventDispatcher';
 import { FeedApi } from './gen/feeds/FeedApi';
 import { FeedsClient } from './FeedsClient';
@@ -35,7 +37,12 @@ import {
   removeBookmarkFromActivities,
   updateBookmarkInActivities,
 } from './state-updates/bookmark-utils';
-import { FeedsApi, StreamResponse } from './gen-imports';
+import {
+  handleFollowCreated,
+  handleFollowDeleted,
+  handleFollowUpdated,
+} from './state-updates/follow-utils';
+import { StreamResponse } from './gen-imports';
 import { capitalize } from './common/utils';
 import type {
   ActivityIdOrCommentId,
@@ -44,8 +51,12 @@ import type {
   LoadingStates,
   PagerResponseWithLoadingStates,
 } from './types';
-import type { FromArray } from './types-internal';
-import { checkHasAnotherPage, Constants } from './utils';
+import { checkHasAnotherPage, Constants, uniqueArrayMerge } from './utils';
+import {
+  getStateUpdateQueueIdForFollow,
+  getStateUpdateQueueIdForUnfollow,
+  shouldUpdateState,
+} from './state-updates/state-update-queue';
 
 export type FeedState = Omit<
   Partial<GetOrCreateFeedResponse & FeedResponse>,
@@ -90,17 +101,17 @@ export type FeedState = Omit<
          *   comments_by_entity_id: {
          *     'activity-1': {
          *       comments: [comment1],
-         *       parent_id: undefined,
+         *       entity_parent_id: undefined,
          *     },
          *     'comment-1': {
          *       comments: [comment2],
-         *       parent_id: 'activity-1', // parent store where "comment-1" is located in "comments" array
+         *       entity_parent_id: 'activity-1', // parent store where "comment-1" is located in "comments" array
          *     }
          *   }
          * }
          * ```
          */
-        parent_id?: ActivityIdOrCommentId;
+        entity_parent_id?: ActivityIdOrCommentId;
         comments?: CommentResponse[];
       }
     | undefined
@@ -113,6 +124,11 @@ export type FeedState = Omit<
   member_pagination?: LoadingStates & { sort?: SortParamRequest[] };
 
   last_get_or_create_request_config?: GetOrCreateFeedRequest;
+
+  /**
+   * `true` if the feed is receiving real-time updates via WebSocket
+   */
+  watch: boolean;
 };
 
 type EventHandlerByEventType = {
@@ -127,6 +143,7 @@ type EventHandlerByEventType = {
 export class Feed extends FeedApi {
   readonly state: StateStore<FeedState>;
   private static readonly noop = () => {};
+  private readonly stateUpdateQueue: Set<string> = new Set();
 
   private readonly eventHandlers: EventHandlerByEventType = {
     'feeds.activity.added': (event) => {
@@ -314,102 +331,17 @@ export class Feed extends FeedApi {
     'feeds.feed_group.changed': Feed.noop,
     'feeds.feed_group.deleted': Feed.noop,
     'feeds.follow.created': (event) => {
-      // filter non-accepted follows (the way getOrCreate does by default)
-      if (event.follow.status !== 'accepted') return;
-
-      // this feed followed someone
-      if (event.follow.source_feed.fid === this.fid) {
-        this.state.next((currentState) => {
-          const newState = {
-            ...currentState,
-            ...event.follow.source_feed,
-          };
-
-          if (
-            !checkHasAnotherPage(
-              currentState.following,
-              currentState.following_pagination?.next,
-            )
-          ) {
-            // TODO: respect sort
-            newState.following = currentState.following
-              ? currentState.following.concat(event.follow)
-              : [event.follow];
-          }
-
-          return newState;
-        });
-      } else if (
-        // someone followed this feed
-        event.follow.target_feed.fid === this.fid
-      ) {
-        const source = event.follow.source_feed;
-        const connectedUser = this.client.state.getLatestValue().connected_user;
-
-        this.state.next((currentState) => {
-          const newState = { ...currentState, ...event.follow.target_feed };
-
-          if (source.created_by.id === connectedUser?.id) {
-            newState.own_follows = currentState.own_follows
-              ? currentState.own_follows.concat(event.follow)
-              : [event.follow];
-          }
-
-          if (
-            !checkHasAnotherPage(
-              currentState.followers,
-              currentState.followers_pagination?.next,
-            )
-          ) {
-            // TODO: respect sort
-            newState.followers = currentState.followers
-              ? currentState.followers.concat(event.follow)
-              : [event.follow];
-          }
-
-          return newState;
-        });
-      }
+      this.handleFollowCreated(event.follow);
     },
     'feeds.follow.deleted': (event) => {
-      // this feed unfollowed someone
-      if (event.follow.source_feed.fid === this.fid) {
-        this.state.next((currentState) => {
-          return {
-            ...currentState,
-            ...event.follow.source_feed,
-            following: currentState.following?.filter(
-              (follow) =>
-                follow.target_feed.fid !== event.follow.target_feed.fid,
-            ),
-          };
-        });
-      } else if (
-        // someone unfollowed this feed
-        event.follow.target_feed.fid === this.fid
-      ) {
-        const source = event.follow.source_feed;
-        const connectedUser = this.client.state.getLatestValue().connected_user;
-
-        this.state.next((currentState) => {
-          const newState = { ...currentState, ...event.follow.target_feed };
-
-          if (source.created_by.id === connectedUser?.id) {
-            newState.own_follows = currentState.own_follows?.filter(
-              (follow) =>
-                follow.source_feed.fid !== event.follow.source_feed.fid,
-            );
-          }
-
-          newState.followers = currentState.followers?.filter(
-            (follow) => follow.source_feed.fid !== event.follow.source_feed.fid,
-          );
-
-          return newState;
-        });
+      this.handleFollowDeleted(event.follow);
+    },
+    'feeds.follow.updated': (_event) => {
+      const result = handleFollowUpdated(this.currentState);
+      if (result.changed) {
+        this.state.next(result.data);
       }
     },
-    'feeds.follow.updated': Feed.noop,
     'feeds.comment.reaction.added': this.handleCommentReactionEvent.bind(this),
     'feeds.comment.reaction.deleted':
       this.handleCommentReactionEvent.bind(this),
@@ -421,19 +353,12 @@ export class Feed extends FeedApi {
       this.state.next((currentState) => {
         let newState: FeedState | undefined;
 
-        if (
-          !checkHasAnotherPage(
-            currentState.members,
-            currentState.member_pagination?.next,
-          )
-        ) {
+        if (typeof currentState.members !== 'undefined') {
           newState ??= {
             ...currentState,
           };
 
-          newState.members = newState.members?.concat(event.member) ?? [
-            event.member,
-          ];
+          newState.members = [event.member, ...currentState.members];
         }
 
         if (connectedUser?.id === event.member.user.id) {
@@ -501,6 +426,10 @@ export class Feed extends FeedApi {
         return newState ?? currentState;
       });
     },
+    'feeds.notification_feed.updated': (event) => {
+      console.info('notification feed updated', event);
+      // TODO: handle notification feed updates
+    },
     // the poll events should be removed from here
     'feeds.poll.closed': Feed.noop,
     'feeds.poll.deleted': Feed.noop,
@@ -531,9 +460,9 @@ export class Feed extends FeedApi {
     groupId: 'user' | 'timeline' | (string & {}),
     id: string,
     data?: FeedResponse,
+    watch = false,
   ) {
-    // Need this ugly cast because fileUpload endpoints :(
-    super(client as unknown as FeedsApi, groupId, id);
+    super(client, groupId, id);
     this.state = new StateStore<FeedState>({
       fid: `${groupId}:${id}`,
       group_id: groupId,
@@ -542,6 +471,7 @@ export class Feed extends FeedApi {
       is_loading: false,
       is_loading_activities: false,
       comments_by_entity_id: {},
+      watch,
     });
     this.client = client;
   }
@@ -652,6 +582,8 @@ export class Feed extends FeedApi {
           });
         }
       } else {
+        // Empty queue when reinitializing the state
+        this.stateUpdateQueue.clear();
         const responseCopy: Partial<
           StreamResponse<GetOrCreateFeedResponse>['feed'] &
             StreamResponse<GetOrCreateFeedResponse>
@@ -676,8 +608,12 @@ export class Feed extends FeedApi {
           if (!request?.following_pagination?.limit) {
             delete nextState.following;
           }
+          if (response.members.length === 0 && response.feed.member_count > 0) {
+            delete nextState.members;
+          }
 
           nextState.last_get_or_create_request_config = request;
+          nextState.watch = request?.watch ? request.watch : currentState.watch;
 
           return nextState;
         });
@@ -694,6 +630,80 @@ export class Feed extends FeedApi {
     }
   }
 
+  /**
+   * @internal
+   */
+  handleFollowCreated(follow: FollowResponse) {
+    if (
+      !shouldUpdateState({
+        stateUpdateId: getStateUpdateQueueIdForFollow(follow),
+        stateUpdateQueue: this.stateUpdateQueue,
+        watch: this.currentState.watch,
+      })
+    ) {
+      return;
+    }
+    const connectedUser = this.client.state.getLatestValue().connected_user;
+    const result = handleFollowCreated(
+      follow,
+      this.currentState,
+      this.fid,
+      connectedUser?.id,
+    );
+    if (result.changed) {
+      this.state.next(result.data);
+    }
+  }
+
+  /**
+   * @internal
+   */
+  handleFollowDeleted(
+    follow:
+      | FollowResponse
+      // Backend doesn't return the follow in delete follow response https://getstream.slack.com/archives/C06RK9WCR09/p1753176937507209
+      | { source_feed: { fid: string }; target_feed: { fid: string } },
+  ) {
+    if (
+      !shouldUpdateState({
+        stateUpdateId: getStateUpdateQueueIdForUnfollow(follow),
+        stateUpdateQueue: this.stateUpdateQueue,
+        watch: this.currentState.watch,
+      })
+    ) {
+      return;
+    }
+
+    const connectedUser = this.client.state.getLatestValue().connected_user;
+    const result = handleFollowDeleted(
+      follow,
+      this.currentState,
+      this.fid,
+      connectedUser?.id,
+    );
+    if (result.changed) {
+      this.state.next(result.data);
+    }
+  }
+
+  /**
+   * @internal
+   */
+  handleWatchStopped() {
+    this.state.partialNext({
+      watch: false,
+    });
+  }
+
+  /**
+   * @internal
+   */
+  handleWatchStarted() {
+    this.state.partialNext({
+      watch: true,
+    });
+  }
+
   private handleBookmarkAdded(event: BookmarkAddedEvent) {
     const currentActivities = this.currentState.activities;
     const { connected_user: connectedUser } =
@@ -771,57 +781,93 @@ export class Feed extends FeedApi {
     return commentIndex;
   }
 
-  private getActivityIndex(activity: ActivityResponse, state?: FeedState) {
-    const { activities } = state ?? this.currentState;
-
-    if (!activities) {
-      return -1;
-    }
+  /**
+   * Load child comments of entity (activity or comment) into the state, if the target entity is comment,
+   * `entityParentId` should be provided (`CommentResponse.parent_id ?? CommentResponse.object_id`).
+   */
+  private loadCommentsIntoState(data: {
+    entityParentId?: string;
+    entityId: string;
+    comments: Array<CommentResponse & ThreadedCommentResponse>;
+    next?: string;
+    sort: string;
+  }) {
+    // add initial (top level) object for processing
+    const traverseArray = [
+      {
+        entityId: data.entityId,
+        entityParentId: data.entityParentId,
+        comments: data.comments,
+        next: data.next,
+      },
+    ];
 
-    let activityIndex = activities.indexOf(activity);
+    this.state.next((currentState) => {
+      const newCommentsByEntityId = {
+        ...currentState.comments_by_entity_id,
+      };
 
-    // fast lookup failed, try slower approach
-    if (activityIndex === -1) {
-      activityIndex = activities.findIndex(
-        (activity_) => activity_.id === activity.id,
-      );
-    }
+      while (traverseArray.length) {
+        const item = traverseArray.pop()!;
 
-    return activityIndex;
-  }
+        const entityId = item.entityId;
 
-  private updateActivityInState(
-    activity: ActivityResponse,
-    patch: Patch<FromArray<FeedState['activities']>>,
-  ) {
-    this.state.next((currentState) => {
-      const activityIndex = this.getActivityIndex(activity, currentState);
+        // go over entity comments and generate new objects
+        // for further processing if there are any replies
+        item.comments.forEach((comment) => {
+          if (!comment.replies?.length) return;
 
-      if (activityIndex === -1) return currentState;
+          traverseArray.push({
+            entityId: comment.id,
+            entityParentId: entityId,
+            comments: comment.replies,
+            next: comment.meta?.next_cursor,
+          });
+        });
 
-      const nextActivities = [...currentState.activities!];
+        // omit replies & meta from the comments (transform ThreadedCommentResponse to CommentResponse)
+        // this is somehow faster than copying the whole
+        // object and deleting the desired properties
+        const newComments: CommentResponse[] = item.comments.map(
+          ({ replies: _r, meta: _m, ...restOfTheCommentResponse }) =>
+            restOfTheCommentResponse,
+        );
 
-      nextActivities[activityIndex] = patch(
-        currentState.activities![activityIndex],
-      );
+        newCommentsByEntityId[entityId] = {
+          ...newCommentsByEntityId[entityId],
+          entity_parent_id: item.entityParentId,
+          pagination: {
+            ...newCommentsByEntityId[entityId]?.pagination,
+            next: item.next,
+            sort: data.sort,
+          },
+          comments: newCommentsByEntityId[entityId]?.comments
+            ? newCommentsByEntityId[entityId].comments?.concat(newComments)
+            : newComments,
+        };
+      }
 
       return {
         ...currentState,
-        activities: nextActivities,
+        comments_by_entity_id: newCommentsByEntityId,
       };
     });
   }
 
   private async loadNextPageComments({
-    forId,
+    entityId,
     base,
     sort,
-    parentId,
+    entityParentId,
   }: {
-    parentId?: string;
-    forId: string;
+    entityParentId?: string;
+    entityId: string;
     sort: string;
-    base: () => Promise<PagerResponse & { comments: CommentResponse[] }>;
+    base: () => Promise<
+      PagerResponse & {
+        comments: Array<CommentResponse & ThreadedCommentResponse>;
+      }
+    >;
   }) {
     let error: unknown;
 
@@ -830,44 +876,24 @@ export class Feed extends FeedApi {
         ...currentState,
         comments_by_entity_id: {
           ...currentState.comments_by_entity_id,
-          [forId]: {
-            ...currentState.comments_by_entity_id[forId],
+          [entityId]: {
+            ...currentState.comments_by_entity_id[entityId],
             pagination: {
-              ...currentState.comments_by_entity_id[forId]?.pagination,
+              ...currentState.comments_by_entity_id[entityId]?.pagination,
               loading_next_page: true,
             },
           },
         },
       }));
 
-      const { next: newNextCursor, comments } = await base();
+      const { next, comments } = await base();
 
-      this.state.next((currentState) => {
-        const newPagination = {
-          ...currentState.comments_by_entity_id[forId]?.pagination,
-          next: newNextCursor,
-        };
-
-        if (typeof newPagination.sort === 'undefined') {
-          newPagination.sort = sort;
-        }
-
-        return {
-          ...currentState,
-          comments_by_entity_id: {
-            ...currentState.comments_by_entity_id,
-            [forId]: {
-              ...currentState.comments_by_entity_id[forId],
-              parent_id: parentId,
-              pagination: newPagination,
-              comments: currentState.comments_by_entity_id[forId]?.comments
-                ? currentState.comments_by_entity_id[forId].comments?.concat(
-                    comments,
-                  )
-                : comments,
-            },
-          },
-        };
+      this.loadCommentsIntoState({
+        entityId,
+        comments,
+        entityParentId,
+        next,
+        sort,
       });
     } catch (e) {
       error = e;
@@ -876,10 +902,10 @@ export class Feed extends FeedApi {
         ...currentState,
         comments_by_entity_id: {
           ...currentState.comments_by_entity_id,
-          [forId]: {
-            ...currentState.comments_by_entity_id[forId],
+          [entityId]: {
+            ...currentState.comments_by_entity_id[entityId],
             pagination: {
-              ...currentState.comments_by_entity_id[forId]?.pagination,
+              ...currentState.comments_by_entity_id[entityId]?.pagination,
               loading_next_page: false,
             },
           },
@@ -916,7 +942,7 @@ export class Feed extends FeedApi {
     }
 
     await this.loadNextPageComments({
-      forId: activity.id,
+      entityId: activity.id,
       base: () =>
         this.client.getComments({
           ...request,
@@ -951,7 +977,7 @@ export class Feed extends FeedApi {
     }
 
     await this.loadNextPageComments({
-      forId: comment.id,
+      entityId: comment.id,
       base: () =>
         this.client.getCommentReplies({
           ...request,
@@ -963,7 +989,7 @@ export class Feed extends FeedApi {
             Constants.DEFAULT_COMMENT_PAGINATION,
           next: currentNextCursor,
         }),
-      parentId: comment.parent_id ?? comment.object_id,
+      entityParentId: comment.parent_id ?? comment.object_id,
       sort,
     });
   }
@@ -1002,17 +1028,25 @@ export class Feed extends FeedApi {
         sort,
       });
 
-      this.state.next((currentState) => ({
-        ...currentState,
-        [type]: currentState[type]
-          ? currentState[type].concat(follows)
-          : follows,
-        [paginationKey]: {
-          ...currentState[paginationKey],
-          next: newNextCursor,
-          sort,
-        },
-      }));
+      this.state.next((currentState) => {
+        return {
+          ...currentState,
+          [type]:
+            currentState[type] === undefined
+              ? follows
+              : uniqueArrayMerge(
+                  currentState[type],
+                  follows,
+                  (follow) =>
+                    `${follow.source_feed.fid}-${follow.target_feed.fid}`,
+                ),
+          [paginationKey]: {
+            ...currentState[paginationKey],
+            next: newNextCursor,
+            sort,
+          },
+        };
+      });
     } catch (e) {
       error = e;
     } finally {
@@ -1032,11 +1066,15 @@ export class Feed extends FeedApi {
     }
   }
 
-  async loadNextPageFollowers(request: Pick<QueryFollowsRequest, 'limit'>) {
+  async loadNextPageFollowers(
+    request: Pick<QueryFollowsRequest, 'limit' | 'sort'>,
+  ) {
     await this.loadNextPageFollows('followers', request);
   }
 
-  async loadNextPageFollowing(request: Pick<QueryFollowsRequest, 'limit'>) {
+  async loadNextPageFollowing(
+    request: Pick<QueryFollowsRequest, 'limit' | 'sort'>,
+  ) {
     await this.loadNextPageFollows('following', request);
   }
 
@@ -1074,7 +1112,7 @@ export class Feed extends FeedApi {
       this.state.next((currentState) => ({
         ...currentState,
         members: currentState.members
-          ? currentState.members.concat(members)
+          ? uniqueArrayMerge(currentState.members, members, ({ user }) => user.id)
           : members,
         member_pagination: {
           ...currentState.member_pagination,