@stream-io/feeds-client 0.1.8 → 0.1.9

package/dist/index-react-bindings.browser.cjs

@@ -4050,6 +4050,89 @@ const updateBookmarkInActivities = (event, activities, isCurrentUser) => {
     return updateActivityInActivities(updatedActivity, activities);
 };
 
+const isFeedResponse = (follow) => {
+    return 'created_by' in follow;
+};
+const handleFollowCreated = (follow, currentState, currentFeedId, connectedUserId) => {
+    // filter non-accepted follows (the way getOrCreate does by default)
+    if (follow.status !== 'accepted') {
+        return { changed: false, data: currentState };
+    }
+    let newState = { ...currentState };
+    // this feed followed someone
+    if (follow.source_feed.fid === currentFeedId) {
+        newState = {
+            ...newState,
+            // Update FeedResponse fields, that has the new follower/following count
+            ...follow.source_feed,
+        };
+        // Only update if following array already exists
+        if (currentState.following !== undefined) {
+            newState.following = [follow, ...currentState.following];
+        }
+    }
+    else if (
+    // someone followed this feed
+    follow.target_feed.fid === currentFeedId) {
+        const source = follow.source_feed;
+        newState = {
+            ...newState,
+            // Update FeedResponse fields, that has the new follower/following count
+            ...follow.target_feed,
+        };
+        if (source.created_by.id === connectedUserId) {
+            newState.own_follows = currentState.own_follows
+                ? currentState.own_follows.concat(follow)
+                : [follow];
+        }
+        // Only update if followers array already exists
+        if (currentState.followers !== undefined) {
+            newState.followers = [follow, ...currentState.followers];
+        }
+    }
+    return { changed: true, data: newState };
+};
+const handleFollowDeleted = (follow, currentState, currentFeedId, connectedUserId) => {
+    let newState = { ...currentState };
+    // this feed unfollowed someone
+    if (follow.source_feed.fid === currentFeedId) {
+        newState = {
+            ...newState,
+            // Update FeedResponse fields, that has the new follower/following count
+            ...follow.source_feed,
+        };
+        // Only update if following array already exists
+        if (currentState.following !== undefined) {
+            newState.following = currentState.following.filter((followItem) => followItem.target_feed.fid !== follow.target_feed.fid);
+        }
+    }
+    else if (
+    // someone unfollowed this feed
+    follow.target_feed.fid === currentFeedId) {
+        const source = follow.source_feed;
+        newState = {
+            ...newState,
+            // Update FeedResponse fields, that has the new follower/following count
+            ...follow.target_feed,
+        };
+        if (isFeedResponse(source) &&
+            source.created_by.id === connectedUserId &&
+            currentState.own_follows !== undefined) {
+            newState.own_follows = currentState.own_follows.filter((followItem) => followItem.source_feed.fid !== follow.source_feed.fid);
+        }
+        // Only update if followers array already exists
+        if (currentState.followers !== undefined) {
+            newState.followers = currentState.followers.filter((followItem) => followItem.source_feed.fid !== follow.source_feed.fid);
+        }
+    }
+    return { changed: true, data: newState };
+};
+const handleFollowUpdated = (currentState) => {
+    // For now, we'll treat follow updates as no-ops since the current implementation does
+    // This can be enhanced later if needed
+    return { changed: false, data: currentState };
+};
+
 const checkHasAnotherPage = (v, cursor) => (typeof v === 'undefined' && typeof cursor === 'undefined') ||
     typeof cursor === 'string';
 const isCommentResponse = (entity) => {
@@ -4058,11 +4141,41 @@ const isCommentResponse = (entity) => {
 const Constants = {
     DEFAULT_COMMENT_PAGINATION: 'first',
 };
+const uniqueArrayMerge = (existingArray, arrayToMerge, getKey) => {
+    const existing = new Set();
+    existingArray.forEach((value) => {
+        const key = getKey(value);
+        existing.add(key);
+    });
+    const filteredArrayToMerge = arrayToMerge.filter((value) => {
+        const key = getKey(value);
+        return !existing.has(key);
+    });
+    return existingArray.concat(filteredArrayToMerge);
+};
+
+const shouldUpdateState = ({ stateUpdateId, stateUpdateQueue, watch, }) => {
+    if (!watch) {
+        return true;
+    }
+    if (watch && stateUpdateQueue.has(stateUpdateId)) {
+        stateUpdateQueue.delete(stateUpdateId);
+        return false;
+    }
+    stateUpdateQueue.add(stateUpdateId);
+    return true;
+};
+const getStateUpdateQueueIdForFollow = (follow) => {
+    return `follow${follow.source_feed.fid}-${follow.target_feed.fid}`;
+};
+const getStateUpdateQueueIdForUnfollow = (follow) => {
+    return `unfollow${follow.source_feed.fid}-${follow.target_feed.fid}`;
+};
 
 class Feed extends FeedApi {
-    constructor(client, groupId, id, data) {
-        // Need this ugly cast because fileUpload endpoints :(
+    constructor(client, groupId, id, data, watch = false) {
         super(client, groupId, id);
+        this.stateUpdateQueue = new Set();
         this.eventHandlers = {
             'feeds.activity.added': (event) => {
                 const currentActivities = this.currentState.activities;
@@ -4208,74 +4321,14 @@ 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) => {
+                handleFollowUpdated(this.currentState);
             },
-            'feeds.follow.updated': Feed.noop,
             'feeds.comment.reaction.added': this.handleCommentReactionEvent.bind(this),
             'feeds.comment.reaction.deleted': this.handleCommentReactionEvent.bind(this),
             'feeds.comment.reaction.updated': Feed.noop,
@@ -4283,13 +4336,11 @@ class Feed extends FeedApi {
                 const { connected_user: connectedUser } = this.client.state.getLatestValue();
                 this.state.next((currentState) => {
                     let newState;
-                    if (!checkHasAnotherPage(currentState.members, currentState.member_pagination?.next)) {
+                    if (typeof currentState.members !== 'undefined') {
                         newState ?? (newState = {
                             ...currentState,
                         });
-                        newState.members = newState.members?.concat(event.member) ?? [
-                            event.member,
-                        ];
+                        newState.members = [event.member, ...currentState.members];
                     }
                     if (connectedUser?.id === event.member.user.id) {
                         newState ?? (newState = {
@@ -4372,6 +4423,7 @@ class Feed extends FeedApi {
             is_loading: false,
             is_loading_activities: false,
             comments_by_entity_id: {},
+            watch,
         });
         this.client = client;
     }
@@ -4451,6 +4503,8 @@ class Feed extends FeedApi {
                 }
             }
             else {
+                // Empty queue when reinitializing the state
+                this.stateUpdateQueue.clear();
                 const responseCopy = {
                     ...response,
                     ...response.feed,
@@ -4469,7 +4523,11 @@ 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;
                 });
             }
@@ -4483,6 +4541,56 @@ class Feed extends FeedApi {
             });
         }
     }
+    /**
+     * @internal
+     */
+    handleFollowCreated(follow) {
+        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) {
+        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);
+        {
+            this.state.next(result.data);
+        }
+    }
+    /**
+     * @internal
+     */
+    handleWatchStopped() {
+        this.state.partialNext({
+            watch: false,
+        });
+    }
+    /**
+     * @internal
+     */
+    handleWatchStarted() {
+        this.state.partialNext({
+            watch: true,
+        });
+    }
     handleBookmarkAdded(event) {
         const currentActivities = this.currentState.activities;
         const { connected_user: connectedUser } = this.client.state.getLatestValue();
@@ -4527,70 +4635,85 @@ class Feed extends FeedApi {
         }
         return commentIndex;
     }
-    getActivityIndex(activity, state) {
-        const { activities } = state ?? this.currentState;
-        if (!activities) {
-            return -1;
-        }
-        let activityIndex = activities.indexOf(activity);
-        // fast lookup failed, try slower approach
-        if (activityIndex === -1) {
-            activityIndex = activities.findIndex((activity_) => activity_.id === activity.id);
-        }
-        return activityIndex;
-    }
-    updateActivityInState(activity, patch) {
+    /**
+     * 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`).
+     */
+    loadCommentsIntoState(data) {
+        // add initial (top level) object for processing
+        const traverseArray = [
+            {
+                entityId: data.entityId,
+                entityParentId: data.entityParentId,
+                comments: data.comments,
+                next: data.next,
+            },
+        ];
         this.state.next((currentState) => {
-            const activityIndex = this.getActivityIndex(activity, currentState);
-            if (activityIndex === -1)
-                return currentState;
-            const nextActivities = [...currentState.activities];
-            nextActivities[activityIndex] = patch(currentState.activities[activityIndex]);
+            const newCommentsByEntityId = {
+                ...currentState.comments_by_entity_id,
+            };
+            while (traverseArray.length) {
+                const item = traverseArray.pop();
+                const entityId = item.entityId;
+                // 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;
+                    traverseArray.push({
+                        entityId: comment.id,
+                        entityParentId: entityId,
+                        comments: comment.replies,
+                        next: comment.meta?.next_cursor,
+                    });
+                });
+                // 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 = item.comments.map(({ replies: _r, meta: _m, ...restOfTheCommentResponse }) => restOfTheCommentResponse);
+                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,
             };
         });
     }
-    async loadNextPageComments({ forId, base, sort, parentId, }) {
+    async loadNextPageComments({ entityId, base, sort, entityParentId, }) {
         let error;
         try {
             this.state.next((currentState) => ({
                 ...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();
-            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,
-                        },
-                    },
-                };
+            const { next, comments } = await base();
+            this.loadCommentsIntoState({
+                entityId,
+                comments,
+                entityParentId,
+                next,
+                sort,
             });
         }
         catch (e) {
@@ -4601,10 +4724,10 @@ 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,
                         },
                     },
@@ -4627,7 +4750,7 @@ class Feed extends FeedApi {
             return;
         }
         await this.loadNextPageComments({
-            forId: activity.id,
+            entityId: activity.id,
             base: () => this.client.getComments({
                 ...request,
                 sort,
@@ -4650,7 +4773,7 @@ class Feed extends FeedApi {
             return;
         }
         await this.loadNextPageComments({
-            forId: comment.id,
+            entityId: comment.id,
             base: () => this.client.getCommentReplies({
                 ...request,
                 comment_id: comment.id,
@@ -4660,7 +4783,7 @@ 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,
         });
     }
@@ -4690,17 +4813,19 @@ class Feed extends FeedApi {
                 next: currentNextCursor,
                 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;
@@ -4753,7 +4878,7 @@ 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,
@@ -5340,13 +5465,17 @@ class FeedsClient extends FeedsApi {
             };
             this.eventDispatcher.dispatch(networkEvent);
         };
-        this.getOrCreateActiveFeed = (group, id, data) => {
+        this.getOrCreateActiveFeed = (group, id, data, watch) => {
             const fid = `${group}:${id}`;
             if (this.activeFeeds[fid]) {
-                return this.activeFeeds[fid];
+                const feed = this.activeFeeds[fid];
+                if (watch && !feed.currentState.watch) {
+                    feed.handleWatchStarted();
+                }
+                return feed;
             }
             else {
-                const feed = new Feed(this, group, id, data);
+                const feed = new Feed(this, group, id, data, watch);
                 this.activeFeeds[fid] = feed;
                 return feed;
             }
@@ -5375,6 +5504,11 @@ class FeedsClient extends FeedsApi {
                             }
                         }
                     }
+                    else {
+                        for (const activeFeed of Object.values(this.activeFeeds)) {
+                            activeFeed.handleWatchStopped();
+                        }
+                    }
                     break;
                 }
                 case 'feeds.feed.created': {
@@ -5478,7 +5612,7 @@ class FeedsClient extends FeedsApi {
     }
     async queryFeeds(request) {
         const response = await this.feedsQueryFeeds(request);
-        const feeds = response.feeds.map((f) => this.getOrCreateActiveFeed(f.group_id, f.id, f));
+        const feeds = response.feeds.map((f) => this.getOrCreateActiveFeed(f.group_id, f.id, f, request?.watch));
         return {
             feeds,
             next: response.next,
@@ -5487,6 +5621,52 @@ class FeedsClient extends FeedsApi {
             duration: response.duration,
         };
     }
+    // For follow API endpoints we update the state after HTTP response to allow queryFeeds with watch: false
+    async follow(request) {
+        const response = await super.follow(request);
+        [response.follow.source_feed.fid, response.follow.target_feed.fid].forEach((fid) => {
+            const feed = this.activeFeeds[fid];
+            if (feed) {
+                feed.handleFollowCreated(response.follow);
+            }
+        });
+        return response;
+    }
+    async followBatch(request) {
+        const response = await super.followBatch(request);
+        response.follows.forEach((follow) => {
+            const feed = this.activeFeeds[follow.source_feed.fid];
+            if (feed) {
+                feed.handleFollowCreated(follow);
+            }
+        });
+        return response;
+    }
+    async unfollow(request) {
+        const response = await super.unfollow(request);
+        [request.source, request.target].forEach((fid) => {
+            const feed = this.activeFeeds[fid];
+            if (feed) {
+                feed.handleFollowDeleted({
+                    source_feed: { fid: request.source },
+                    target_feed: { fid: request.target },
+                });
+            }
+        });
+        return response;
+    }
+    async stopWatchingFeed(request) {
+        const connectionId = await this.connectionIdManager.getConnectionId();
+        const response = await super.stopWatchingFeed({
+            ...request,
+            connection_id: connectionId,
+        });
+        const feed = this.activeFeeds[`${request.feed_group_id}:${request.feed_id}`];
+        if (feed) {
+            feed.handleWatchStopped();
+        }
+        return response;
+    }
     findActiveFeedByActivityId(activityId) {
         return Object.values(this.activeFeeds).filter((feed) => feed.currentState.activities?.some((activity) => activity.id === activityId));
     }
@@ -5818,7 +5998,7 @@ const selector = ({ own_follows }) => ({
  * that can then be used on the UI. The entity can be either an ActivityResponse or a CommentResponse
  * as the hook determines internally which APIs it is supposed to use, while taking the
  * correct ownCapabilities into account.
- * @param entity - The entity to which we want to add a reaction, can be either ActivityResponse or CommentResponse.
+ * @param entity - The entity to which we want to apply reaction actions, can be either ActivityResponse or CommentResponse.
  * @param type - The type of reaction we want to add or remove.
  */
 const useReactionActions = ({ entity, type, }) => {
@@ -5849,6 +6029,31 @@ const useReactionActions = ({ entity, type, }) => {
     return react.useMemo(() => ({ addReaction, removeReaction, toggleReaction }), [addReaction, removeReaction, toggleReaction]);
 };
 
+/**
+ * A utility hook that takes in an entity and creates bookmark actions
+ * that can then be used on the UI. The entity is expected to be an ActivityResponse.
+ * @param entity - The entity to which we want to apply reaction actions, expects an ActivityResponse.
+ */
+const useBookmarkActions = ({ entity, }) => {
+    const client = useFeedsClient();
+    const hasOwnBookmark = entity.own_bookmarks?.length > 0;
+    const addBookmark = useStableCallback(async () => {
+        await client?.addBookmark({ activity_id: entity.id });
+    });
+    const removeBookmark = useStableCallback(async () => {
+        await client?.deleteBookmark({ activity_id: entity.id });
+    });
+    const toggleBookmark = useStableCallback(async () => {
+        if (hasOwnBookmark) {
+            await removeBookmark();
+        }
+        else {
+            await addBookmark();
+        }
+    });
+    return react.useMemo(() => ({ addBookmark, removeBookmark, toggleBookmark }), [addBookmark, removeBookmark, toggleBookmark]);
+};
+
 const StreamFeeds = ({ client, children }) => {
     return (jsxRuntime.jsx(StreamFeedsContext.Provider, { value: client, children: children }));
 };
@@ -5863,6 +6068,7 @@ exports.StreamFeed = StreamFeed;
 exports.StreamFeedContext = StreamFeedContext;
 exports.StreamFeeds = StreamFeeds;
 exports.StreamFeedsContext = StreamFeedsContext;
+exports.useBookmarkActions = useBookmarkActions;
 exports.useClientConnectedUser = useClientConnectedUser;
 exports.useComments = useComments;
 exports.useCreateFeedsClient = useCreateFeedsClient;