fix: improve draft manager

Author: khushal87

examples/SampleApp/src/components/DraftsList.tsx

@@ -1,4 +1,4 @@
-import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { DraftsIcon } from '../icons/DraftIcon';
 import {
   FileTypes,
@@ -10,10 +10,10 @@ import {
   useTranslationContext,
 } from 'stream-chat-react-native';
 import { DraftManagerState, DraftsManager } from '../utils/DraftsManager';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import dayjs from 'dayjs';
-import { useNavigation } from '@react-navigation/native';
-import { ChannelResponse, DraftMessage, MessageResponseBase } from 'stream-chat';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { ChannelResponse, DraftMessage, DraftResponse, MessageResponseBase } from 'stream-chat';
 
 export type DraftItemProps = {
   type?: 'channel' | 'thread';
@@ -145,45 +145,66 @@ const selector = (nextValue: DraftManagerState) =>
     drafts: nextValue.drafts,
   }) as const;
 
+const renderItem = ({ item }: { item: DraftResponse }) => (
+  <DraftItem
+    channel={item.channel}
+    type={item.parent_id ? 'thread' : 'channel'}
+    date={item.created_at}
+    message={item.message}
+    thread={item.parent_message}
+    parentId={item.parent_id}
+  />
+);
+
+const renderEmptyComponent = () => (
+  <Text style={{ textAlign: 'center', padding: 20 }}>No drafts available</Text>
+);
+
 export const DraftsList = () => {
+  const isFocused = useIsFocused();
   const { client } = useChatContext();
   const draftsManager = useMemo(() => new DraftsManager({ client }), [client]);
 
   useEffect(() => {
-    draftsManager.reload({ force: true });
+    if (isFocused) {
+      draftsManager.activate();
+    } else {
+      draftsManager.deactivate();
+    }
+  }, [draftsManager, isFocused]);
+
+  useEffect(() => {
+    draftsManager.registerSubscriptions();
+
+    return () => {
+      draftsManager.deactivate();
+      draftsManager.unregisterSubscriptions();
+    };
   }, [draftsManager]);
 
   const { isLoading, drafts, isLoadingNext } = useStateStore(draftsManager.state, selector);
 
+  const onRefresh = useCallback(() => {
+    draftsManager.reload({ force: true });
+  }, [draftsManager]);
+
+  const onEndReached = useCallback(() => {
+    if (!isLoadingNext) {
+      draftsManager.loadNextPage();
+    }
+  }, [draftsManager, isLoadingNext]);
+
   return (
-    <View>
-      <FlatList
-        data={drafts}
-        refreshing={isLoading}
-        keyExtractor={(item) => item.message.id}
-        renderItem={({ item }) => (
-          <DraftItem
-            channel={item.channel}
-            type={item.parent_id ? 'thread' : 'channel'}
-            date={item.created_at}
-            message={item.message}
-            thread={item.parent_message}
-            parentId={item.parent_id}
-          />
-        )}
-        onRefresh={() => draftsManager.reload({ force: true })}
-        ListEmptyComponent={
-          !isLoading && drafts.length === 0 ? (
-            <Text style={{ textAlign: 'center', padding: 20 }}>No drafts available</Text>
-          ) : null
-        }
-        onEndReached={() => {
-          if (!isLoadingNext) {
-            draftsManager.loadNextPage();
-          }
-        }}
-      />
-    </View>
+    <FlatList
+      contentContainerStyle={{ flexGrow: 1 }}
+      data={drafts}
+      refreshing={isLoading}
+      keyExtractor={(item) => item.message.id}
+      renderItem={renderItem}
+      onRefresh={onRefresh}
+      ListEmptyComponent={renderEmptyComponent}
+      onEndReached={onEndReached}
+    />
   );
 };
 

examples/SampleApp/src/utils/DraftsManager.ts

