@stream-io/feeds-client 0.3.6 → 0.3.8

package/src/activity-with-state-updates/activity-with-state-updates.ts

@@ -0,0 +1,190 @@
+import { StateStore } from '@stream-io/state-store';
+import type { Feed, FeedState } from '../feed';
+import type { FeedsClient } from '../feeds-client';
+import type { ActivityResponse } from '../gen/models';
+import {
+  connectActivityToFeed,
+  disconnectActivityFromFeed,
+  isAnyFeedWatched,
+} from '../feeds-client/active-activity';
+import type { GetCommentsRequest } from '@self';
+import { deepEqual } from '../utils/deep-equal';
+
+type GetActivityConfig = {
+  comments?: Partial<
+    Omit<GetCommentsRequest, 'object_id' | 'object_type' | 'next'>
+  >;
+};
+
+export type ActivityState = { activity?: ActivityResponse } & Pick<
+  FeedState,
+  'comments_by_entity_id'
+> & {
+    /**
+     * True when state is being fetched from API
+     */
+    is_loading: boolean;
+    /**
+     * @internal
+     */
+    last_get_request_config?: GetActivityConfig;
+  };
+
+export class ActivityWithStateUpdates {
+  readonly state: StateStore<ActivityState>;
+  protected feed: Feed | undefined;
+  private unsubscribeFromFeedState?: () => void;
+  private inProgressGet?: {
+    request?: GetActivityConfig;
+    promise: Promise<ActivityResponse>;
+  };
+
+  constructor(
+    public readonly id: string,
+    private readonly feedsClient: FeedsClient,
+  ) {
+    this.state = new StateStore<ActivityState>({
+      activity: undefined,
+      comments_by_entity_id: {},
+      is_loading: false,
+    });
+  }
+
+  get currentState() {
+    return this.state.getLatestValue();
+  }
+
+  get feeds() {
+    return this.currentState.activity?.feeds ?? [];
+  }
+
+  /**
+   * Fetch activity and load it into state
+   * @param watch - Whether to watch the feed the activity belongs to for real-time updates
+   * @param feed - The feed to watch. Use only if the activity belongs to multiple feeds and you want to specify the feed explicitly.
+   * @param feedSelector - A function to select the feed from the activity response. Use only if the activity belongs to multiple feeds and you want to specify the feed explicitly.
+   */
+  async get(request: GetActivityConfig = {}) {
+    if (this.inProgressGet && deepEqual(this.inProgressGet.request, request)) {
+      return this.inProgressGet.promise;
+    }
+
+    const { comments } = request;
+
+    this.state.partialNext({
+      is_loading: true,
+      last_get_request_config: request,
+    });
+
+    const getActivityRequest = this.feedsClient
+      .getActivity({
+        id: this.id,
+      })
+      .then((response) => response.activity);
+    this.inProgressGet = { request, promise: getActivityRequest };
+    const activityResponse = await getActivityRequest;
+
+    this.feedsClient.hydratePollCache([activityResponse]);
+
+    this.setFeed({
+      // We set feed to first containing feed
+      // But in WS event handler we match events by any of the containing feeds, so as long as any of the containing feeds are watched, we'll do a state update
+      // This is a bit hacky, proper solution would be to refactor all activity event handlers and detach them from feed instance
+      fid: activityResponse.feeds[0],
+      initialState: activityResponse,
+    });
+
+    if (this.feed) {
+      this.feed.activityAddedEventFilter = () => false;
+    }
+
+    if (comments) {
+      await this.loadNextPageActivityComments(comments);
+    }
+
+    this.subscribeToFeedState();
+
+    this.inProgressGet = undefined;
+
+    return activityResponse;
+  }
+
+  loadNextPageActivityComments(
+    request?: Partial<
+      Omit<GetCommentsRequest, 'object_id' | 'object_type' | 'next'>
+    >,
+  ) {
+    const activity = this.feed?.currentState.activities?.[0];
+    if (!activity || !this.feed) {
+      throw new Error('Initialize activity first');
+    }
+    if (!this.currentState.last_get_request_config?.comments) {
+      this.state.partialNext({
+        last_get_request_config: {
+          ...this.currentState.last_get_request_config,
+          comments: request,
+        },
+      });
+    }
+    return this.feed.loadNextPageActivityComments(activity, request);
+  }
+
+  loadNextPageCommentReplies(
+    ...params: Parameters<Feed['loadNextPageCommentReplies']>
+  ) {
+    if (!this.feed) {
+      throw new Error('Initialize activity first');
+    }
+    return this.feed.loadNextPageCommentReplies(...params);
+  }
+
+  dispose() {
+    this.unsubscribeFromFeedState?.();
+    disconnectActivityFromFeed.call(this.feedsClient, this.id);
+  }
+
+  /**
+   * @internal
+   */
+  async synchronize() {
+    const allFids = this.currentState.activity?.feeds ?? [];
+    if (!isAnyFeedWatched.call(this.feedsClient, allFids)) {
+      return;
+    }
+    this.inProgressGet = undefined;
+    return this.get(this.currentState.last_get_request_config);
+  }
+
+  private setFeed({
+    fid,
+    initialState,
+  }: {
+    fid: string;
+    initialState: ActivityResponse;
+  }) {
+    this.feed = connectActivityToFeed.call(this.feedsClient, { fid });
+
+    this.feed.state.partialNext({
+      activities: [initialState],
+    });
+  }
+
+  private subscribeToFeedState() {
+    this.unsubscribeFromFeedState?.();
+    this.unsubscribeFromFeedState = this.feed?.state.subscribeWithSelector(
+      (state) => ({
+        activity: state.activities?.find((activity) => activity.id === this.id),
+        comments_by_entity_id: state.comments_by_entity_id,
+      }),
+      (state) => {
+        if (state.activity) {
+          this.state.partialNext({
+            activity: state.activity,
+            comments_by_entity_id: state.comments_by_entity_id,
+            is_loading: false,
+          });
+        }
+      },
+    );
+  }
+}

