fix: handle only draft events in channel preview and thread list item

Author: khushal87

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -23,16 +23,32 @@ export const useChannelPreviewData = (
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
-  useEffect(() => {
-    const unsubscribe = channel.messageComposer.registerSubscriptions();
-    return () => {
-      unsubscribe();
-    };
-  }, [channel.messageComposer]);
-
   const channelLastMessage = channel.lastMessage();
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
 
+  useEffect(() => {
+    const { unsubscribe } = client.on('draft.updated', (event) => {
+      const { cid, draft } = event;
+      if (!draft || cid !== channel.cid) {
+        return;
+      }
+      channel.messageComposer.initState({ composition: draft });
+    });
+    return unsubscribe;
+  }, [channel, client]);
+
+  useEffect(() => {
+    const { unsubscribe } = client.on('draft.deleted', (event) => {
+      const { cid, draft } = event;
+      if (!draft || cid !== channel.cid) {
+        return;
+      }
+
+      channel.messageComposer.clear();
+    });
+    return unsubscribe;
+  }, [channel, client]);
+
   useEffect(() => {
     const { unsubscribe } = client.on('notification.mark_read', () => {
       setUnread(channel.countUnread());

package/src/components/ThreadList/ThreadListItem.tsx

@@ -279,11 +279,30 @@ export const ThreadListItemComponent = () => {
   );
 
   useEffect(() => {
-    const unsubscribe = thread.messageComposer.registerSubscriptions();
-    return () => {
-      unsubscribe();
-    };
-  }, [thread.messageComposer]);
+    const { unsubscribe } = client.on('draft.updated', (event) => {
+      const { cid, draft } = event;
+      if (!draft) return;
+      if (cid !== channel.cid || draft.parent_id !== thread.id) {
+        return;
+      }
+
+      thread.messageComposer.initState({ composition: draft });
+    });
+    return unsubscribe;
+  }, [channel.cid, client, thread.id, thread.messageComposer]);
+
+  useEffect(() => {
+    const { unsubscribe } = client.on('draft.deleted', (event) => {
+      const { cid, draft } = event;
+      if (!draft) return;
+      if (cid !== channel.cid || draft.parent_id !== thread.id) {
+        return;
+      }
+
+      thread.messageComposer.clear();
+    });
+    return unsubscribe;
+  }, [channel.cid, client, thread.id, thread.messageComposer]);
 
   const draftMessage: DraftMessage | undefined = useMemo(
     () =>