@messenger-box/platform-mobile 0.0.1-alpha.411 → 0.0.1-alpha.421

package/src/screens/inbox/containers/ThreadsView.tsx

@@ -5,7 +5,11 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
 import { orderBy, uniqBy, startCase } from 'lodash';
 import { ThreadViewItem } from '../components/ThreadsViewItem';
-import { useThreadMessagesQuery, useOnThreadCreatedUpdatedSubscription } from '@messenger-box/platform-client';
+import {
+    useThreadMessagesQuery,
+    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
+    useOnThreadCreatedUpdatedSubscription,
+} from '@messenger-box/platform-client';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 import { config } from '../config';
@@ -18,6 +22,11 @@ export interface ThreadsViewProps {
     refetchChannelDetail: (id: any) => Promise<any>;
 }
 
+interface IThreadSubscriptionHandlerProps {
+    subscribeToNewMessages: () => any;
+    channelId: string | undefined;
+}
+
 const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelDetail }: ThreadsViewProps) => {
     const { params } = useRoute<any>();
     const auth = useSelector(userSelector);
@@ -32,11 +41,13 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
         loading: threadLoading,
         error,
         refetch,
+        subscribeToMore,
     } = useThreadMessagesQuery({
         variables: {
             channelId: channelId?.toString(),
             role: role?.toString(),
             limit: MESSAGES_PER_PAGE,
+            repliesLimit2: 5,
         },
         fetchPolicy: 'cache-and-network',
     });
@@ -53,16 +64,17 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
                 channelId: channelId?.toString(),
                 role: role?.toString(),
                 limit: MESSAGES_PER_PAGE,
-            }).then(({ data }) => {
-                if (!data?.threadMessages?.data) {
-                    return;
-                }
-
-                if (data?.threadMessages?.data?.length) {
-                    const { data: newThreads } = data?.threadMessages;
-                    setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-                }
             });
+            // .then(({ data }) => {
+            //     if (!data?.threadMessages?.data) {
+            //         return;
+            //     }
+
+            //     if (data?.threadMessages?.data?.length) {
+            //         const { data: newThreads } = data?.threadMessages;
+            //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+            //     }
+            // });
 
             return () => {
                 // Do something when the screen is unfocused
@@ -71,12 +83,12 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
         }, [channelId]),
     );
 
-    React.useEffect(() => {
-        if (data?.threadMessages?.data?.length) {
-            const { data: newThreads } = data?.threadMessages;
-            setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-        }
-    }, [data]);
+    // React.useEffect(() => {
+    //     if (data?.threadMessages?.data?.length) {
+    //         const { data: newThreads } = data?.threadMessages;
+    //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+    //     }
+    // }, [data]);
 
     // React.useEffect(() => {
     //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
@@ -102,11 +114,18 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
         // setThreadsData((oldThreads: any) => uniqBy([...oldThreads, newThreads], ({ id }) => id));
     }, []);
 
+    // const threads = React.useMemo(() => {
+    //     if (!threadData?.length) return null;
+    //     return orderBy(threadData, ['updatedAt'], ['desc']) || [];
+    //     //return threadData || [];
+    // }, [threadData]);
+
     const threads = React.useMemo(() => {
-        if (!threadData?.length) return null;
-        return orderBy(threadData, ['updatedAt'], ['desc']) || [];
-        //return threadData || [];
-    }, [threadData]);
+        if (!data?.threadMessages?.data?.length) return null;
+        const { data: newThreads } = data?.threadMessages;
+        const threadsFiltered = newThreads ? uniqBy([...newThreads], ({ id }: any) => id) : [];
+        return orderBy(threadsFiltered, ['updatedAt'], ['desc']) || [];
+    }, [data]);
 
     const threadReplies = React.useMemo(() => {
         if (!threads?.length) return null;
@@ -114,11 +133,6 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
         //return threadData || [];
     }, [threads]);
 
-    // const threads = React.useMemo(() => {
-    //     if (!data?.threadMessages?.data?.length) return null;
-    //     return data?.threadMessages?.data || [];
-    // }, [data]);
-
     const handleSelectThread = useCallback((id: any, title: any, postParentId: any) => {
         navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
             channelId: id,
@@ -149,16 +163,17 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
             channelId: channelId?.toString(),
             role: role?.toString(),
             limit: MESSAGES_PER_PAGE,
-        }).then(({ data }) => {
-            if (!data?.threadMessages?.data) {
-                return;
-            }
-
-            if (data?.threadMessages?.data?.length) {
-                const { data: newThreads } = data?.threadMessages;
-                setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-            }
         });
+        // .then(({ data }) => {
+        //     if (!data?.threadMessages?.data) {
+        //         return;
+        //     }
+
+        //     if (data?.threadMessages?.data?.length) {
+        //         const { data: newThreads } = data?.threadMessages;
+        //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
+        //     }
+        // });
     }, []);
 
     const fetchMoreThreads = useCallback(() => {
@@ -222,6 +237,48 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
                         </Box>
                     </>
                 )}
+                ListFooterComponent={() => (
+                    <>
+                        <SubscriptionHandler
+                            channelId={channelId}
+                            subscribeToNewMessages={() =>
+                                subscribeToMore({
+                                    document: THREAD_CHAT_ADDED,
+                                    variables: {
+                                        channelId: channelId?.toString(),
+                                        postParentId: null,
+                                    },
+                                    updateQuery: (prev, { subscriptionData }: any) => {
+                                        if (!subscriptionData.data) return prev;
+                                        const newPostThreadData: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.data;
+                                        const newMessage: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+                                        const data = prev?.threadMessages?.data?.map((t: any) =>
+                                            t.id === newPostThreadData?.id
+                                                ? {
+                                                      ...t,
+                                                      replies: [newMessage, ...t?.replies],
+                                                      replyCount: newPostThreadData?.replyCount,
+                                                      lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                      updatedAt: newPostThreadData?.updatedAt,
+                                                  }
+                                                : t,
+                                        );
+
+                                        return Object.assign({}, prev, {
+                                            threadMessages: {
+                                                ...prev?.threadMessages,
+                                                // totalCount: prev?.threadMessages?.totalCount + 1,
+                                                data: data,
+                                            },
+                                        });
+                                    },
+                                })
+                            }
+                        />
+                    </>
+                )}
                 keyExtractor={(item, index) => 'threads-view-key' + index}
                 onEndReached={fetchMoreThreads}
                 onEndReachedThreshold={0.1}
@@ -230,4 +287,9 @@ const ThreadsViewComponent = ({ channelId, role, channelsDetail, refetchChannelD
     );
 };
 
+const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {
+    useEffect(() => subscribeToNewMessages(), [channelId]);
+    return <></>;
+};
+
 export const ThreadsView = React.memo(ThreadsViewComponent);