package/src/activity-with-state-updates/get-feed.ts

@@ -0,0 +1,5 @@
+import type { ActivityWithStateUpdates } from './activity-with-state-updates';
+
+export function getFeed(this: ActivityWithStateUpdates) {
+  return this.feed;
+}

package/src/bindings/react/hooks/feed-state-hooks/index.ts

@@ -9,3 +9,4 @@ export * from './useNotificationStatus';
 export * from './useAggregatedActivities';
 export * from './useIsAggregatedActivityRead';
 export * from './useIsAggregatedActivitySeen';
+export * from './useActivityComments';

package/src/bindings/react/hooks/feed-state-hooks/useActivityComments.ts

@@ -0,0 +1,113 @@
+import { useCallback, useMemo } from 'react';
+import {
+  type ActivityResponse,
+  type CommentResponse,
+  type Feed,
+  type FeedState,
+  checkHasAnotherPage,
+  type ActivityWithStateUpdates,
+  type ActivityState,
+  type StateStore,
+} from '@self';
+import { useFeedContext } from '../../contexts/StreamFeedContext';
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+const canLoadComments = (
+  feedOrActivity: Feed | ActivityResponse | ActivityWithStateUpdates,
+): feedOrActivity is ActivityWithStateUpdates | Feed => {
+  return (
+    'loadNextPageCommentReplies' in feedOrActivity &&
+    'loadNextPageActivityComments' in feedOrActivity
+  );
+};
+
+type UseCommentsReturnType<T extends ActivityResponse | CommentResponse> = {
+  comments: NonNullable<
+    FeedState['comments_by_entity_id'][T['id']]
+  >['comments'];
+  comments_pagination: NonNullable<
+    FeedState['comments_by_entity_id'][T['id']]
+  >['pagination'];
+  has_next_page: boolean;
+  is_loading_next_page: boolean;
+  loadNextPage: (
+    request?: T extends CommentResponse
+      ? Parameters<Feed['loadNextPageCommentReplies']>[1]
+      : Parameters<Feed['loadNextPageActivityComments']>[1],
+  ) => Promise<void>;
+};
+
+export function useActivityComments({
+  feed: feedFromProps,
+  parentComment,
+  activity,
+}: {
+  feed?: Feed;
+  parentComment?: CommentResponse;
+  activity?: ActivityResponse | ActivityWithStateUpdates;
+}) {
+  const feedFromContext = useFeedContext();
+  const feed = feedFromProps ?? feedFromContext;
+  const feedOrActivity = feed ?? activity;
+
+  if (!feedOrActivity) {
+    throw new Error('Feed or activity is required');
+  }
+
+  if (!canLoadComments(feedOrActivity)) {
+    throw new Error('Feed or activity does not support loading comments');
+  }
+
+  if (!(activity || parentComment)) {
+    throw new Error('Activity or parent comment is required');
+  }
+
+  const entityId = parentComment?.id ?? activity?.id ?? '';
+  const selector = useCallback(
+    (state: FeedState | ActivityState) => ({
+      comments: state.comments_by_entity_id?.[entityId]?.comments,
+      comments_pagination: state.comments_by_entity_id?.[entityId]?.pagination,
+    }),
+    [entityId],
+  );
+
+  const data = useStateStore(
+    feedOrActivity.state as StateStore<FeedState | ActivityState>,
+    selector,
+  );
+
+  const loadNextPage = useCallback<
+    UseCommentsReturnType<ActivityResponse | CommentResponse>['loadNextPage']
+  >(
+    (request) => {
+      if (parentComment) {
+        return feedOrActivity.loadNextPageCommentReplies(
+          parentComment,
+          request,
+        );
+      } else {
+        if (activity && canLoadComments(activity)) {
+          return activity.loadNextPageActivityComments(request);
+        } else if (feed) {
+          return feed.loadNextPageActivityComments(activity?.id ?? '', request);
+        } else {
+          throw new Error('Activity or feed is required');
+        }
+      }
+    },
+    [feedOrActivity, feed, parentComment, activity],
+  );
+
+  return useMemo(() => {
+    return {
+      ...data,
+      has_next_page: checkHasAnotherPage(
+        data.comments,
+        data.comments_pagination?.next,
+      ),
+      is_loading_next_page:
+        data?.comments_pagination?.loading_next_page ?? false,
+      loadNextPage,
+    };
+  }, [data, loadNextPage]);
+}

