feat: move fetching reactions to llc

Author: isekovanic

Diff for: package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -4,7 +4,6 @@ import { ReactionResponse, ReactionSort } from 'stream-chat';
 
 import { MessageType } from '../../../components/MessageList/hooks/useMessageList';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import { getReactionsForFilterSort } from '../../../store/apis/getReactionsforFilterSort';
 
 export type UseFetchReactionParams = {
   limit?: number;
@@ -29,65 +28,55 @@ export const useFetchReactions = ({
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 
   const fetchReactions = useCallback(async () => {
-    const loadOfflineReactions = async () => {
-      if (!messageId) {
-        return;
-      }
-      const reactionsFromDB = await getReactionsForFilterSort({
-        currentMessageId: messageId,
-        filters: reactionType ? { type: reactionType } : {},
-        limit,
-        sort,
-      });
-      if (reactionsFromDB) {
-        setReactions(reactionsFromDB);
-        setLoading(false);
-      }
-    };
-
-    const loadOnlineReactions = async () => {
-      if (!messageId) {
-        return;
-      }
+    if (!messageId) {
+      return;
+    }
+    try {
       const response = await client.queryReactions(
         messageId,
         reactionType ? { type: reactionType } : {},
         sort,
         { limit, next },
       );
       if (response) {
+        setReactions((prevReactions) =>
+          next ? [...prevReactions, ...response.reactions] : response.reactions,
+        );
         setNext(response.next);
-        setReactions((prevReactions) => [...prevReactions, ...response.reactions]);
         setLoading(false);
       }
-    };
-
-    try {
-      // TODO: Threads are not supported for the offline use case as we don't store the thread messages currently, and this will change in the future.
-      if (enableOfflineSupport && !message?.parent_id) {
-        await loadOfflineReactions();
-      } else {
-        await loadOnlineReactions();
-      }
     } catch (error) {
       console.log('Error fetching reactions: ', error);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client, messageId, reactionType, sortString, next, enableOfflineSupport]);
+  }, [client, messageId, reactionType, sortString, next, limit, enableOfflineSupport]);
 
   const loadNextPage = useCallback(async () => {
     if (next) {
       await fetchReactions();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchReactions]);
+  }, [fetchReactions, next]);
 
   useEffect(() => {
     setReactions([]);
     setNext(undefined);
     fetchReactions();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messageId, reactionType, sortString]);
+  }, [fetchReactions, messageId, reactionType, sortString]);
+
+  useEffect(() => {
+    const listener = client.on('offline_reactions.queried', (event) => {
+      const { offlineReactions } = event;
+      if (offlineReactions) {
+        setReactions(offlineReactions);
+        setLoading(false);
+        setNext(undefined);
+      }
+    });
+
+    return () => {
+      listener?.unsubscribe();
+    };
+  }, [client]);
 
   return { loading, loadNextPage, reactions };
 };

Diff for: package/src/store/OfflineDB.ts

@@ -47,6 +47,8 @@ export class OfflineDB extends AbstractOfflineDB {
   getAppSettings = ({ userId }: GetAppSettingsType) =>
     api.getAppSettings({ currentUserId: userId });
 
+  getReactions = api.getReactionsForFilterSort;
+
   addPendingTask = api.addPendingTask;
 
   deletePendingTask = api.deletePendingTask;

Diff for: package/src/store/apis/getReactionsforFilterSort.ts

@@ -1,4 +1,4 @@
-import type { ReactionResponse, ReactionSort } from 'stream-chat';
+import type { ReactionFilters, ReactionResponse, ReactionSort } from 'stream-chat';
 
 import { getReactions } from './getReactions';
 import { selectReactionsForMessages } from './queries/selectReactionsForMessages';
@@ -13,13 +13,13 @@ import { SqliteClient } from '../SqliteClient';
  * @param limit The limit of how many reactions should be returned.
  */
 export const getReactionsForFilterSort = async ({
-  currentMessageId,
+  messageId,
   filters,
   sort,
   limit,
 }: {
-  currentMessageId: string;
-  filters?: { type?: string };
+  messageId: string;
+  filters?: Pick<ReactionFilters, 'type'>;
   sort?: ReactionSort;
   limit?: number;
 }): Promise<ReactionResponse[] | null> => {
@@ -30,7 +30,7 @@ export const getReactionsForFilterSort = async ({
 
   SqliteClient.logger?.('info', 'getReactionsForFilterSort', { filters, sort });
 
-  const reactions = await selectReactionsForMessages([currentMessageId], limit, filters, sort);
+  const reactions = await selectReactionsForMessages([messageId], limit, filters, sort);
 
   if (!reactions) {
     return null;
@@ -40,8 +40,5 @@ export const getReactionsForFilterSort = async ({
     return [];
   }
 
-  // const filteredReactions = reactions.filter((reaction) => reaction.type === filters?.type);
-  // console.log('FILTERED', filteredReactions);
-
   return getReactions({ reactions });
 };

Diff for: package/src/store/apis/index.ts

@@ -8,6 +8,7 @@ export * from './getAppSettings';
 export * from './getChannelMessages';
 export * from './getChannels';
 export * from './getChannelsForFilterSort';
+export * from './getReactionsforFilterSort';
 export * from './getLastSyncedAt';
 export * from './getMembers';
 export * from './getReads';

Diff for: package/src/store/apis/queries/selectReactionsForMessages.ts

@@ -1,4 +1,4 @@
-import type { ReactionSort } from 'stream-chat';
+import type { ReactionFilters, ReactionSort } from 'stream-chat';
 
 import { tables } from '../../schema';
 import { SqliteClient } from '../../SqliteClient';
@@ -14,7 +14,7 @@ import type { TableRowJoinedUser } from '../../types';
 export const selectReactionsForMessages = async (
   messageIds: string[],
   limit: number = 25,
-  filters?: { type?: string },
+  filters?: Pick<ReactionFilters, 'type'>,
   sort?: ReactionSort,
 ): Promise<TableRowJoinedUser<'reactions'>[]> => {
   const questionMarks = Array(messageIds.length).fill('?').join(',');
@@ -24,12 +24,14 @@ export const selectReactionsForMessages = async (
   const userColumnNames = Object.keys(tables.users.columns)
     .map((name) => `'${name}', b.${name}`)
     .join(', ');
-  const filterValue = filters?.type ? [filters.type] : [];
+  const filterValue = filters?.type
+    ? [typeof filters.type === 'string' ? filters.type : filters.type.$eq]
+    : [];
   const createdAtSort = Array.isArray(sort)
     ? sort.find((s) => !!s.created_at)?.created_at
     : sort?.created_at;
   const orderByClause = createdAtSort
-    ? `ORDER BY cast(strftime('%s', a.createdAt) AS INTEGER) ${createdAtSort === 1 ? 'DESC' : 'ASC'}`
+    ? `ORDER BY cast(strftime('%s', a.createdAt) AS INTEGER) ${createdAtSort === 1 ? 'ASC' : 'DESC'}`
     : '';
 
   SqliteClient.logger?.('info', 'selectReactionsForMessages', {