@stream-io/feeds-client 0.2.7 → 0.2.8

package/src/feed/event-handlers/activity/handle-activity-reaction-added.test.ts

@@ -9,7 +9,9 @@ import {
   generateOwnUser,
   generateActivityReactionAddedEvent,
   getHumanId,
-} from '../../../test-utils/response-generators';
+} from '../../../test-utils';
+import { shouldUpdateState } from '../../../utils';
+import { EventPayload } from '../../../types-internal';
 
 describe(handleActivityReactionAdded.name, () => {
   let feed: Feed;
@@ -154,4 +156,102 @@ describe(handleActivityReactionAdded.name, () => {
 
     expect(stateAfter).toBe(stateBefore);
   });
+
+  describe(`Activity reaction added ${shouldUpdateState.name} integration`, () => {
+    const activityId = 'reacted-activity';
+    let currentUserPayload: EventPayload<'feeds.activity.reaction.added'>;
+
+    beforeEach(() => {
+      currentUserPayload = generateActivityReactionAddedEvent({
+        reaction: { user: { id: currentUserId }, activity_id: activityId },
+        activity: { id: activityId }
+      });
+
+      feed.state.partialNext({ activities: [currentUserPayload.activity]});
+      feed.state.partialNext({ watch: true });
+    })
+
+    it(`skips update if ${shouldUpdateState.name} returns false`, () => {
+      // 1. HTTP and then WS
+
+      handleActivityReactionAdded.call(feed, currentUserPayload, false);
+
+      let stateBefore = feed.currentState;
+
+      handleActivityReactionAdded.call(feed, currentUserPayload);
+
+      let stateAfter = feed.currentState;
+
+      expect(stateAfter).toBe(stateBefore);
+      // @ts-expect-error Using Feed internals for tests only
+      expect(feed.stateUpdateQueue.size).toEqual(0);
+
+      // 2. WS and the HTTP
+
+      handleActivityReactionAdded.call(feed, currentUserPayload);
+
+      stateBefore = feed.currentState;
+
+      handleActivityReactionAdded.call(feed, currentUserPayload, false);
+
+      stateAfter = feed.currentState;
+
+      expect(stateAfter).toBe(stateBefore);
+      // @ts-expect-error Using Feed internals for tests only
+      expect(feed.stateUpdateQueue.size).toEqual(0);
+    })
+
+    it('allows update again from WS after clearing the stateUpdateQueue', () => {
+      handleActivityReactionAdded.call(feed, currentUserPayload);
+
+      // Clear the queue
+      (feed as any).stateUpdateQueue.clear();
+
+      // Now update should be allowed from another WS event
+      handleActivityReactionAdded.call(feed, currentUserPayload);
+
+      const activities = feed.currentState.activities!;
+      const activity = activities.find((a) => a.id === activityId);
+      const [latestReaction] = activity?.own_reactions ?? [];
+
+      expect(activity?.own_reactions.length).toEqual(2);
+      expect(latestReaction).toMatchObject(currentUserPayload.reaction);
+    });
+
+    it('allows update again from HTTP response after clearing the stateUpdateQueue', () => {
+      handleActivityReactionAdded.call(feed, currentUserPayload, false);
+
+      // Clear the queue
+      (feed as any).stateUpdateQueue.clear();
+
+      // Now update should be allowed from another HTTP response
+      handleActivityReactionAdded.call(feed, currentUserPayload, false);
+
+      const activities = feed.currentState.activities!;
+      const activity = activities.find((a) => a.id === activityId);
+      const [latestReaction] = activity?.own_reactions ?? [];
+
+      expect(activity?.own_reactions.length).toEqual(2);
+      expect(latestReaction).toMatchObject(currentUserPayload.reaction);
+    });
+
+    it('should not insert anything into the stateUpdateQueue if the connected_user did not trigger the reaction', () => {
+      const otherUserPayload = generateActivityReactionAddedEvent({
+        reaction: { user: { id: getHumanId() }, activity_id: activityId },
+        activity: { id: activityId }
+      });
+
+      handleActivityReactionAdded.call(feed, otherUserPayload);
+
+      expect((feed as any).stateUpdateQueue).toEqual(new Set());
+
+      handleActivityReactionAdded.call(feed, otherUserPayload);
+
+      const activities = feed.currentState.activities!;
+      const activity = activities.find((a) => a.id === activityId);
+
+      expect((feed as any).stateUpdateQueue).toEqual(new Set());
+      expect(activity?.own_reactions.length).toEqual(0);
+    });
+  })
 });

