@messenger-box/platform-mobile 0.0.1-alpha.391 → 0.0.1-alpha.393

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import {
     Box,
     Button,
@@ -35,6 +35,8 @@ import {
     IPreDefinedRole,
     useSendExpoNotificationOnPostMutation,
     IPost,
+    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+    usePostThreadMessagesQuery,
 } from '@messenger-box/platform-client';
 import { IExpoNotificationData, IFileInfo } from '@messenger-box/core';
 import { config } from '../config';
@@ -73,6 +75,11 @@ export interface AlertMessageAttachmentsInterface {
     };
 }
 
+interface IThreadSubscriptionHandlerProps {
+    subscribeToNewMessages: () => any;
+    channelId: string;
+}
+
 const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any) => {
     const { params } = useRoute<any>();
     const [channelToTop, setChannelToTop] = useState(0);
@@ -96,9 +103,12 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     const [parentId, setParentId] = useState<any>(postParentId);
     const { startUpload } = useUploadFilesNative();
     const [threadPost, setThreadPost] = useState<any[]>([]);
-    const { data: mongooseObjectId,refetch:refetchNewPostId } = useGetNewMongooseObjectIdQuery({
+    const [skip, setSkip] = useState(0);
+    const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+    const threadMessageListRef = useRef<any>(null);
+    const { data: mongooseObjectId, refetch: refetchNewPostId } = useGetNewMongooseObjectIdQuery({
         fetchPolicy: 'network-only',
-       // pollInterval: 5000,
+        // pollInterval: 5000,
     });
 
     const {
@@ -129,26 +139,20 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         data,
         loading: messageLoading,
         refetch,
-    }: any = useMessagesQuery({
+        fetchMore: fetchMoreMessages,
+        subscribeToMore,
+    }: any = usePostThreadMessagesQuery({
         variables: {
             channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
             parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
             limit: MESSAGES_PER_PAGE,
+            skip: skip,
         },
         skip: !channelId,
         fetchPolicy: 'cache-and-network',
+        refetchWritePolicy: 'merge',
     });
 
-    // const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
-    //     variables: {
-    //         channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
-    //         parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-    //     },
-    //     skip: !channelId,
-    //     fetchPolicy: 'network-only',
-    //     pollInterval: 5000,
-    // });
-
     useFocusEffect(
         React.useCallback(() => {
             navigation?.setOptions({ title: params?.title ?? 'Thread' });
@@ -163,19 +167,22 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
                 parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
                 limit: MESSAGES_PER_PAGE,
+                skip: 0,
             }).then(({ data }) => {
                 if (!data?.messages) {
                     return;
                 }
                 const { data: messages, totalCount }: any = data.messages;
                 setTotalCount(totalCount);
-                setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
+                setChannelMessages(messages);
+                //setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
             });
             return () => {
                 setTotalCount(0);
                 setChannelMessages([]);
+                setThreadPost([]);
             };
-        }, []),
+        }, [channelId, parentId]),
     );
 
     useEffect(() => {
@@ -195,25 +202,41 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     }, [parentId]);
 
     useEffect(() => {
-        if (threadMessagesData?.threadMessages) {
-            const { data: threads, totalCount: threadTotalCount }: any = threadMessagesData?.threadMessages;
-            const threadMessage = threads?.map((t: any) => t?.post);
+        //if (threadMessagesData?.threadMessages?.data) {
+        // console.log('threadMessagesData?.threadMessages', JSON.stringify(threadMessagesData?.threadMessages));
+        const threads: any = threadMessagesData?.threadMessages;
+        if (threadPost?.length == 0 && threads?.data?.length > 0) {
+            const threadMessage = threads?.data?.map((t: any) => t?.post);
             setThreadPost(threadMessage);
-            // if (!isPostParentIdThread) {
-            //     // setTotalCount((pc: any) => pc + threadTotalCount);
-            //     setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
-            // }
+            setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
         }
-    }, [threadMessagesData, isPostParentIdThread]);
+        // if (!isPostParentIdThread) {
+        //     // setTotalCount((pc: any) => pc + threadTotalCount);
+        //     setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
+        // }
+        // }
+    }, [threadMessagesData, threadPost, isPostParentIdThread]);
+
+    // React.useEffect(() => {
+    //     if (newThreadMsg) {
+    //         console.log('newThreadMsg');
+    //         const msg = newThreadMsg?.threadChatMessageAdded;
+    //         setTotalCount((preCount: any) => preCount + 1);
+    //         setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
+    //     }
+    // }, [newThreadMsg]);
 
