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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "0.0.1-alpha.391",
+    "version": "0.0.1-alpha.392",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -19,8 +19,8 @@
         "watch": "yarn build:lib:watch"
     },
     "dependencies": {
-        "@messenger-box/core": "0.0.1-alpha.391",
-        "@messenger-box/platform-client": "0.0.1-alpha.391",
+        "@messenger-box/core": "0.0.1-alpha.392",
+        "@messenger-box/platform-client": "0.0.1-alpha.392",
         "base-64": "1.0.0",
         "react-native-gifted-chat": "1.0.4"
     },
@@ -40,5 +40,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "8d25492999ac0d8328186716751cd8966e63225c"
+    "gitHead": "b5ef43048bcad9378d61be44eb72fcb9800f820e"
 }

package/src/screens/inbox/components/DialogsListItem.tsx

@@ -2,7 +2,14 @@ import React, { useMemo } from 'react';
 import { Text, Image, Pressable, HStack, Stack, Box, Avatar, View } from 'native-base';
 import { format, isToday, isYesterday } from 'date-fns';
 import { useFocusEffect } from '@react-navigation/native';
-import { IChannel, IUserAccount, useMessagesQuery, useUserAccountQuery } from '@messenger-box/platform-client';
+import {
+    IChannel,
+    ISortEnum,
+    IUserAccount,
+    useMessagesQuery,
+    useOnChatMessageAddedSubscription,
+    useUserAccountQuery,
+} from '@messenger-box/platform-client';
 import { startCase } from 'lodash';
 
 const createdAtText = (value: string) => {
@@ -37,7 +44,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     channel,
     onOpen,
 }) {
-    const parentId:any = null;
+    const parentId: any = null;
     const {
         data: messagesQuery,
         loading: messageLoading,
@@ -46,15 +53,39 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         variables: {
             channelId: channel?.id?.toString(),
             parentId: parentId,
-            limit: 25,
+            limit: 10,
+            sort: {
+                key: 'updatedAt',
+                value: ISortEnum.Desc,
+            },
+            //limit: 25,
         },
         fetchPolicy: 'cache-and-network',
     });
 
