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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "0.0.1-alpha.411",
+    "version": "0.0.1-alpha.421",
     "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.411",
-        "@messenger-box/platform-client": "0.0.1-alpha.411",
+        "@messenger-box/core": "0.0.1-alpha.421",
+        "@messenger-box/platform-client": "0.0.1-alpha.421",
         "base-64": "1.0.0",
         "react-native-gifted-chat": "1.0.4"
     },
@@ -40,5 +40,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "a3d5afa7aa4b8b67baf9147e3e085046b63a2551"
+    "gitHead": "452fdad1b1680b8bd0babb47f5d4f2e781f933bc"
 }

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

@@ -10,6 +10,8 @@ import {
     useUserAccountQuery,
     useOnThreadCreatedUpdatedSubscription,
     useOnThreadChatMessageAddedSubscription,
+    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
+    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
 } from '@messenger-box/platform-client';
 import { startCase } from 'lodash';
 
@@ -49,11 +51,13 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
     refreshing,
     role,
 }) {
+    const [servicePostParentId, setServicePostParentId] = React.useState(null);
     const {
         data: threadMessages,
         loading: threadMessageLoading,
         error,
         refetch: refetchThreadMessages,
+        subscribeToMore,
     } = useThreadMessagesQuery({
         variables: {
             channelId: channel?.id?.toString(),
@@ -101,6 +105,13 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
         }
     }, [threadMessages]);
 
+    React.useEffect(() => {
+        if (lastMessage) {
+            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+            setServicePostParentId(sParentId);
+        }
+    }, [lastMessage]);
+
     const creatorAndMembersId = React.useMemo(() => {
         if (!channel?.members) return null;
         const membersIds: any =
@@ -122,23 +133,23 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
             : lastMessage?.id ?? 0;
     }, [creatorAndMembersId, lastMessage]);
 
-    const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-        variables: {
-            channelId: channel?.id?.toString(),
-            postParentId:
-                postParentId == null
-                    ? null
-                    : lastMessage?.parentId
-                    ? lastMessage?.parentId ?? null
-                    : lastMessage?.id ?? null,
-        },
-    });
+    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
+    //     variables: {
+    //         channelId: channel?.id?.toString(),
+    //         postParentId:
+    //             postParentId == null
+    //                 ? null
+    //                 : lastMessage?.parentId
+    //                 ? lastMessage?.parentId ?? null
+    //                 : lastMessage?.id ?? null,
+    //     },
+    // });
 
-    React.useEffect(() => {
-        if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
-            refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-        }
-    }, [threadCreatedUpdated]);
+    // React.useEffect(() => {
+    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
+    //         refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
+    //     }
+    // }, [threadCreatedUpdated]);
 
     return (
         <Pressable
@@ -194,32 +205,44 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
                     </Avatar.Group>
                 </Box>
                 <Box flex={0.9}>
-                    <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
-                        <Box flex={0.8}>
-                            <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
-                                {channel?.title}
-                            </Text>
-                            <Text color="gray.600" noOfLines={1}>
-                                {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-                                    ? lastMessageCreatorAndMembers?.message ?? ''
-                                    : lastMessage?.message ?? ''} */}
-                                {lastMessage?.message ?? ''}
-                            </Text>
-                        </Box>
-
-                        <Box flex={0.2}>
-                            {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? (
-                                <Text color="gray.500">
-                                    {lastMessageCreatorAndMembers
-                                        ? createdAtText(lastMessageCreatorAndMembers?.createdAt)
-                                        : ''}
-                                </Text>
-                            ) : (
-                                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-                            )} */}
-                            <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-                        </Box>
-                    </HStack>
+                    <ServiceChannelWithLastMessage
+                        channel={channel}
+                        lastMessage={lastMessage}
+                        subscribeToNewMessages={() =>
+                            subscribeToMore({
+                                document: THREAD_CHAT_ADDED,
+                                variables: {
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId ? servicePostParentId : 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: [...t?.replies, newMessage],
+                                                  replyCount: newPostThreadData?.replyCount,
+                                                  lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                  updatedAt: newPostThreadData?.updatedAt,
+                                              }
+                                            : t,
+                                    );
+
+                                    return Object.assign({}, prev, {
+                                        threadMessages: {
+                                            ...prev?.threadMessages,
+                                            //  totalCount: prev?.threadMessages?.totalCount + 1,
+                                            data: data,
+                                        },
+                                    });
+                                },
+                            })
+                        }
+                    />
                     {/* <Text
                         flex={1}
                         color="gray.600"
@@ -244,4 +267,36 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
     );
 };
 
+const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
+    React.useEffect(() => subscribeToNewMessages(), []);
+    return (
+        <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
+            <Box flex={0.8}>
+                <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
+                    {channel?.title}
+                </Text>
+                <Text color="gray.600" noOfLines={1}>
+                    {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
+                    ? lastMessageCreatorAndMembers?.message ?? ''
+                    : lastMessage?.message ?? ''} */}
+                    {lastMessage?.message ?? ''}
+                </Text>
+            </Box>
+
+            <Box flex={0.2}>
+                {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? (
+                <Text color="gray.500">
+                    {lastMessageCreatorAndMembers
+                        ? createdAtText(lastMessageCreatorAndMembers?.createdAt)
+                        : ''}
+                </Text>
+            ) : (
+                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+            )} */}
+                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+            </Box>
+        </HStack>
+    );
+});
+
 export const SupportServiceDialogsListItem = React.memo(SupportServiceDialogsListItemComponent);

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

