feat: implement selective fetching from offline db

Author: isekovanic

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -80,6 +80,12 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     setSelectedReaction(reactionType);
   };
 
+  useEffect(() => {
+    if (selectedReaction && reactionTypes.length > 0 && !reactionTypes.includes(selectedReaction)) {
+      setSelectedReaction(reactionTypes[0]);
+    }
+  }, [reactionTypes, selectedReaction]);
+
   const messageReactions = useMemo(
     () =>
       reactionTypes.reduce<ReactionData[]>((acc, reaction) => {
@@ -120,6 +126,8 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   } = useTheme();
   const { t } = useTranslationContext();
 
+  console.log('TESTTEST: ', fetchedReactions);
+
   const reactions = useMemo(
     () =>
       propReactions ||

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -36,6 +36,7 @@ export const useFetchReactions = ({
       const reactionsFromDB = await getReactionsForFilterSort({
         currentMessageId: messageId,
         filters: reactionType ? { type: reactionType } : {},
+        limit,
         sort,
       });
       if (reactionsFromDB) {

package/src/store/apis/getReactionsforFilterSort.ts

@@ -1,4 +1,4 @@
-import type { ReactionFilters, ReactionResponse, ReactionSort } from 'stream-chat';
+import type { ReactionResponse, ReactionSort } from 'stream-chat';
 
 import { getReactions } from './getReactions';
 import { selectReactionsForMessages } from './queries/selectReactionsForMessages';
@@ -10,15 +10,18 @@ import { SqliteClient } from '../SqliteClient';
  * @param currentMessageId The message ID for which reactions are to be fetched.
  * @param filters The filters to be applied while fetching reactions.
  * @param sort The sort to be applied while fetching reactions.
+ * @param limit The limit of how many reactions should be returned.
  */
 export const getReactionsForFilterSort = async ({
   currentMessageId,
   filters,
   sort,
+  limit,
 }: {
   currentMessageId: string;
-  filters?: ReactionFilters;
+  filters?: { type?: string };
   sort?: ReactionSort;
+  limit?: number;
 }): Promise<ReactionResponse[] | null> => {
   if (!filters && !sort) {
     console.warn('Please provide the query (filters/sort) to fetch channels from DB');
@@ -27,7 +30,7 @@ export const getReactionsForFilterSort = async ({
 
   SqliteClient.logger?.('info', 'getReactionsForFilterSort', { filters, sort });
 
-  const reactions = await selectReactionsForMessages([currentMessageId]);
+  const reactions = await selectReactionsForMessages([currentMessageId], limit, filters, sort);
 
   if (!reactions) {
     return null;
@@ -37,7 +40,8 @@ export const getReactionsForFilterSort = async ({
     return [];
   }
 
-  const filteredReactions = reactions.filter((reaction) => reaction.type === filters?.type);
+  // const filteredReactions = reactions.filter((reaction) => reaction.type === filters?.type);
+  // console.log('FILTERED', filteredReactions);
 
-  return getReactions({ reactions: filteredReactions });
+  return getReactions({ reactions });
 };

package/src/store/apis/queries/selectReactionsForMessages.ts

@@ -1,13 +1,21 @@
+import type { ReactionSort } from 'stream-chat';
+
 import { tables } from '../../schema';
 import { SqliteClient } from '../../SqliteClient';
 import type { TableRowJoinedUser } from '../../types';
 
 /**
  * Fetches reactions for a message from the database for messageIds.
  * @param messageIds The message IDs for which reactions are to be fetched.
+ * @param limit The limit of how many reactions should be returned.
+ * @param filters A ReactionFilter for the reactions we want to fetch. Only type is currently supported.
+ * @param sort A sort for reactions to be used when querying. Custom data is currently not supported for sorting.
  */
 export const selectReactionsForMessages = async (
   messageIds: string[],
+  limit: number = 25,
+  filters?: { type?: string },
+  sort?: ReactionSort,
 ): Promise<TableRowJoinedUser<'reactions'>[]> => {
   const questionMarks = Array(messageIds.length).fill('?').join(',');
   const reactionsColumnNames = Object.keys(tables.reactions.columns)
@@ -16,6 +24,13 @@ export const selectReactionsForMessages = async (
   const userColumnNames = Object.keys(tables.users.columns)
     .map((name) => `'${name}', b.${name}`)
     .join(', ');
+  const filterValue = filters?.type ? [filters.type] : [];
+  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'}`
+    : '';
 
   SqliteClient.logger?.('info', 'selectReactionsForMessages', {
     messageIds,
@@ -33,8 +48,10 @@ export const selectReactionsForMessages = async (
     LEFT JOIN
       users b
     ON b.id = a.userId
-    WHERE a.messageId in (${questionMarks})`,
-    messageIds,
+    WHERE a.messageId in (${questionMarks}) ${filters?.type ? `AND a.type = ?` : ''}
+    ${orderByClause}
+    LIMIT ?`,
+    [...messageIds, ...filterValue, limit],
   );
 
   return result.map((r) => JSON.parse(r.value));