+    const {
+        data: newMessage,
+        loading: newMsgLoading,
+        error: newMsgError,
+    }: any = useOnChatMessageAddedSubscription({
+        variables: {
+            channelId: channel?.id?.toString(),
+        },
+    });
+
     useFocusEffect(
         React.useCallback(() => {
             // Do something when the screen is focused
-            refetchMessages({ channelId: channel?.id?.toString(),parentId:parentId, limit: 25 });
+            refetchMessages({
+                channelId: channel?.id?.toString(),
+                parentId: parentId,
+                limit: 10,
+                sort: {
+                    key: 'updatedAt',
+                    value: ISortEnum.Desc,
+                },
+                //limit: 25
+            });
 
             return () => {
                 // Do something when the screen is unfocused
@@ -63,6 +94,20 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         }, []),
     );
 
+    React.useEffect(() => {
+        if (newMessage) {
+            refetchMessages({
+                channelId: channel?.id?.toString(),
+                parentId: parentId,
+                limit: 10,
+                sort: {
+                    key: 'updatedAt',
+                    value: ISortEnum.Desc,
+                },
+            });
+        }
+    }, [newMessage]);
+
     const lastMessage = useMemo(() => {
         if (!messagesQuery?.messages?.data?.length) {
             return null;

package/src/screens/inbox/config/config.ts

@@ -1,7 +1,7 @@
 import { cleanEnv, num, str } from 'envalid';
 
 export const config = cleanEnv(process['APP_ENV'] || process.env, {
-    MESSAGES_PER_PAGE: num({ devDefault: 10, default: 20 }),
+    MESSAGES_PER_PAGE: num({ devDefault: 10, default: 10 }),
     FILES_PER_MESSAGE: num({ default: 10 }),
     INBOX_MESSEGE_PATH: str({ default: 'MainStack.Message' }),
     // THREAD_MESSEGE_PATH: str({ default: 'MainStack.Thread' }),

package/src/screens/inbox/containers/ConversationView.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,
@@ -31,6 +31,7 @@ import {
     useOnChatMessageAddedSubscription,
     IPreDefinedRole,
     useSendExpoNotificationOnPostMutation,
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
     IPost,
 } from '@messenger-box/platform-client';
 import { IExpoNotificationData, IFileInfo } from '@messenger-box/core';
@@ -55,6 +56,10 @@ const createdAtText = (value: string) => {
     return format(new Date(value), 'MMM dd, yyyy');
 };
 
+interface ISubscriptionHandlerProps {
+    subscribeToNewMessages: () => any;
+}
+
 interface IMessageProps extends IMessage {
     type: string;
     propsConfiguration?: any;
@@ -90,21 +95,23 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
     const [expoTokens, setExpoTokens] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
+    const [skip, setSkip] = useState(0);
+    const messageRootListRef = useRef<any>(null);
     const isFocused = useIsFocused();
-    const { data: mongooseObjectId,refetch:refetchNewPostId } = useGetNewMongooseObjectIdQuery({
+    const { data: mongooseObjectId, refetch: refetchNewPostId } = useGetNewMongooseObjectIdQuery({
         fetchPolicy: 'network-only',
         //pollInterval: 5000,
     });
 
-    const {
-        data: newMessage,
-        loading: newMsgLoading,
-        error: newMsgError,
-    }: any = useOnChatMessageAddedSubscription({
-        variables: {
-            channelId: channelId?.toString(),
-        },
-    });
+    // const {
+    //     data: newMessage,
+    //     loading: newMsgLoading,
+    //     error: newMsgError,
+    // }: any = useOnChatMessageAddedSubscription({
+    //     variables: {
+    //         channelId: channelId?.toString(),
+    //     },
+    // });
 
     const { startUpload } = useUploadFilesNative();
 
@@ -116,15 +123,20 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
         data,
         loading: messageLoading,
         refetch,
+        fetchMore: fetchMoreMessages,
+        subscribeToMore,
     }: any = useMessagesQuery({
         variables: {
             channelId: channelId?.toString(),
             parentId: null,
             limit: MESSAGES_PER_PAGE,
+            skip: skip,
         },
         skip: !channelId,
         fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
+        refetchWritePolicy: 'merge',
+        // fetchPolicy: 'cache-and-network',
+        // nextFetchPolicy: 'cache-first',
     });
 
     const {
@@ -150,11 +162,13 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
     useFocusEffect(
         React.useCallback(() => {
             // Do something when the screen is focused
+            setSkip(0);
             refetchChannelDetail({ id: channelId?.toString() });
             refetch({
                 channelId: channelId?.toString(),
                 parentId: null,
                 limit: MESSAGES_PER_PAGE,
+                skip: 0,
             }).then(({ data }) => {
                 if (!data?.messages) {
                     return;
@@ -234,25 +248,49 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
 
     // }, [data, channelMessages,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);
+    //     }
+    // }, [data, loadingOldMessages, channelMessages]);
+
     useEffect(() => {
-        if ((data?.messages?.data && channelMessages.length === 0) || (data?.messages?.data && loadingOldMessages)) {
+        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);
-        }
-    }, [data, loadingOldMessages, channelMessages]);
 
-    React.useEffect(() => {
-        if (newMessage) {
-            const msg = newMessage?.chatMessageAdded;
-            setTotalCount((preCount: any) => preCount + 1);
-            setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
+            if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
+
+            if (
+                channelMessages &&
+                channelMessages?.length == MESSAGES_PER_PAGE &&
+                totalCount > channelMessages?.length
+            ) {
+                onFetchOld();
+            }
         }
-    }, [newMessage]);
+    }, [data, loadingOldMessages, channelMessages, totalCount]);
+
+    // React.useEffect(() => {
+    //     if (newMessage) {
+    //         const msg = newMessage?.chatMessageAdded;
+    //         setTotalCount((preCount: any) => preCount + 1);
+    //         setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
+    //     }
+    // }, [newMessage]);
 
     // useEffect(() => {
     //     if (data?.messages?.data) {
@@ -335,14 +373,24 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
     //     }
     // }, [data, channelMessages]);
 
-    const onFetchOld = useCallback((data: any, channelMessages: any) => {
-        if (data?.messages?.totalCount > channelMessages.length) {
+    const onFetchOld = useCallback(() => {
+        if (totalCount > channelMessages.length && !loadingOldMessages) {
+            setSkip(channelMessages.length);
             setLoadEarlierMsg(true);
-            refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
-                (res: any) => setLoadingOldMessages(true),
-            );
+            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 onFetchOld = () => {
     //      if(totalCount > channelMessages.length){
@@ -534,7 +582,7 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
             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,
@@ -1102,19 +1150,36 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
     //     }
     // };
 
+    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 (
         <>
             {loadEarlierMsg && <Spinner />}
 
             <GiftedChat
+                ref={messageRootListRef}
                 wrapInSafeArea={false}
                 renderLoading={() => <Spinner />}
                 messages={messageList}
-                // listViewProps={{
-                //     onEndReached: onEndReached,
-                //     onEndReachedThreshold: 0.5,
-                //     onMomentumScrollBegin: onMomentumScrollBegin,
-                // }}
+                listViewProps={{
+                    onEndReached: onEndReached,
+                    onEndReachedThreshold: 0.5,
+                    onMomentumScrollBegin: onMomentumScrollBegin,
+                }}
                 // listViewProps={{
                 //     scrollEventThrottle: 400,
                 //     onScroll: ({ nativeEvent }) => { console.log('scroll')
@@ -1137,33 +1202,74 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
                 //onLoadEarlier={onFetchOld}
                 //infiniteScroll={true}
                 renderSend={renderSend}
-                loadEarlier={data?.messages?.totalCount > channelMessages.length}
-                isLoadingEarlier={loadEarlierMsg}
+                // loadEarlier={data?.messages?.totalCount > channelMessages.length}
+                //isLoadingEarlier={loadEarlierMsg}
                 //extraData={{ isLoadingEarlier: loadingOldMessages }}
-                renderLoadEarlier={() =>
-                    !loadEarlierMsg && (
-                        <Center py={2}>
-                            <Button
-                                onPress={() => onFetchOld(data, channelMessages)}
-                                variant={'outline'}
-                                _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
-                            >
-                                Load earlier messages
-                            </Button>
-                        </Center>
-                    )
-                }
+                // renderLoadEarlier={() =>
+                //     !loadEarlierMsg && (
+                //         <Center py={2}>
+                //             <Button
+                //                 onPress={() => onFetchOld()}
+                //                 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
+                            subscribeToNewMessages={() =>
+                                subscribeToMore({
+                                    document: CHAT_MESSAGE_ADDED,
+                                    variables: {
+                                        channelId: channelId?.toString(),
+                                    },
+                                    updateQuery: (prev, { subscriptionData }: any) => {
+                                        if (!subscriptionData.data) return prev;
+
+                                        const newMessage: any = subscriptionData?.data?.chatMessageAdded;
+                                        const previousData = prev?.messages?.data
+                                            ? [...prev.messages.data, newMessage]
+                                            : [];
+                                        const totalMsgCount = prev?.messages?.totalCount + 1;
+                                        // const merged = {
+                                        //     ...prev,
+                                        //     data: previousData,
+                                        //     totalCount: totalMsgCount,
+                                        // };
+                                        const merged = {
+                                            ...prev,
+                                            messages: {
+                                                ...prev?.messages,
+                                                data: previousData,
+                                                totalCount: totalMsgCount,
+                                            },
+                                        };
+                                        return merged;
+                                        // return Object.assign({}, prev, {
+                                        //     messages: {
+                                        //         data: [...prev.messages.data, newMessage],
+                                        //         totalCount: prev.messages.totalCount + 1,
+                                        //     },
+                                        // });
+                                    },
+                                })
+                            }
+                        />
+                    </>
                 )}
                 lightboxProps={{
                     underlayColor: 'transparent',
@@ -1175,4 +1281,9 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
     );
 };
 
+const SubscriptionHandler = ({ subscribeToNewMessages }: ISubscriptionHandlerProps) => {
+    useEffect(() => subscribeToNewMessages(), []);
+    return <></>;
+};
+
 export const ConversationView = React.memo(ConversationViewComponent);