@@ -47,12 +47,12 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
     role,
     setData,
 }) {
-    const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-        variables: {
-            channelId: thread?.channel?.id?.toString(),
-            postParentId: thread?.post?.id?.toString(),
-        },
-    });
+    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
+    //     variables: {
+    //         channelId: thread?.channel?.id?.toString(),
+    //         postParentId: thread?.post?.id?.toString(),
+    //     },
+    // });
 
     useFocusEffect(
         React.useCallback(() => {
@@ -64,16 +64,21 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
         }, []),
     );
 
-    React.useEffect(() => {
-        if (threadCreatedUpdated?.threadCreatedUpdated?.data) setData(threadCreatedUpdated?.threadCreatedUpdated?.data);
-    }, [threadCreatedUpdated?.threadCreatedUpdated]);
-
     const threadPostReply = React.useMemo(() => {
         if (!thread?.replies) return null;
-        if (threadCreatedUpdated?.threadCreatedUpdated?.data?.replies?.length) {
-            return threadCreatedUpdated?.threadCreatedUpdated?.data?.replies;
-        } else return thread?.replies;
-    }, [thread, threadCreatedUpdated]);
+        return thread?.replies;
+    }, [thread]);
+
+    // React.useEffect(() => {
+    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) setData(threadCreatedUpdated?.threadCreatedUpdated?.data);
+    // }, [threadCreatedUpdated?.threadCreatedUpdated]);
+
+    // const threadPostReply = React.useMemo(() => {
+    //     if (!thread?.replies) return null;
+    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data?.replies?.length) {
+    //         return threadCreatedUpdated?.threadCreatedUpdated?.data?.replies;
+    //     } else return thread?.replies;
+    // }, [thread, threadCreatedUpdated]);
 
     // const lastMessage = useMemo(() => {
     //     if (!threadPost) {
@@ -232,18 +237,45 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
                                                             {/* {lastMessage ? createdAtText(lastMessage?.createdAt) : ''} */}
                                                         </Text>
                                                     </HStack>
-                                                    <Text color="gray.600" noOfLines={2}>
-                                                        {reply?.message
-                                                            ? reply?.message.length < 70
-                                                                ? `${reply?.message}`
-                                                                : `${reply?.message.substring(0, 68)}....`
-                                                            : ''}
-                                                        {/* {lastMessage?.message
-                                                ? lastMessage?.message.length < 70
-                                                    ? `${lastMessage?.message}`
-                                                    : `${lastMessage?.message.substring(0, 68)}....`
-                                                : ''} */}
-                                                    </Text>
+                                                    <VStack space={1}>
+                                                        {reply?.message && (
+                                                            <Text color="gray.600" noOfLines={2}>
+                                                                {reply?.message.length < 70
+                                                                    ? `${reply?.message}`
+                                                                    : `${reply?.message.substring(0, 68)}....`}
+                                                            </Text>
+                                                        )}
+                                                        {/* <Text color="gray.600" noOfLines={2}>
+                                                            {reply?.message
+                                                                ? reply?.message.length < 70
+                                                                    ? `${reply?.message}`
+                                                                    : `${reply?.message.substring(0, 68)}....`
+                                                                : ''}
+                                                        </Text> */}
+
+                                                        <>
+                                                            {reply?.files?.data?.length > 0 &&
+                                                                reply?.files?.data?.map((f: any) => (
+                                                                    <Box>
+                                                                        <Avatar
+                                                                            bg={'transparent'}
+                                                                            size={8}
+                                                                            _image={{
+                                                                                borderRadius: 6,
+                                                                                borderWidth: 2,
+                                                                                borderColor: '#fff',
+                                                                            }}
+                                                                            source={{
+                                                                                uri: f?.url,
+                                                                            }}
+                                                                        >
+                                                                            I
+                                                                        </Avatar>
+                                                                    </Box>
+                                                                ))}
+                                                        </>
+                                                    </VStack>
+
                                                     {(threadPostReply?.length == 1 || index !== 0) && (
                                                         <Button
                                                             size={'xs'}

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

@@ -1,45 +1,29 @@
-import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
-import {
-    Box,
-    Button,
-    HStack,
-    Icon,
-    Image,
-    Spinner,
-    Text,
-    useColorModeValue,
-    Avatar,
-    ScrollView,
-    Center,
-} from 'native-base';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Avatar, Box, Button, HStack, Icon, Image, Spinner, Text, useColorModeValue, } from 'native-base';
 import { Platform, TouchableHighlight } from 'react-native';
-import { useNavigation, useFocusEffect, useIsFocused } from '@react-navigation/native';
+import { useFocusEffect, useIsFocused, useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
-import { orderBy, uniqBy, startCase } from 'lodash';
+import { orderBy, startCase, uniqBy } from 'lodash';
 import * as ImagePicker from 'expo-image-picker';
 import { encode as atob } from 'base-64';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import { Actions, GiftedChat, IMessage, MessageText, Send } from 'react-native-gifted-chat';
 import {
-    useCheckForNewMessagesQuery,
-    useGetAllUsersQuery,
+    IPreDefinedRole,
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
     useMessagesQuery,
+    useSendExpoNotificationOnPostMutation,
     useSendMessagesMutation,
-    useViewChannelDetailQuery,
     useUploadFilesNative,
-    useGetNewMongooseObjectIdQuery,
-    useOnChatMessageAddedSubscription,
-    IPreDefinedRole,
-    useSendExpoNotificationOnPostMutation,
-    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    IPost,
+    useViewChannelDetailQuery,
 } from '@messenger-box/platform-client';
-import { IExpoNotificationData, IFileInfo } from '@messenger-box/core';
+import { IExpoNotificationData, IFileInfo, objectId } from '@messenger-box/core';
 import { config } from '../config';
 import { userSelector } from '@adminide-stack/user-auth0-client';
-import { SlackMessage, ImageViewerModal } from '../components/SlackMessageContainer';
+import { ImageViewerModal, SlackMessage } from '../components/SlackMessageContainer';
 import CachedImage from '../components/CachedImage';
 import { format, isToday, isYesterday } from 'date-fns';
+
 const {
     MESSAGES_PER_PAGE,
     CALL_TO_ACTION_BOX_BGCOLOR,
@@ -99,9 +83,6 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
     const [skip, setSkip] = useState(0);
     const messageRootListRef = useRef<any>(null);
     const isFocused = useIsFocused();
-    const { data: mongooseObjectId, refetch: refetchNewPostId } = useGetNewMongooseObjectIdQuery({
-        fetchPolicy: 'network-only',
-    });
 
     const { startUpload } = useUploadFilesNative();
 
@@ -265,8 +246,7 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
             };
 
             if (images && images.length > 0) {
-                const newPostId = await refetchNewPostId();
-                const postId: any = newPostId?.data?.getNewMongooseObjectId?.toString();
+                const postId = objectId()
 
                 setLoading(true);
                 const uploadResponse = await startUpload({
@@ -331,7 +311,7 @@ const ConversationViewComponent = ({ channelId, role }: any) => {
                 });
             }
         },
-        [mongooseObjectId, setChannelMessages, channelId, images, channelToTop, expoTokens],
+        [setChannelMessages, channelId, images, channelToTop, expoTokens],
     );
 
     const messageList = useMemo(() => {