@stream-io/feeds-client 0.1.4 → 0.1.5

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

@@ -275,122 +275,6 @@ function useStateStore(store, selector) {
     return state;
 }
 
-const useComments = (feed, 
-/**
- * The parent (activity or comment) for which to fetch comments.
- */
-parent) => {
-    const selector = react.useCallback((state) => ({
-        comments: state.comments_by_entity_id?.[parent.id]?.comments ?? [],
-        comment_pagination: state.comments_by_entity_id?.[parent.id]?.pagination,
-    }), [parent.id]);
-    return useStateStore(feed.state, selector);
-};
-
-const FeedOwnCapability = {
-    ADD_ACTIVITY: 'add-activity',
-    ADD_ACTIVITY_REACTION: 'add-activity-reaction',
-    ADD_COMMENT: 'add-comment',
-    ADD_COMMENT_REACTION: 'add-comment-reaction',
-    BOOKMARK_ACTIVITY: 'bookmark-activity',
-    CREATE_FEED: 'create-feed',
-    DELETE_BOOKMARK: 'delete-bookmark',
-    DELETE_COMMENT: 'delete-comment',
-    DELETE_FEED: 'delete-feed',
-    EDIT_BOOKMARK: 'edit-bookmark',
-    FOLLOW: 'follow',
-    INVITE_FEED: 'invite-feed',
-    JOIN_FEED: 'join-feed',
-    LEAVE_FEED: 'leave-feed',
-    MANAGE_FEED_GROUP: 'manage-feed-group',
-    MARK_ACTIVITY: 'mark-activity',
-    PIN_ACTIVITY: 'pin-activity',
-    QUERY_FEED_MEMBERS: 'query-feed-members',
-    QUERY_FOLLOWS: 'query-follows',
-    READ_ACTIVITIES: 'read-activities',
-    READ_FEED: 'read-feed',
-    REMOVE_ACTIVITY: 'remove-activity',
-    REMOVE_ACTIVITY_REACTION: 'remove-activity-reaction',
-    REMOVE_COMMENT_REACTION: 'remove-comment-reaction',
-    UNFOLLOW: 'unfollow',
-    UPDATE_ACTIVITY: 'update-activity',
-    UPDATE_COMMENT: 'update-comment',
-    UPDATE_FEED: 'update-feed',
-    UPDATE_FEED_FOLLOWERS: 'update-feed-followers',
-    UPDATE_FEED_MEMBERS: 'update-feed-members',
-};
-
-const stableEmptyArray = [];
-const selector = (currentState) => ({
-    oc: currentState.own_capabilities ?? stableEmptyArray,
-});
-const useOwnCapabilities = (feed) => {
-    const { oc = stableEmptyArray } = useStateStore(feed?.state, selector) ?? {};
-    return react.useMemo(() => ({
-        canAddActivity: oc.indexOf(FeedOwnCapability.ADD_ACTIVITY) > -1,
-        canAddActivityReaction: oc.indexOf(FeedOwnCapability.ADD_ACTIVITY_REACTION) > -1,
-        canAddComment: oc.indexOf(FeedOwnCapability.ADD_COMMENT) > -1,
-        canAddCommentReaction: oc.indexOf(FeedOwnCapability.ADD_COMMENT_REACTION) > -1,
-        canBookmarkActivity: oc.indexOf(FeedOwnCapability.BOOKMARK_ACTIVITY) > -1,
-        canCreateFeed: oc.indexOf(FeedOwnCapability.CREATE_FEED) > -1,
-        canDeleteBookmark: oc.indexOf(FeedOwnCapability.DELETE_BOOKMARK) > -1,
-        canDeleteComment: oc.indexOf(FeedOwnCapability.DELETE_COMMENT) > -1,
-        canDeleteFeed: oc.indexOf(FeedOwnCapability.DELETE_FEED) > -1,
-        canEditBookmark: oc.indexOf(FeedOwnCapability.EDIT_BOOKMARK) > -1,
-        canFollow: oc.indexOf(FeedOwnCapability.FOLLOW) > -1,
-        canRemoveActivity: oc.indexOf(FeedOwnCapability.REMOVE_ACTIVITY) > -1,
-        canRemoveActivityReaction: oc.indexOf(FeedOwnCapability.REMOVE_ACTIVITY_REACTION) > -1,
-        canRemoveCommentReaction: oc.indexOf(FeedOwnCapability.REMOVE_COMMENT_REACTION) > -1,
-        canUnfollow: oc.indexOf(FeedOwnCapability.UNFOLLOW) > -1,
-        canUpdateFeed: oc.indexOf(FeedOwnCapability.UPDATE_FEED) > -1,
-        canInviteFeed: oc.indexOf(FeedOwnCapability.INVITE_FEED) > -1,
-        canJoinFeed: oc.indexOf(FeedOwnCapability.JOIN_FEED) > -1,
-        canLeaveFeed: oc.indexOf(FeedOwnCapability.LEAVE_FEED) > -1,
-        canManageFeedGroup: oc.indexOf(FeedOwnCapability.MANAGE_FEED_GROUP) > -1,
-        canMarkActivity: oc.indexOf(FeedOwnCapability.MARK_ACTIVITY) > -1,
-        canPinActivity: oc.indexOf(FeedOwnCapability.PIN_ACTIVITY) > -1,
-        canQueryFeedMembers: oc.indexOf(FeedOwnCapability.QUERY_FEED_MEMBERS) > -1,
-        canQueryFollows: oc.indexOf(FeedOwnCapability.QUERY_FOLLOWS) > -1,
-        canReadActivities: oc.indexOf(FeedOwnCapability.READ_ACTIVITIES) > -1,
-        canReadFeed: oc.indexOf(FeedOwnCapability.READ_FEED) > -1,
-        canUpdateActivity: oc.indexOf(FeedOwnCapability.UPDATE_ACTIVITY) > -1,
-        canUpdateComment: oc.indexOf(FeedOwnCapability.UPDATE_COMMENT) > -1,
-        canUpdateFeedFollowers: oc.indexOf(FeedOwnCapability.UPDATE_FEED_FOLLOWERS) > -1,
-        canUpdateFeedMembers: oc.indexOf(FeedOwnCapability.UPDATE_FEED_MEMBERS) > -1,
-    }), [oc]);
-};
-
-const StreamFeedsContext = react.createContext(undefined);
-/**
- * Hook to access the nearest FeedsClient instance.
- */
-const useFeedsClient = () => {
-    return react.useContext(StreamFeedsContext);
-};
-
-/**
- * A React hook that returns the currently connected user on a `FeedsClient` instance and null otherwise.
- */
-const useClientConnectedUser = () => {
-    const client = useFeedsClient();
-    const { user } = useStateStore(client?.state, clientConnectedUserSelector) ?? {};
-    return user;
-};
-/**
- * A React hook that returns the websocket connection state of `FeedsClient`.
- */
-const useWsConnectionState = () => {
-    const client = useFeedsClient();
-    const { isHealthy } = useStateStore(client?.state, wsConnectionStateSelector) ?? {};
-    return { isHealthy };
-};
-const clientConnectedUserSelector = (nextState) => ({
-    user: nextState.connectedUser,
-});
-const wsConnectionStateSelector = (nextState) => ({
-    isHealthy: nextState.isWsConnectionHealthy,
-});
-
 const decoders = {};
 const decodeDatetimeType = (input) => typeof input === 'number'
     ? new Date(Math.floor(input / 1000000))