-    React.useEffect(() => {
-        if (newThreadMsg) {
-            console.log('newThreadMsg');
-            const msg = newThreadMsg?.threadChatMessageAdded;
-            setTotalCount((preCount: any) => preCount + 1);
-            setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
-        }
-    }, [newThreadMsg]);
+    // React.useEffect(() => {
+    //     if (newThreadMsg) {
+    //         console.log('newThreadMsg');
+    //         refetch({
+    //             channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+    //             parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+    //             limit: MESSAGES_PER_PAGE,
+    //             skip: 0,
+    //         });
+    //     }
+    // }, [newThreadMsg, skip, parentId]);
 
     // useEffect(() => {
     //     if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
@@ -226,21 +249,49 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     //     }
     // }, [data, loadingOldMessages, channelMessages, totalCount]);
 
-    useEffect(() => {
-        if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
+    // useEffect(() => {
+    //     if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //         if (messages && messages.length > 0) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //             setTotalCount(messeageTotalCount);
+    //         }
+    //         setLoadEarlierMsg(false);
+    //         if (loadingOldMessages) setLoadingOldMessages(false);
+    //     }
+    //     if (threadPost?.length && data?.messages?.totalCount == channelMessages.length) {
+    //         // setTotalCount((pc: any) => pc + threadTotalCount);
+    //         setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
+    //     }
+    // }, [data, loadingOldMessages, channelMessages, threadPost]);
+
+    React.useEffect(() => {
+        if (data?.messages?.data) {
             const { data: messages, totalCount: messeageTotalCount } = data.messages;
-            if (messages && messages.length > 0) {
+            if (
+                (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
+                (messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))
+            ) {
                 setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
                 setTotalCount(messeageTotalCount);
+                setLoadEarlierMsg(false);
             }
-            setLoadEarlierMsg(false);
-            if (loadingOldMessages) setLoadingOldMessages(false);
-        }
-        if (threadPost?.length && data?.messages?.totalCount == channelMessages.length) {
-            // setTotalCount((pc: any) => pc + threadTotalCount);
-            setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
+
+            if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
+
+            // if (
+            //     channelMessages &&
+            //     channelMessages?.length == MESSAGES_PER_PAGE &&
+            //     totalCount > channelMessages?.length
+            // ) {
+            //     onFetchOld();
+            // }
         }
-    }, [data, loadingOldMessages, channelMessages, threadPost]);
+
+        // if (threadPost?.length > 0 && channelMessages.length == (0 || MESSAGES_PER_PAGE)) {
+        //     setChannelMessages((oldMessages: any) => uniqBy([...threadPost, ...oldMessages], ({ id }) => id));
+        // }
+    }, [data, loadingOldMessages, totalCount, channelMessages, isScrollToBottom]);
 
     // useEffect(() => {
     //     if (
@@ -280,16 +331,40 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     //     }
     // }, [data, channelMessages]);
 
-    const onFetchOld = useCallback((data: any, channelMessages: any) => {
-        if (data?.messages?.totalCount > channelMessages.length) {
+    const scrollToBottom = React.useCallback(() => {
+        if (threadMessageListRef?.current) {
+            setIsScrollToBottom(false);
+            threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
+        }
+    }, [threadMessageListRef]);
+
+    // const onFetchOld = useCallback((data: any, channelMessages: any) => {
+    //     if (data?.messages?.totalCount > channelMessages.length) {
+    //         setLoadEarlierMsg(true);
+    //         refetch({
+    //             channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
+    //             parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+    //             skip: channelMessages.length,
+    //         })?.then((res: any) => setLoadingOldMessages(true));
+    //     }
+    // }, []);
+
+    const onFetchOld = useCallback(() => {
+        if (totalCount > channelMessages.length && !loadingOldMessages) {
+            setSkip(channelMessages.length);
             setLoadEarlierMsg(true);
-            refetch({
-                channelId: !parentId || parentId == 0 ? null : channelId?.toString(),
-                parentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                skip: channelMessages.length,
+            fetchMoreMessages({
+                variables: {
+                    channelId: channelId?.toString(),
+                    parentId: null,
+                    skip: channelMessages.length,
+                },
             })?.then((res: any) => setLoadingOldMessages(true));
+            // refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
+            //     (res: any) => setLoadingOldMessages(true),
+            // );
         }
-    }, []);
+    }, [totalCount, channelMessages]);
 
     // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
     //     return contentOffset.y <= 100; // 100px from top
@@ -366,7 +441,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
             if (images && images.length > 0) {
                 const newPostId = await refetchNewPostId();
                 const postId: any = newPostId?.data?.getNewMongooseObjectId?.toString();
-               // const postId: any = mongooseObjectId?.getNewMongooseObjectId;
+                // const postId: any = mongooseObjectId?.getNewMongooseObjectId;
                 setLoading(true);
                 const uploadResponse = await startUpload({
                     file: images,
@@ -408,18 +483,18 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                             const responseMessage = data?.sendThreadMessage?.lastMessage;
                             if (!parentId || parentId == 0) {
                                 setParentId(responseMessage?.id);
-                                setChannelMessages((messages: any) => [
-                                    ...messages,
-                                    {
-                                        ...responseMessage,
-                                        files: {
-                                            totalCount: uploadedFiles.length,
-                                            data: uploadedFiles,
-                                        },
-                                    },
-                                ]);
-
-                                setTotalCount((t: any) => t + 1);
+                                // setChannelMessages((messages: any) => [
+                                //     ...messages,
+                                //     {
+                                //         ...responseMessage,
+                                //         files: {
+                                //             totalCount: uploadedFiles.length,
+                                //             data: uploadedFiles,
+                                //         },
+                                //     },
+                                // ]);
+
+                                // setTotalCount((t: any) => t + 1);
                             }
 
                             setChannelToTop(channelToTop + 1);
@@ -458,8 +533,8 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         const responseMessage = data?.sendThreadMessage?.lastMessage;
                         if (!parentId || parentId == 0) {
                             setParentId(responseMessage?.id);
-                            setChannelMessages((messages: any) => [...messages, responseMessage]);
-                            setTotalCount((t: any) => t + 1);
+                            // setChannelMessages((messages: any) => [...messages, responseMessage]);
+                            // setTotalCount((t: any) => t + 1);
                         }
                         setChannelToTop(channelToTop + 1);
                         setLoading(false);
@@ -719,10 +794,28 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
     };
 
+    let onScroll = false;
+
+    const onMomentumScrollBegin = ({ nativeEvent }: any) => {
+        onScroll = true;
+        console.log('scroll top');
+        if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > channelMessages?.length) {
+            onFetchOld();
+        }
+    };
+
+    const onEndReached = () => {
+        console.log('on end reached');
+        if (!onScroll) return;
+        // load messages, show ActivityIndicator
+        onScroll = false;
+        // setLoadingOldMessages(true);
+    };
+
     return (
         <>
-            {/* {loadingOldMessages && <Spinner />} */}
-            {loadEarlierMsg && <Spinner />}
+            {(loadingOldMessages || loadEarlierMsg) && <Spinner />}
+            {/* {loadEarlierMsg && <Spinner />} */}
             {isPostParentIdThread && (
                 <>
                     {threadPost?.length > 0 && (
@@ -768,9 +861,15 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 </>
             )}
             <GiftedChat
+                ref={threadMessageListRef}
                 wrapInSafeArea={false}
                 renderLoading={() => <Spinner />}
                 messages={messageList}
+                listViewProps={{
+                    onEndReached: onEndReached,
+                    onEndReachedThreshold: 0.5,
+                    onMomentumScrollBegin: onMomentumScrollBegin,
+                }}
                 onSend={(messages) => handleSend(messages[0]?.text ?? ' ')}
                 text={msg ? msg : ' '}
                 onInputTextChanged={(text) => setMsg(text)}
@@ -784,32 +883,70 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 // onLoadEarlier={onFetchOld}
                 infiniteScroll={true}
                 renderSend={renderSend}
-                loadEarlier={data?.messages?.totalCount > channelMessages.length}
-                isLoadingEarlier={loadEarlierMsg}
-                renderLoadEarlier={() =>
-                    !loadEarlierMsg && (
-                        <Center py={2}>
-                            <Button
-                                onPress={() => onFetchOld(data, channelMessages)}
-                                variant={'outline'}
-                                _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
-                            >
-                                Load earlier messages
-                            </Button>
-                        </Center>
-                    )
-                }
+                // loadEarlier={data?.messages?.totalCount > channelMessages.length}
+                // isLoadingEarlier={loadEarlierMsg}
+                // renderLoadEarlier={() =>
+                //     !loadEarlierMsg && (
+                //         <Center py={2}>
+                //             <Button
+                //                 onPress={() => onFetchOld(channelMessages?.length)}
+                //                 variant={'outline'}
+                //                 _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
+                //             >
+                //                 Load earlier messages
+                //             </Button>
+                //         </Center>
+                //     )
+                // }
                 renderMessageText={renderMessageText}
                 minInputToolbarHeight={50}
                 renderActions={renderActions}
                 renderAccessory={renderAccessory}
                 renderMessage={renderMessage}
                 renderChatFooter={() => (
-                    <ImageViewerModal
-                        isVisible={isShowImageViewer}
-                        setVisible={setImageViewer}
-                        modalContent={modalContent}
-                    />
+                    <>
+                        <ImageViewerModal
+                            isVisible={isShowImageViewer}
+                            setVisible={setImageViewer}
+                            modalContent={modalContent}
+                        />
+                        <SubscriptionHandler
+                            channelId={channelId}
+                            subscribeToNewMessages={() =>
+                                subscribeToMore({
+                                    document: CHAT_MESSAGE_ADDED,
+                                    variables: {
+                                        channelId: channelId?.toString(),
+                                        postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                                    },
+                                    updateQuery: (prev, { subscriptionData }: any) => {
+                                        if (!subscriptionData.data) return prev;
+
+                                        const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
+                                        const mergedData = prev?.messages?.data
+                                            ? [...prev.messages.data, newMessage]
+                                            : [];
+                                        const totalMsgCount = prev?.messages?.totalCount + 1;
+                                        const merged = {
+                                            ...prev?.messages,
+                                            messages: {
+                                                ...prev?.messages,
+                                                data: mergedData,
+                                                totalCount: totalMsgCount,
+                                            },
+                                        };
+                                        return merged;
+                                        // return Object.assign({}, prev, {
+                                        //     messages: {
+                                        //         data: [...prev.messages.data, newMessage],
+                                        //         totalCount: prev.messages.totalCount + 1,
+                                        //     },
+                                        // });
+                                    },
+                                })
+                            }
+                        />
+                    </>
                 )}
                 messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
                 renderChatEmpty={() => (
@@ -834,4 +971,9 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     );
 };
 
+const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {
+    useEffect(() => subscribeToNewMessages(), [channelId]);
+    return <></>;
+};
+
 export const ThreadConversationView = React.memo(ThreadConversationViewComponent);