package/src/feed/event-handlers/activity/handle-activity-reaction-added.ts

@@ -1,108 +1,134 @@
-import type { Feed } from '../../../feed';
+import type { Feed } from '../../feed';
 import type {
   ActivityPinResponse,
-  ActivityReactionAddedEvent,
   ActivityResponse,
 } from '../../../gen/models';
-import type { EventPayload } from '../../../types-internal';
-import { updateEntityInArray } from '../../../utils';
+import type { EventPayload, PartializeAllBut } from '../../../types-internal';
+import {
+  getStateUpdateQueueId,
+  shouldUpdateState,
+  updateEntityInArray,
+} from '../../../utils';
+
+type AddActivityReactionPayload = PartializeAllBut<EventPayload<'feeds.activity.reaction.added'>, 'activity' | 'reaction'>;
 
 // shared function to update the activity with the new reaction
 const sharedUpdateActivity = ({
+  payload,
   currentActivity,
-  event,
   eventBelongsToCurrentUser,
 }: {
+  payload: AddActivityReactionPayload;
   currentActivity: ActivityResponse;
-  event: ActivityReactionAddedEvent;
   eventBelongsToCurrentUser: boolean;
 }) => {
+  const { activity: newActivity, reaction: newReaction } = payload;
   let newOwnReactions = currentActivity.own_reactions;
 
   if (eventBelongsToCurrentUser) {
-    newOwnReactions = [...currentActivity.own_reactions, event.reaction];
+    newOwnReactions = [...currentActivity.own_reactions, newReaction];
   }
 
   return {
-    ...event.activity,
+    ...currentActivity,
+    latest_reactions: newActivity.latest_reactions,
+    reaction_groups: newActivity.reaction_groups,
+    reaction_count: newActivity.reaction_count,
     own_reactions: newOwnReactions,
-    own_bookmarks: currentActivity.own_bookmarks,
   };
 };
 
 export const addReactionToActivities = (
-  event: ActivityReactionAddedEvent,
+  payload: AddActivityReactionPayload,
   activities: ActivityResponse[] | undefined,
   eventBelongsToCurrentUser: boolean,
 ) =>
   updateEntityInArray({
     entities: activities,
-    matcher: (activity) => activity.id === event.activity.id,
+    matcher: (activity) => activity.id === payload.activity.id,
     updater: (matchedActivity) =>
       sharedUpdateActivity({
+        payload,
         currentActivity: matchedActivity,
-        event,
         eventBelongsToCurrentUser,
       }),
   });
 
 export const addReactionToPinnedActivities = (
-  event: ActivityReactionAddedEvent,
+  payload: AddActivityReactionPayload,
   pinnedActivities: ActivityPinResponse[] | undefined,
   eventBelongsToCurrentUser: boolean,
 ) =>
   updateEntityInArray({
     entities: pinnedActivities,
     matcher: (pinnedActivity) =>
-      pinnedActivity.activity.id === event.activity.id,
+      pinnedActivity.activity.id === payload.activity.id,
     updater: (matchedPinnedActivity) => {
-      const newActivity = sharedUpdateActivity({
+      const updatedActivity = sharedUpdateActivity({
+        payload,
         currentActivity: matchedPinnedActivity.activity,
-        event,
         eventBelongsToCurrentUser,
       });
 
       // this should never happen, but just in case
-      if (newActivity === matchedPinnedActivity.activity) {
+      if (updatedActivity === matchedPinnedActivity.activity) {
         return matchedPinnedActivity;
       }
 
       return {
         ...matchedPinnedActivity,
-        activity: newActivity,
+        activity: updatedActivity,
       };
     },
   });
 
 export function handleActivityReactionAdded(
   this: Feed,
-  event: EventPayload<'feeds.activity.reaction.added'>,
+  payload: AddActivityReactionPayload,
+  fromWs?: boolean,
 ) {
+  const connectedUser = this.client.state.getLatestValue().connected_user;
+
+  const eventBelongsToCurrentUser =
+    typeof connectedUser !== 'undefined' &&
+    payload.reaction.user.id === connectedUser.id;
+
+  if (
+    !shouldUpdateState({
+      stateUpdateQueueId: getStateUpdateQueueId(
+        payload,
+        'activity-reaction-created',
+      ),
+      stateUpdateQueue: this.stateUpdateQueue,
+      watch: this.currentState.watch,
+      fromWs,
+      isTriggeredByConnectedUser: eventBelongsToCurrentUser,
+    })
+  ) {
+    return;
+  }
+
   const {
     activities: currentActivities,
     pinned_activities: currentPinnedActivities,
   } = this.currentState;
-  const connectedUser = this.client.state.getLatestValue().connected_user;
-  const eventBelongsToCurrentUser =
-    typeof connectedUser !== 'undefined' &&
-    event.reaction.user.id === connectedUser.id;
 
   const [result1, result2] = [
-    addReactionToActivities(
-      event,
+    this.hasActivity(payload.activity.id) ? addReactionToActivities(
+      payload,
       currentActivities,
       eventBelongsToCurrentUser,
-    ),
+    ) : undefined,
     addReactionToPinnedActivities(
-      event,
+      payload,
       currentPinnedActivities,
       eventBelongsToCurrentUser,
     ),
   ];
 
-  if (result1.changed || result2.changed) {
+  if (result1?.changed || result2.changed) {
     this.state.partialNext({
-      activities: result1.entities,
+      ...(result1 ? { activities: result1.entities } : {}),
       pinned_activities: result2.entities,
     });
   }

package/src/feed/event-handlers/activity/handle-activity-reaction-deleted.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { Feed } from '../../../feed';
 import { FeedsClient } from '../../../feeds-client';
 import { handleActivityReactionDeleted } from './handle-activity-reaction-deleted';
+import { handleActivityReactionAdded } from './handle-activity-reaction-added';
 import {
   generateActivityPinResponse,
   generateActivityResponse,
@@ -10,7 +11,9 @@ import {
   generateOwnUser,
   getHumanId,
   generateActivityReactionDeletedEvent,
-} from '../../../test-utils/response-generators';
+} from '../../../test-utils';
+import { shouldUpdateState } from '../../../utils';
+import { EventPayload } from '../../../types-internal';
 
 describe(handleActivityReactionDeleted.name, () => {
   let feed: Feed;
@@ -197,4 +200,118 @@ describe(handleActivityReactionDeleted.name, () => {
 
     expect(stateAfter).toBe(stateBefore);
   });
+
+  describe(`Activity reaction deleted ${shouldUpdateState.name} integration`, () => {
+    const activityId = 'reacted-activity';
+    let currentUserPayload: EventPayload<'feeds.activity.reaction.deleted'>;
+    let otherUserPayload: EventPayload<'feeds.activity.reaction.deleted'>;
+
+    beforeEach(() => {
+      currentUserPayload = generateActivityReactionDeletedEvent({
+        reaction: { user: { id: currentUserId }, activity_id: activityId },
+        activity: { id: activityId }
+      });
+
+      otherUserPayload = generateActivityReactionDeletedEvent({
+        reaction: { user: { id: getHumanId() }, activity_id: activityId },
+        activity: { id: activityId }
+      });
+
+      feed.state.partialNext({ activities: [currentUserPayload.activity]});
+      feed.state.partialNext({ watch: true });
+
+      handleActivityReactionAdded.call(feed, currentUserPayload, false);
+      handleActivityReactionAdded.call(feed, otherUserPayload, false);
+
+      (feed as any).stateUpdateQueue.clear();
+    })
+
+    it(`skips update if ${shouldUpdateState.name} returns false`, () => {
+      // 1. HTTP and then WS
+
+      handleActivityReactionDeleted.call(feed, currentUserPayload, false);
+
+      let stateBefore = feed.currentState;
+
+      handleActivityReactionDeleted.call(feed, currentUserPayload);
+
+      let stateAfter = feed.currentState;
+
+      expect(stateAfter).toBe(stateBefore);
+      // @ts-expect-error Using Feed internals for tests only
+      expect(feed.stateUpdateQueue.size).toEqual(0);
+
+      // 2. WS and the HTTP
+
+      handleActivityReactionDeleted.call(feed, currentUserPayload);
+
+      stateBefore = feed.currentState;
+
+      handleActivityReactionDeleted.call(feed, currentUserPayload, false);
+
+      stateAfter = feed.currentState;
+
+      expect(stateAfter).toBe(stateBefore);
+      // @ts-expect-error Using Feed internals for tests only
+      expect(feed.stateUpdateQueue.size).toEqual(0);
+    })
+
+    it('allows update again from WS after clearing the stateUpdateQueue', () => {
+      handleActivityReactionDeleted.call(feed, currentUserPayload);
+
+      let activities = feed.currentState.activities!;
+      let activity = activities.find((a) => a.id === activityId);
+
+      expect(activity?.own_reactions.length).toEqual(0);
+
+      // Clear the queue and reinitialize the state
+      handleActivityReactionAdded.call(feed, currentUserPayload, false);
+      (feed as any).stateUpdateQueue.clear();
+
+      // Now update should be allowed from another WS event
+      handleActivityReactionDeleted.call(feed, currentUserPayload);
+
+      activities = feed.currentState.activities!;
+      activity = activities.find((a) => a.id === activityId);
+
+      expect(activity?.own_reactions.length).toEqual(0);
+    });
+
+    it('allows update again from HTTP response after clearing the stateUpdateQueue', () => {
+      handleActivityReactionDeleted.call(feed, currentUserPayload, false);
+
+      let activities = feed.currentState.activities!;
+      let activity = activities.find((a) => a.id === activityId);
+
+      expect(activity?.own_reactions.length).toEqual(0);
+
+      // Clear the queue and reinitialize the state
+      handleActivityReactionAdded.call(feed, currentUserPayload, false);
+      (feed as any).stateUpdateQueue.clear();
+
+      // Now update should be allowed from another HTTP response
+      handleActivityReactionDeleted.call(feed, currentUserPayload, false);
+
+      activities = feed.currentState.activities!;
+      activity = activities.find((a) => a.id === activityId);
+
+      expect(activity?.own_reactions.length).toEqual(0);
+    });
+
+    it('should not insert anything into the stateUpdateQueue if the connected_user did not trigger the reaction', () => {
+      handleActivityReactionDeleted.call(feed, otherUserPayload);
+
+      expect((feed as any).stateUpdateQueue).toEqual(new Set());
+
+      handleActivityReactionDeleted.call(feed, otherUserPayload);
+
+      const activities = feed.currentState.activities!;
+      const activity = activities.find((a) => a.id === activityId);
+      const [latestOwnReaction] = activity?.own_reactions ?? [];
+
+      expect((feed as any).stateUpdateQueue).toEqual(new Set());
+      expect(activity?.own_reactions.length).toEqual(1);
+      expect(latestOwnReaction).toMatchObject(currentUserPayload.reaction);
+    });
+  })
 });

package/src/feed/event-handlers/activity/handle-activity-reaction-deleted.ts

@@ -1,69 +1,77 @@
-import type { Feed } from '../../../feed';
+import type { Feed } from '../../feed';
+import { ActivityPinResponse, ActivityResponse } from '../../../gen/models';
+import type { EventPayload, PartializeAllBut } from '../../../types-internal';
 import {
-  ActivityPinResponse,
-  ActivityReactionDeletedEvent,
-  ActivityResponse,
-} from '../../../gen/models';
-import type { EventPayload } from '../../../types-internal';
-import { updateEntityInArray } from '../../../utils';
+  getStateUpdateQueueId,
+  shouldUpdateState,
+  updateEntityInArray,
+} from '../../../utils';
+
+type ActivityReactionDeletedPayload = PartializeAllBut<
+  EventPayload<'feeds.activity.reaction.deleted'>,
+  'activity' | 'reaction'
+>;
 
 const sharedUpdateActivity = ({
   currentActivity,
-  event,
+  payload,
   eventBelongsToCurrentUser,
 }: {
   currentActivity: ActivityResponse;
-  event: ActivityReactionDeletedEvent;
+  payload: ActivityReactionDeletedPayload;
   eventBelongsToCurrentUser: boolean;
 }) => {
+  const { activity: newActivity, reaction: newReaction } = payload;
   let newOwnReactions = currentActivity.own_reactions;
 
   if (eventBelongsToCurrentUser) {
     newOwnReactions = currentActivity.own_reactions.filter(
       (reaction) =>
         !(
-          reaction.type === event.reaction.type &&
-          reaction.user.id === event.reaction.user.id
+          reaction.type === newReaction.type &&
+          reaction.user.id === newReaction.user.id
         ),
     );
   }
 
   return {
-    ...event.activity,
+    ...currentActivity,
+    latest_reactions: newActivity.latest_reactions,
+    reaction_groups: newActivity.reaction_groups,
+    reaction_count: newActivity.reaction_count,
     own_reactions: newOwnReactions,
-    own_bookmarks: currentActivity.own_bookmarks,
   };
 };
 
 export const removeReactionFromActivities = (
-  event: ActivityReactionDeletedEvent,
+  payload: ActivityReactionDeletedPayload,
   activities: ActivityResponse[] | undefined,
   eventBelongsToCurrentUser: boolean,
 ) =>
   updateEntityInArray({
     entities: activities,
-    matcher: (activity) => activity.id === event.activity.id,
+    matcher: (activity) => activity.id === payload.activity.id,
     updater: (matchedActivity) =>
       sharedUpdateActivity({
         currentActivity: matchedActivity,
-        event,
+        payload,
         eventBelongsToCurrentUser,
       }),
   });
 
 export const removeReactionFromPinnedActivities = (
-  event: ActivityReactionDeletedEvent,
+  payload: ActivityReactionDeletedPayload,
   activities: ActivityPinResponse[] | undefined,
   eventBelongsToCurrentUser: boolean,
 ) =>
   updateEntityInArray({
     entities: activities,
     matcher: (pinnedActivity) =>
-      pinnedActivity.activity.id === event.activity.id,
+      pinnedActivity.activity.id === payload.activity.id,
     updater: (matchedPinnedActivity) => {
       const newActivity = sharedUpdateActivity({
         currentActivity: matchedPinnedActivity.activity,
-        event,
+        payload,
         eventBelongsToCurrentUser,
       });
 
@@ -80,33 +88,52 @@ export const removeReactionFromPinnedActivities = (
 
 export function handleActivityReactionDeleted(
   this: Feed,
-  event: EventPayload<'feeds.activity.reaction.deleted'>,
+  payload: ActivityReactionDeletedPayload,
+  fromWs?: boolean,
 ) {
+  const connectedUser = this.client.state.getLatestValue().connected_user;
+  const eventBelongsToCurrentUser =
+    typeof connectedUser !== 'undefined' &&
+    payload.reaction.user.id === connectedUser.id;
+
+  if (
+    !shouldUpdateState({
+      stateUpdateQueueId: getStateUpdateQueueId(
+        payload,
+        'activity-reaction-deleted',
+      ),
+      stateUpdateQueue: this.stateUpdateQueue,
+      watch: this.currentState.watch,
+      fromWs,
+      isTriggeredByConnectedUser: eventBelongsToCurrentUser
+    })
+  ) {
+    return;
+  }
+
   const {
     activities: currentActivities,
     pinned_activities: currentPinnedActivities,
   } = this.currentState;
-  const connectedUser = this.client.state.getLatestValue().connected_user;
-  const eventBelongsToCurrentUser =
-    typeof connectedUser !== 'undefined' &&
-    event.reaction.user.id === connectedUser.id;
 
   const [result1, result2] = [
-    removeReactionFromActivities(
-      event,
-      currentActivities,
-      eventBelongsToCurrentUser,
-    ),
+    this.hasActivity(payload.activity.id)
+      ? removeReactionFromActivities(
+          payload,
+          currentActivities,
+          eventBelongsToCurrentUser,
+        )
+      : undefined,
     removeReactionFromPinnedActivities(
-      event,
+      payload,
       currentPinnedActivities,
       eventBelongsToCurrentUser,
     ),
   ];
 
-  if (result1.changed || result2.changed) {
+  if (result1?.changed || result2.changed) {
     this.state.partialNext({
-      activities: result1.entities,
+      ...(result1 ? { activities: result1.entities } : {}),
       pinned_activities: result2.entities,
     });
   }

package/src/feed/event-handlers/activity/handle-activity-removed-from-feed.ts

@@ -8,7 +8,7 @@ export function handleActivityRemovedFromFeed(
 ) {
   const currentActivities = this.currentState.activities;
   if (currentActivities) {
-    const result = removeActivityFromState(event.activity, currentActivities);
+    const result = removeActivityFromState.bind(this)(event.activity, currentActivities);
     if (result.changed) {
       this.state.partialNext({ activities: result.activities });
     }