@@ -2835,6 +2719,13 @@ function removeConnectionEventListeners(cb) {
         window.removeEventListener('online', cb);
     }
 }
+const streamDevToken = (userId) => {
+    return [
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9', // {"alg": "HS256", "typ": "JWT"}
+        window.btoa(JSON.stringify({ user_id: userId })),
+        'devtoken', // hardcoded signature
+    ].join('.');
+};
 const capitalize = (s) => {
     return `${s.charAt(0).toLocaleUpperCase()}${s.slice(1)}`;
 };
@@ -3105,7 +2996,10 @@ class StableWSConnection {
         this.onmessage = (wsID, event) => {
             if (this.wsID !== wsID)
                 return;
-            this._log('onmessage() - onmessage callback', { event, wsID });
+            this._log('onmessage() - onmessage callback', {
+                event: { ...event, data: JSON.parse(event.data) },
+                wsID,
+            });
             let data = typeof event.data === 'string' ? JSON.parse(event.data) : null;
             this.decoders.forEach((decode) => {
                 data = decode(data);
@@ -4120,8 +4014,15 @@ const updateBookmarkInActivities = (event, activities, isCurrentUser) => {
     return updateActivityInActivities(updatedActivity, activities);
 };
 
-const END_OF_LIST = 'eol';
-const DEFAULT_COMMENT_PAGINATION = 'first';
+const checkHasAnotherPage = (v, cursor) => (typeof v === 'undefined' && typeof cursor === 'undefined') ||
+    typeof cursor === 'string';
+const isCommentResponse = (entity) => {
+    return typeof entity?.object_id === 'string';
+};
+const Constants = {
+    DEFAULT_COMMENT_PAGINATION: 'first',
+};
+
 class Feed extends FeedApi {
     constructor(client, groupId, id, data) {
         // Need this ugly cast because fileUpload endpoints :(
@@ -4194,7 +4095,7 @@ class Feed extends FeedApi {
                     const entityState = currentState.comments_by_entity_id[forId];
                     const newComments = entityState?.comments?.concat([]) ?? [];
                     if (entityState?.pagination?.sort === 'last' &&
-                        entityState?.pagination.next === END_OF_LIST) {
+                        !checkHasAnotherPage(entityState.comments, entityState?.pagination.next)) {
                         newComments.unshift(comment);
                     }
                     else if (entityState?.pagination?.sort === 'first') {
@@ -4281,7 +4182,7 @@ class Feed extends FeedApi {
                             ...currentState,
                             ...event.follow.source_feed,
                         };
-                        if (currentState.following_pagination?.next === END_OF_LIST) {
+                        if (!checkHasAnotherPage(currentState.following, currentState.following_pagination?.next)) {
                             // TODO: respect sort
                             newState.following = currentState.following
                                 ? currentState.following.concat(event.follow)
@@ -4302,7 +4203,7 @@ class Feed extends FeedApi {
                                 ? currentState.own_follows.concat(event.follow)
                                 : [event.follow];
                         }
-                        if (currentState.followers_pagination?.next === END_OF_LIST) {
+                        if (!checkHasAnotherPage(currentState.followers, currentState.followers_pagination?.next)) {
                             // TODO: respect sort
                             newState.followers = currentState.followers
                                 ? currentState.followers.concat(event.follow)
@@ -4343,40 +4244,60 @@ class Feed extends FeedApi {
             'feeds.comment.reaction.deleted': this.handleCommentReactionEvent.bind(this),
             'feeds.comment.reaction.updated': Feed.noop,
             'feeds.feed_member.added': (event) => {
-                const { member } = event;
-                // do not add a member if the pagination has reached the end of the list
-                if (this.currentState.member_pagination?.next !== END_OF_LIST)
-                    return;
+                const { connectedUser } = this.client.state.getLatestValue();
                 this.state.next((currentState) => {
-                    return {
-                        ...currentState,
-                        // TODO: respect sort
-                        members: currentState.members
-                            ? currentState.members.concat(member)
-                            : [member],
-                    };
+                    let newState;
+                    if (!checkHasAnotherPage(currentState.members, currentState.member_pagination?.next)) {
+                        newState ?? (newState = {
+                            ...currentState,
+                        });
+                        newState.members = newState.members?.concat(event.member) ?? [
+                            event.member,
+                        ];
+                    }
+                    if (connectedUser?.id === event.member.user.id) {
+                        newState ?? (newState = {
+                            ...currentState,
+                        });
+                        newState.own_membership = event.member;
+                    }
+                    return newState ?? currentState;
                 });
             },
             'feeds.feed_member.removed': (event) => {
+                const { connectedUser } = this.client.state.getLatestValue();
                 this.state.next((currentState) => {
-                    return {
+                    const newState = {
                         ...currentState,
                         members: currentState.members?.filter((member) => member.user.id !== event.user?.id),
                     };
+                    if (connectedUser?.id === event.member_id) {
+                        delete newState.own_membership;
+                    }
+                    return newState;
                 });
             },
             'feeds.feed_member.updated': (event) => {
+                const { connectedUser } = this.client.state.getLatestValue();
                 this.state.next((currentState) => {
                     const memberIndex = currentState.members?.findIndex((member) => member.user.id === event.member.user.id) ?? -1;
+                    let newState;
                     if (memberIndex !== -1) {
+                        // if there's an index, there's a member to update
                         const newMembers = [...currentState.members];
                         newMembers[memberIndex] = event.member;
-                        return {
+                        newState ?? (newState = {
                             ...currentState,
-                            members: newMembers,
-                        };
+                        });
+                        newState.members = newMembers;
+                    }
+                    if (connectedUser?.id === event.member.user.id) {
+                        newState ?? (newState = {
+                            ...currentState,
+                        });
+                        newState.own_membership = event.member;
                     }
-                    return currentState;
+                    return newState ?? currentState;
                 });
             },
             // the poll events should be removed from here
@@ -4502,29 +4423,6 @@ class Feed extends FeedApi {
                         ...currentState,
                         ...responseCopy,
                     };
-                    // if there is no next cursor, set it to END_OF_LIST
-                    // request has to have a limit set for this to work
-                    if ((request?.followers_pagination?.limit ?? 0) > 0 &&
-                        typeof nextState.followers_pagination?.next === 'undefined') {
-                        nextState.followers_pagination = {
-                            ...nextState.followers_pagination,
-                            next: END_OF_LIST,
-                        };
-                    }
-                    if ((request?.following_pagination?.limit ?? 0) > 0 &&
-                        typeof nextState.following_pagination?.next === 'undefined') {
-                        nextState.following_pagination = {
-                            ...nextState.following_pagination,
-                            next: END_OF_LIST,
-                        };
-                    }
-                    if ((request?.member_pagination?.limit ?? 0) > 0 &&
-                        typeof nextState.member_pagination?.next === 'undefined') {
-                        nextState.member_pagination = {
-                            ...nextState.member_pagination,
-                            next: END_OF_LIST,
-                        };
-                    }
                     if (!request?.followers_pagination?.limit) {
                         delete nextState.followers;
                     }
@@ -4615,6 +4513,7 @@ class Feed extends FeedApi {
         });
     }
     async loadNextPageComments({ forId, base, sort, parentId, }) {
+        let error;
         try {
             this.state.next((currentState) => ({
                 ...currentState,
@@ -4629,7 +4528,7 @@ class Feed extends FeedApi {
                     },
                 },
             }));
-            const { next: newNextCursor = END_OF_LIST, comments } = await base();
+            const { next: newNextCursor, comments } = await base();
             this.state.next((currentState) => {
                 const newPagination = {
                     ...currentState.comments_by_entity_id[forId]?.pagination,
@@ -4654,9 +4553,8 @@ class Feed extends FeedApi {
                 };
             });
         }
-        catch (error) {
-            console.error(error);
-            // TODO: figure out how to handle errorss
+        catch (e) {
+            error = e;
         }
         finally {
             this.state.next((currentState) => ({
@@ -4673,15 +4571,21 @@ class Feed extends FeedApi {
                 },
             }));
         }
+        if (error) {
+            throw error;
+        }
     }
     async loadNextPageActivityComments(activity, request) {
-        const pagination = this.currentState.comments_by_entity_id[activity.id]?.pagination;
-        const currentNextCursor = pagination?.next;
-        const currentSort = pagination?.sort;
-        const isLoading = pagination?.loading_next_page;
-        const sort = currentSort ?? request?.sort ?? DEFAULT_COMMENT_PAGINATION;
-        if (isLoading || currentNextCursor === END_OF_LIST)
+        const currentEntityState = this.currentState.comments_by_entity_id[activity.id];
+        const currentPagination = currentEntityState?.pagination;
+        const currentNextCursor = currentPagination?.next;
+        const currentSort = currentPagination?.sort;
+        const isLoading = currentPagination?.loading_next_page;
+        const sort = currentSort ?? request?.sort ?? Constants.DEFAULT_COMMENT_PAGINATION;
+        if (isLoading ||
+            !checkHasAnotherPage(currentEntityState?.comments, currentNextCursor)) {
             return;
+        }
         await this.loadNextPageComments({
             forId: activity.id,
             base: () => this.client.getComments({
@@ -4695,20 +4599,25 @@ class Feed extends FeedApi {
         });
     }
     async loadNextPageCommentReplies(comment, request) {
-        const pagination = this.currentState.comments_by_entity_id[comment.id]?.pagination;
-        const currentNextCursor = pagination?.next;
-        const currentSort = pagination?.sort;
-        const isLoading = pagination?.loading_next_page;
-        const sort = currentSort ?? request?.sort ?? DEFAULT_COMMENT_PAGINATION;
-        if (isLoading || currentNextCursor === END_OF_LIST)
+        const currentEntityState = this.currentState.comments_by_entity_id[comment.id];
+        const currentPagination = currentEntityState?.pagination;
+        const currentNextCursor = currentPagination?.next;
+        const currentSort = currentPagination?.sort;
+        const isLoading = currentPagination?.loading_next_page;
+        const sort = currentSort ?? request?.sort ?? Constants.DEFAULT_COMMENT_PAGINATION;
+        if (isLoading ||
+            !checkHasAnotherPage(currentEntityState?.comments, currentNextCursor)) {
             return;
+        }
         await this.loadNextPageComments({
             forId: comment.id,
             base: () => this.client.getCommentReplies({
                 ...request,
                 comment_id: comment.id,
                 // use known sort first (prevents broken pagination)
-                sort: currentSort ?? request?.sort ?? DEFAULT_COMMENT_PAGINATION,
+                sort: currentSort ??
+                    request?.sort ??
+                    Constants.DEFAULT_COMMENT_PAGINATION,
                 next: currentNextCursor,
             }),
             parentId: comment.parent_id ?? comment.object_id,
@@ -4718,10 +4627,14 @@ class Feed extends FeedApi {
     async loadNextPageFollows(type, request) {
         const paginationKey = `${type}_pagination`;
         const method = `query${capitalize(type)}`;
+        const currentFollows = this.currentState[type];
         const currentNextCursor = this.currentState[paginationKey]?.next;
         const isLoading = this.currentState[paginationKey]?.loading_next_page;
-        if (isLoading || currentNextCursor === END_OF_LIST)
+        const sort = this.currentState[paginationKey]?.sort ?? request.sort;
+        let error;
+        if (isLoading || !checkHasAnotherPage(currentFollows, currentNextCursor)) {
             return;
+        }
         try {
             this.state.next((currentState) => {
                 return {
@@ -4732,9 +4645,10 @@ class Feed extends FeedApi {
                     },
                 };
             });
-            const { next: newNextCursor = END_OF_LIST, follows } = await this[method]({
+            const { next: newNextCursor, follows } = await this[method]({
                 ...request,
                 next: currentNextCursor,
+                sort,
             });
             this.state.next((currentState) => ({
                 ...currentState,
@@ -4744,12 +4658,12 @@ class Feed extends FeedApi {
                 [paginationKey]: {
                     ...currentState[paginationKey],
                     next: newNextCursor,
+                    sort,
                 },
             }));
         }
-        catch (error) {
-            console.error(error);
-            // TODO: figure out how to handle errorss
+        catch (e) {
+            error = e;
         }
         finally {
             this.state.next((currentState) => {
@@ -4762,6 +4676,9 @@ class Feed extends FeedApi {
                 };
             });
         }
+        if (error) {
+            throw error;
+        }
     }
     async loadNextPageFollowers(request) {
         await this.loadNextPageFollows('followers', request);
@@ -4769,6 +4686,59 @@ class Feed extends FeedApi {
     async loadNextPageFollowing(request) {
         await this.loadNextPageFollows('following', request);
     }
+    async loadNextPageMembers(request) {
+        const currentMembers = this.currentState.members;
+        const currentNextCursor = this.currentState.member_pagination?.next;
+        const isLoading = this.currentState.member_pagination?.loading_next_page;
+        const sort = this.currentState.member_pagination?.sort ?? request.sort;
+        let error;
+        if (isLoading || !checkHasAnotherPage(currentMembers, currentNextCursor)) {
+            return;
+        }
+        try {
+            this.state.next((currentState) => ({
+                ...currentState,
+                member_pagination: {
+                    ...currentState.member_pagination,
+                    loading_next_page: true,
+                },
+            }));
+            const { next: newNextCursor, members } = await this.client.queryFeedMembers({
+                ...request,
+                sort,
+                feed_id: this.id,
+                feed_group_id: this.group,
+                next: currentNextCursor,
+            });
+            this.state.next((currentState) => ({
+                ...currentState,
+                members: currentState.members
+                    ? currentState.members.concat(members)
+                    : members,
+                member_pagination: {
+                    ...currentState.member_pagination,
+                    next: newNextCursor,
+                    // set sort if not defined yet
+                    sort: currentState.member_pagination?.sort ?? request.sort,
+                },
+            }));
+        }
+        catch (e) {
+            error = e;
+        }
+        finally {
+            this.state.next((currentState) => ({
+                ...currentState,
+                member_pagination: {
+                    ...currentState.member_pagination,
+                    loading_next_page: false,
+                },
+            }));
+        }
+        if (error) {
+            throw error;
+        }
+    }
     /**
      * Method which queries followers of this feed (feeds which target this feed).
      *
@@ -5259,6 +5229,9 @@ class FeedsClient extends FeedsApi {
                 throw err;
             }
         };
+        this.devToken = (userId) => {
+            return streamDevToken(userId);
+        };
         this.closePoll = async (request) => {
             return await this.updatePollPartial({
                 poll_id: request.poll_id,
@@ -5517,18 +5490,313 @@ const useCreateFeedsClient = ({ apiKey, tokenOrProvider, userData, options, }) =
     return client;
 };
 
+const StreamFeedsContext = react.createContext(undefined);
+/**
+ * Hook to access the nearest FeedsClient instance.
+ */
+const useFeedsClient = () => {
+    return react.useContext(StreamFeedsContext);
+};
+
+/**
+ * A React hook that returns the currently connected user on a `FeedsClient` instance and null otherwise.
+ */
+const useClientConnectedUser = () => {
+    const client = useFeedsClient();
+    const { user } = useStateStore(client?.state, selector$5) ?? {};
+    return user;
+};
+const selector$5 = (nextState) => ({
+    user: nextState.connectedUser,
+});
+
+/**
+ * A React hook that returns the websocket connection state of `FeedsClient`.
+ */
+const useWsConnectionState = () => {
+    const client = useFeedsClient();
+    const { isHealthy } = useStateStore(client?.state, selector$4) ?? {};
+    return { isHealthy };
+};
+const selector$4 = (nextState) => ({
+    isHealthy: nextState.isWsConnectionHealthy,
+});
+
+const StreamFeedContext = react.createContext(undefined);
+/**
+ * Hook to access the nearest Feed instance.
+ */
+const useFeedContext = () => {
+    return react.useContext(StreamFeedContext);
+};
+
+/**
+ * A utility hook implementing a stable callback. It takes in an unstable method that
+ * is supposed to be invoked somewhere deeper in the DOM tree without making it
+ * change its reference every time the parent component rerenders. It will also return
+ * the value of the callback if it does return one.
+ * A common use-case would be having a function whose invocation depends on state
+ * somewhere high up in the DOM tree and wanting to use the same function deeper
+ * down, for example in a leaf node and simply using useCallback results in
+ * cascading dependency hell. If we wrap it in useStableCallback, we would be able
+ * to:
+ * - Use the same function as a dependency of another hook (since it is stable)
+ * - Still invoke it and get the latest state
+ *
+ * **Caveats:**
+ * - Never wrap a function that is supposed to return a React.ReactElement in
+ *   useStableCallback, since React will not know that the DOM needs to be updated
+ *   whenever the callback value changes (for example, renderItem from FlatList must
+ *   never be wrapped in this hook)
+ * - Always prefer using a standard useCallback/stable function wherever possible
+ *   (the purpose of useStableCallback is to bridge the gap between top level contexts
+ *   and cascading rereders in downstream components - **not** as an escape hatch)
+ * @param callback - the callback we want to stabilize
+ */
+const useStableCallback = (callback) => {
+    const ref = react.useRef(callback);
+    ref.current = callback;
+    return react.useCallback((...args) => {
+        return ref.current(...args);
+    }, []);
+};
+
+/**
+ * A React hook that returns a reactive object containing the current activities,
+ * loading state and whether there is a next page to paginate to or not.
+ */
+const useFeedActivities = (feedFromProps) => {
+    const feedFromContext = useFeedContext();
+    const feed = feedFromProps ?? feedFromContext;
+    const data = useStateStore(feed?.state, selector$3);
+    const loadNextPage = useStableCallback(async () => {
+        if (!feed || !data?.hasNextPage || data?.isLoading) {
+            return;
+        }
+        await feed.getNextPage();
+    });
+    return react.useMemo(() => ({ ...data, loadNextPage }), [data, loadNextPage]);
+};
+const selector$3 = (nextState) => ({
+    isLoading: nextState.is_loading_activities,
+    hasNextPage: typeof nextState.next !== 'undefined',
+    activities: nextState.activities ?? [],
+});
+
+function useComments({ feed: feedFromProps, parent, }) {
+    const feedFromContext = useFeedContext();
+    const feed = feedFromProps ?? feedFromContext;
+    const selector = react.useCallback((state) => ({
+        comments: state.comments_by_entity_id?.[parent.id]?.comments,
+        comments_pagination: state.comments_by_entity_id?.[parent.id]?.pagination,
+    }), [parent.id]);
+    const data = useStateStore(feed?.state, selector);
+    const loadNextPage = react.useMemo(() => {
+        if (!feed)
+            return undefined;
+        return (request) => {
+            if (isCommentResponse(parent)) {
+                return feed.loadNextPageCommentReplies(parent, request);
+            }
+            else {
+                return feed.loadNextPageActivityComments(parent, request);
+            }
+        };
+    }, [feed, parent]);
+    return react.useMemo(() => {
+        if (!data) {
+            return undefined;
+        }
+        return {
+            ...data,
+            hasNextPage: checkHasAnotherPage(data.comments, data.comments_pagination?.next),
+            isLoadingNextPage: data?.comments_pagination?.loading_next_page ?? false,
+            loadNextPage,
+        };
+    }, [data, loadNextPage]);
+}
+
+const FeedOwnCapability = {
+    ADD_ACTIVITY: 'add-activity',
+    ADD_ACTIVITY_REACTION: 'add-activity-reaction',
+    ADD_COMMENT: 'add-comment',
+    ADD_COMMENT_REACTION: 'add-comment-reaction',
+    BOOKMARK_ACTIVITY: 'bookmark-activity',
+    CREATE_FEED: 'create-feed',
+    DELETE_BOOKMARK: 'delete-bookmark',
+    DELETE_COMMENT: 'delete-comment',
+    DELETE_FEED: 'delete-feed',
+    EDIT_BOOKMARK: 'edit-bookmark',
+    FOLLOW: 'follow',
+    INVITE_FEED: 'invite-feed',
+    JOIN_FEED: 'join-feed',
+    LEAVE_FEED: 'leave-feed',
+    MANAGE_FEED_GROUP: 'manage-feed-group',
+    MARK_ACTIVITY: 'mark-activity',
+    PIN_ACTIVITY: 'pin-activity',
+    QUERY_FEED_MEMBERS: 'query-feed-members',
+    QUERY_FOLLOWS: 'query-follows',
+    READ_ACTIVITIES: 'read-activities',
+    READ_FEED: 'read-feed',
+    REMOVE_ACTIVITY: 'remove-activity',
+    REMOVE_ACTIVITY_REACTION: 'remove-activity-reaction',
+    REMOVE_COMMENT_REACTION: 'remove-comment-reaction',
+    UNFOLLOW: 'unfollow',
+    UPDATE_ACTIVITY: 'update-activity',
+    UPDATE_COMMENT: 'update-comment',
+    UPDATE_FEED: 'update-feed',
+    UPDATE_FEED_FOLLOWERS: 'update-feed-followers',
+    UPDATE_FEED_MEMBERS: 'update-feed-members',
+};
+
+const stableEmptyArray = [];
+const selector$2 = (currentState) => ({
+    oc: currentState.own_capabilities ?? stableEmptyArray,
+});
+const useOwnCapabilities = (feedFromProps) => {
+    const feedFromContext = useFeedContext();
+    const feed = feedFromProps ?? feedFromContext;
+    const { oc = stableEmptyArray } = useStateStore(feed?.state, selector$2) ?? {};
+    return react.useMemo(() => ({
+        canAddActivity: oc.indexOf(FeedOwnCapability.ADD_ACTIVITY) > -1,
+        canAddActivityReaction: oc.indexOf(FeedOwnCapability.ADD_ACTIVITY_REACTION) > -1,
+        canAddComment: oc.indexOf(FeedOwnCapability.ADD_COMMENT) > -1,
+        canAddCommentReaction: oc.indexOf(FeedOwnCapability.ADD_COMMENT_REACTION) > -1,
+        canBookmarkActivity: oc.indexOf(FeedOwnCapability.BOOKMARK_ACTIVITY) > -1,
+        canCreateFeed: oc.indexOf(FeedOwnCapability.CREATE_FEED) > -1,
+        canDeleteBookmark: oc.indexOf(FeedOwnCapability.DELETE_BOOKMARK) > -1,
+        canDeleteComment: oc.indexOf(FeedOwnCapability.DELETE_COMMENT) > -1,
+        canDeleteFeed: oc.indexOf(FeedOwnCapability.DELETE_FEED) > -1,
+        canEditBookmark: oc.indexOf(FeedOwnCapability.EDIT_BOOKMARK) > -1,
+        canFollow: oc.indexOf(FeedOwnCapability.FOLLOW) > -1,
+        canRemoveActivity: oc.indexOf(FeedOwnCapability.REMOVE_ACTIVITY) > -1,
+        canRemoveActivityReaction: oc.indexOf(FeedOwnCapability.REMOVE_ACTIVITY_REACTION) > -1,
+        canRemoveCommentReaction: oc.indexOf(FeedOwnCapability.REMOVE_COMMENT_REACTION) > -1,
+        canUnfollow: oc.indexOf(FeedOwnCapability.UNFOLLOW) > -1,
+        canUpdateFeed: oc.indexOf(FeedOwnCapability.UPDATE_FEED) > -1,
+        canInviteFeed: oc.indexOf(FeedOwnCapability.INVITE_FEED) > -1,
+        canJoinFeed: oc.indexOf(FeedOwnCapability.JOIN_FEED) > -1,
+        canLeaveFeed: oc.indexOf(FeedOwnCapability.LEAVE_FEED) > -1,
+        canManageFeedGroup: oc.indexOf(FeedOwnCapability.MANAGE_FEED_GROUP) > -1,
+        canMarkActivity: oc.indexOf(FeedOwnCapability.MARK_ACTIVITY) > -1,
+        canPinActivity: oc.indexOf(FeedOwnCapability.PIN_ACTIVITY) > -1,
+        canQueryFeedMembers: oc.indexOf(FeedOwnCapability.QUERY_FEED_MEMBERS) > -1,
+        canQueryFollows: oc.indexOf(FeedOwnCapability.QUERY_FOLLOWS) > -1,
+        canReadActivities: oc.indexOf(FeedOwnCapability.READ_ACTIVITIES) > -1,
+        canReadFeed: oc.indexOf(FeedOwnCapability.READ_FEED) > -1,
+        canUpdateActivity: oc.indexOf(FeedOwnCapability.UPDATE_ACTIVITY) > -1,
+        canUpdateComment: oc.indexOf(FeedOwnCapability.UPDATE_COMMENT) > -1,
+        canUpdateFeedFollowers: oc.indexOf(FeedOwnCapability.UPDATE_FEED_FOLLOWERS) > -1,
+        canUpdateFeedMembers: oc.indexOf(FeedOwnCapability.UPDATE_FEED_MEMBERS) > -1,
+    }), [oc]);
+};
+
+const selector$1 = ({ follower_count, followers, followers_pagination, }) => ({
+    follower_count,
+    followers,
+    followers_pagination,
+});
+function useFollowers(feedFromProps) {
+    const feedFromContext = useFeedContext();
+    const feed = feedFromProps ?? feedFromContext;
+    const data = useStateStore(feed?.state, selector$1);
+    const loadNextPage = react.useCallback((...options) => feed?.loadNextPageFollowers(...options), [feed]);
+    return react.useMemo(() => {
+        if (!data) {
+            return undefined;
+        }
+        return {
+            ...data,
+            isLoadingNextPage: data.followers_pagination?.loading_next_page ?? false,
+            hasNextPage: checkHasAnotherPage(data.followers, data.followers_pagination?.next),
+            loadNextPage,
+        };
+    }, [data, loadNextPage]);
+}
+
+const selector = ({ following_count, following, following_pagination, }) => ({
+    following_count,
+    following,
+    following_pagination,
+});
+function useFollowing(feedFromProps) {
+    const feedFromContext = useFeedContext();
+    const feed = feedFromProps ?? feedFromContext;
+    const data = useStateStore(feed?.state, selector);
+    const loadNextPage = react.useCallback((...options) => feed?.loadNextPageFollowing(...options), [feed]);
+    return react.useMemo(() => {
+        if (!data) {
+            return undefined;
+        }
+        return {
+            ...data,
+            isLoadingNextPage: data.following_pagination?.loading_next_page ?? false,
+            hasNextPage: checkHasAnotherPage(data.following, data.following_pagination?.next),
+            loadNextPage,
+        };
+    }, [data, loadNextPage]);
+}
+
+/**
+ * A utility hook that takes in an entity and a reaction type, and creates reaction actions
+ * 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 type - The type of reaction we want to add or remove.
+ */
+const useReactionActions = ({ entity, type, }) => {
+    const client = useFeedsClient();
+    const isComment = isCommentResponse(entity);
+    const hasOwnReaction = react.useMemo(() => !!entity.own_reactions?.find((r) => r.type === type), [entity.own_reactions, type]);
+    const addReaction = useStableCallback(async () => {
+        await (isComment
+            ? client?.addCommentReaction({ comment_id: entity.id, type })
+            : client?.addReaction({ activity_id: entity.id, type }));
+    });
+    const removeReaction = useStableCallback(async () => {
+        await (isComment
+            ? client?.deleteCommentReaction({ comment_id: entity.id, type })
+            : client?.deleteActivityReaction({
+                activity_id: entity.id,
+                type,
+            }));
+    });
+    const toggleReaction = useStableCallback(async () => {
+        if (hasOwnReaction) {
+            await removeReaction();
+        }
+        else {
+            await addReaction();
+        }
+    });
+    return react.useMemo(() => ({ addReaction, removeReaction, toggleReaction }), [addReaction, removeReaction, toggleReaction]);
+};
+
 const StreamFeeds = ({ client, children }) => {
     return (jsxRuntime.jsx(StreamFeedsContext.Provider, { value: client, children: children }));
 };
 StreamFeeds.displayName = 'StreamFeeds';
 
+const StreamFeed = ({ feed, children }) => {
+    return (jsxRuntime.jsx(StreamFeedContext.Provider, { value: feed, children: children }));
+};
+StreamFeed.displayName = 'StreamFeed';
+
+exports.StreamFeed = StreamFeed;
+exports.StreamFeedContext = StreamFeedContext;
 exports.StreamFeeds = StreamFeeds;
 exports.StreamFeedsContext = StreamFeedsContext;
 exports.useClientConnectedUser = useClientConnectedUser;
 exports.useComments = useComments;
 exports.useCreateFeedsClient = useCreateFeedsClient;
+exports.useFeedActivities = useFeedActivities;
+exports.useFeedContext = useFeedContext;
 exports.useFeedsClient = useFeedsClient;
+exports.useFollowers = useFollowers;
+exports.useFollowing = useFollowing;
 exports.useOwnCapabilities = useOwnCapabilities;
+exports.useReactionActions = useReactionActions;
 exports.useStateStore = useStateStore;
 exports.useWsConnectionState = useWsConnectionState;
 //# sourceMappingURL=index-react-bindings.browser.cjs.map