package/src/bindings/react/hooks/feed-state-hooks/useComments.ts

@@ -27,6 +27,10 @@ type UseCommentsReturnType<T extends ActivityResponse | CommentResponse> = {
   ) => Promise<void>;
 };
 
+/**
+ * @deprecated Use `useActivityComments` instead.
+ * @param
+ */
 export function useComments<T extends CommentParent>(_: {
   feed: Feed;
   parent: T;

package/src/bindings/react/hooks/feed-state-hooks/useOwnCapabilities.ts

@@ -12,16 +12,19 @@ export const useOwnCapabilities = (feedFromProps?: Feed) => {
   const feed = feedFromProps ?? feedFromContext;
   const fid = feed?.feed;
 
-  const selector = useCallback((currentState: FeedsClientState) => {
-    if (!fid) {
-      return { feedOwnCapabilities: stableEmptyArray };
-    }
+  const selector = useCallback(
+    (currentState: FeedsClientState) => {
+      if (!fid) {
+        return { feedOwnCapabilities: stableEmptyArray };
+      }
 
-    return {
-      feedOwnCapabilities:
-        currentState.own_capabilities_by_fid[fid] ?? stableEmptyArray,
-    };
-  }, [fid]);
+      return {
+        feedOwnCapabilities:
+          currentState.own_capabilities_by_fid[fid] ?? stableEmptyArray,
+      };
+    },
+    [fid],
+  );
 
   const { feedOwnCapabilities = stableEmptyArray } =
     useStateStore(client?.state, selector) ?? {};

package/src/bindings/react/hooks/useCreateFeedsClient.ts

@@ -43,7 +43,6 @@ export const useCreateFeedsClient = ({
       .connectUser(cachedUserData, tokenOrProvider)
       .then(() => {
         setError(null);
-        console.log('Successfully connected user: ', cachedUserData.id);
       })
       .catch((err) => {
         setError(err);
@@ -60,11 +59,6 @@ export const useCreateFeedsClient = ({
         })
         .catch((err) => {
           setError(err);
-        })
-        .then(() => {
-          console.log(
-            `Connection for user "${cachedUserData.id}" has been closed`,
-          );
         });
     };
   }, [apiKey, cachedUserData, cachedOptions, tokenOrProvider]);

package/src/common/real-time/event-models.ts

@@ -43,7 +43,11 @@ export enum UnhandledErrorType {
   FetchingOwnCapabilitiesOnNewActivity = 'fetching-own-capabilities-on-new-activity',
 }
 
-export type SyncFailure = { feed: string; reason: unknown };
+export type SyncFailure = {
+  feed: string;
+  reason: unknown;
+  activity_id?: string;
+};
 
 export type UnhandledErrorEvent = {
   type: 'errors.unhandled';

package/src/feed/feed.ts

@@ -59,7 +59,12 @@ import type {
   LoadingStates,
   PagerResponseWithLoadingStates,
 } from '../types';
-import { checkHasAnotherPage, Constants, uniqueArrayMerge } from '../utils';
+import {
+  checkHasAnotherPage,
+  Constants,
+  feedsLoggerSystem,
+  uniqueArrayMerge,
+} from '../utils';
 import { handleActivityFeedback } from './event-handlers/activity/handle-activity-feedback';
 import { deepEqual } from '../utils/deep-equal';
 
@@ -595,13 +600,15 @@ export class Feed extends FeedApi {
   }
 
   public async loadNextPageActivityComments(
-    activity: ActivityResponse,
+    activity: ActivityResponse | string,
     request?: Partial<
       Omit<GetCommentsRequest, 'object_id' | 'object_type' | 'next'>
     >,
   ) {
     const currentEntityState =
-      this.currentState.comments_by_entity_id[activity.id];
+      this.currentState.comments_by_entity_id[
+        typeof activity === 'string' ? activity : activity.id
+      ];
     const currentPagination = currentEntityState?.pagination;
     const currentNextCursor = currentPagination?.next;
     const currentSort = currentPagination?.sort;
@@ -617,13 +624,14 @@ export class Feed extends FeedApi {
       return;
     }
 
+    const entityId = typeof activity === 'string' ? activity : activity.id;
     await this.loadNextPageComments({
-      entityId: activity.id,
+      entityId: entityId,
       base: () =>
         this.client.getComments({
           ...request,
           sort,
-          object_id: activity.id,
+          object_id: entityId,
           object_type: 'activity',
           next: currentNextCursor,
         }),
@@ -929,7 +937,9 @@ export class Feed extends FeedApi {
     }
 
     if (typeof eventHandler === 'undefined') {
-      console.warn(`Received unknown event type: ${event.type}`, event);
+      feedsLoggerSystem
+        .getLogger('event-dispatcher')
+        .warn(`Received unknown feed event, type: ${event.type}`, event);
     }
 
     this.eventDispatcher.dispatch(event);

package/src/feeds-client/active-activity.ts

@@ -0,0 +1,42 @@
+import { Feed } from '../feed';
+import type { FeedsClient } from './feeds-client';
+
+export function connectActivityToFeed(
+  this: FeedsClient,
+  {
+    fid,
+  }: {
+    fid: string;
+  },
+) {
+  const [group, id] = fid.split(':');
+  const activeFeed = this.activeFeeds[fid];
+
+  const feed = new Feed(
+    this,
+    group,
+    id,
+    undefined,
+    activeFeed?.currentState.watch,
+  );
+
+  return feed;
+}
+
+export function isAnyFeedWatched(this: FeedsClient, fids: string[]) {
+  for (const fid of fids) {
+    const feed = this.activeFeeds[fid];
+    if (feed && feed.currentState.last_get_or_create_request_config?.watch) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function disconnectActivityFromFeed(this: FeedsClient, id: string) {
+  const activeFeed = this.activeActivities[id];
+  if (activeFeed) {
+    delete this.activeActivities[id];
+  }
+}