@@ -1,4 +1,5 @@
 import { DraftFilters, DraftResponse, DraftSort, Pager, StateStore, StreamChat } from 'stream-chat';
+import { WithSubscriptions } from './WithSubscription';
 
 export type QueryDraftOptions = Pager & {
   filter?: DraftFilters;
@@ -34,7 +35,7 @@ export type DraftManagerPagination = {
   nextCursor: string | null;
 };
 
-export class DraftsManager {
+export class DraftsManager extends WithSubscriptions {
   public readonly state: StateStore<DraftManagerState>;
   private client: StreamChat;
   private draftsByIdGetterCache: {
@@ -43,6 +44,7 @@ export class DraftsManager {
   };
 
   constructor({ client }: { client: StreamChat }) {
+    super();
     this.client = client;
     this.state = new StateStore<DraftManagerState>(DRAFT_MANAGER_INITIAL_STATE);
     this.draftsByIdGetterCache = { drafts: [], draftsById: {} };
@@ -78,6 +80,99 @@ export class DraftsManager {
     this.state.partialNext({ active: false });
   };
 
+  private subscribeDraftUpdated = () =>
+    this.client.on('draft.updated', (event) => {
+      if (!event.draft) {
+        return;
+      }
+
+      const draftData = event.draft;
+
+      const { drafts } = this.state.getLatestValue();
+
+      const newDrafts = [...drafts];
+
+      let existingDraftIndex = -1;
+
+      if (draftData.parent_id) {
+        existingDraftIndex = drafts.findIndex(
+          (draft) =>
+            draft.parent_id === draftData.parent_id &&
+            draft.channel?.cid === draftData.channel?.cid,
+        );
+      } else {
+        existingDraftIndex = drafts.findIndex(
+          (draft) => draft.channel?.cid === draftData.channel?.cid,
+        );
+      }
+
+      if (existingDraftIndex !== -1) {
+        newDrafts[existingDraftIndex] = draftData;
+      } else {
+        newDrafts.push(draftData);
+      }
+
+      this.state.partialNext({ drafts: newDrafts });
+    }).unsubscribe;
+
+  private subscribeDraftDeleted = () =>
+    this.client.on('draft.deleted', (event) => {
+      if (!event.draft) {
+        return;
+      }
+
+      const { drafts } = this.state.getLatestValue();
+
+      const newDrafts = [...drafts];
+
+      const draftData = event.draft;
+
+      let existingDraftIndex = -1;
+
+      if (draftData.parent_id) {
+        existingDraftIndex = drafts.findIndex(
+          (draft) =>
+            draft.parent_id === draftData.parent_id &&
+            draft.channel?.cid === draftData.channel?.cid,
+        );
+      } else {
+        existingDraftIndex = drafts.findIndex(
+          (draft) => draft.channel?.cid === draftData.channel?.cid,
+        );
+      }
+
+      if (existingDraftIndex !== -1) {
+        newDrafts.splice(existingDraftIndex, 1);
+      }
+
+      this.state.partialNext({
+        drafts: newDrafts,
+      });
+    }).unsubscribe;
+
+  private subscribeReloadOnActivation = () =>
+    this.state.subscribeWithSelector(
+      (nextValue) => ({ active: nextValue.active }),
+      ({ active }) => {
+        if (active) {
+          this.reload();
+        }
+      },
+    );
+
+  public registerSubscriptions = () => {
+    if (this.hasSubscriptions) {
+      return;
+    }
+    this.addUnsubscribeFunction(this.subscribeReloadOnActivation());
+    this.addUnsubscribeFunction(this.subscribeDraftUpdated());
+    this.addUnsubscribeFunction(this.subscribeDraftDeleted());
+  };
+
+  public unregisterSubscriptions = () => {
+    return super.unregisterSubscriptions();
+  };
+
   public reload = async ({ force = false } = {}) => {
     const { drafts, isDraftsOrderStale, pagination, ready } = this.state.getLatestValue();
     if (pagination.isLoading) {