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

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } 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';
@@ -8,6 +8,7 @@ import {
     IUserAccount,
     useMessagesQuery,
     useOnChatMessageAddedSubscription,
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
     useUserAccountQuery,
 } from '@messenger-box/platform-client';
 import { startCase } from 'lodash';
@@ -45,22 +46,25 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     onOpen,
 }) {
     const parentId: any = null;
+    const [messages, setMessages] = useState<any>([]);
     const {
         data: messagesQuery,
         loading: messageLoading,
         refetch: refetchMessages,
+        subscribeToMore,
     } = useMessagesQuery({
         variables: {
             channelId: channel?.id?.toString(),
             parentId: parentId,
             limit: 10,
-            sort: {
-                key: 'updatedAt',
-                value: ISortEnum.Desc,
-            },
+            // sort: {
+            //     key: 'updatedAt',
+            //     value: ISortEnum.Desc,
+            // },
             //limit: 25,
         },
         fetchPolicy: 'cache-and-network',
+        refetchWritePolicy: 'merge',
     });
 
     const {
@@ -80,10 +84,10 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                 channelId: channel?.id?.toString(),
                 parentId: parentId,
                 limit: 10,
-                sort: {
-                    key: 'updatedAt',
-                    value: ISortEnum.Desc,
-                },
+                // sort: {
+                //     key: 'updatedAt',
+                //     value: ISortEnum.Desc,
+                // },
                 //limit: 25
             });
 
@@ -95,28 +99,31 @@ 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,
-                },
-            });
+        if (messagesQuery) {
+            if (messagesQuery?.messages?.data?.length) {
+                const msg = messagesQuery?.messages?.data;
+                setMessages((pre: any[]) => [...pre, ...msg]);
+            }
         }
-    }, [newMessage]);
+    }, [messagesQuery]);
 
     const lastMessage = useMemo(() => {
-        if (!messagesQuery?.messages?.data?.length) {
+        if (!messages?.length) {
             return null;
         }
-        const { data } = messagesQuery.messages;
-        const filteredData = data?.filter((p: any) => p?.message !== '');
-        return filteredData[0];
+        // const { data } = messagesQuery.messages;
+        const data = messages;
+        const filteredData: any = data?.filter((p: any) => p?.message !== '');
+        // return filteredData[0];
+        let filteredLastMessage =
+            filteredData && filteredData?.length
+                ? filteredData?.reduce((a, b) => {
+                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                  }, []) ?? null
+                : null;
+        return filteredLastMessage;
         //return data[data.length - 1];
-    }, [messagesQuery]);
+    }, [messages]);
 
     const channelMembers = useMemo(
         () =>
@@ -196,7 +203,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                     </Avatar.Group>
                 </Box>
                 <Box flex={0.9}>
-                    <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
+                    {/* <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">
                                 {title}
@@ -209,7 +216,38 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                         <Box flex={0.2}>
                             <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
                         </Box>
-                    </HStack>
+                    </HStack> */}
+                    <LastMessageComponent
+                        title={title}
+                        lastMessage={lastMessage}
+                        channelId={channel?.id}
+                        subscribeToNewMessages={() =>
+                            subscribeToMore({
+                                document: CHAT_MESSAGE_ADDED,
+                                variables: {
+                                    channelId: channel.id?.toString(),
+                                },
+                                updateQuery: (prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData.data) return prev;
+                                    const newMessage: any = subscriptionData?.data?.chatMessageAdded;
+                                    const existingMessages: any = prev?.messages;
+                                    const previousData = existingMessages?.data
+                                        ? [...existingMessages.data, newMessage]
+                                        : [];
+                                    const totalMsgCount = existingMessages?.totalCount + 1;
+                                    const merged = {
+                                        ...prev,
+                                        messages: {
+                                            ...existingMessages,
+                                            data: previousData,
+                                            totalCount: totalMsgCount,
+                                        },
+                                    };
+                                    return merged;
+                                },
+                            })
+                        }
+                    />
                     {/* <Text
                         flex={1}
                         color="gray.600"
@@ -234,4 +272,24 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     );
 };
 
+const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId }) => {
+    React.useEffect(() => subscribeToNewMessages(), [channelId]);
+    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">
+                    {title}
+                </Text>
+                <Text color="gray.600" noOfLines={1}>
+                    {lastMessage?.message ?? ''}
+                </Text>
+            </Box>
+
+            <Box flex={0.2}>
+                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+            </Box>
+        </HStack>
+    );
+};
+
 export const DialogsListItem = React.memo(DialogsListItemComponent);

package/src/screens/inbox/components/SlackMessageContainer/SlackMessage.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { View, ViewPropTypes, StyleSheet } from 'react-native';
 
 import { Avatar, Day, utils } from 'react-native-gifted-chat';
+import { Avatar as AvatarNativeBase } from 'native-base';
 import Bubble from './SlackBubble';
 
 const { isSameUser, isSameDay } = utils;
@@ -19,8 +20,8 @@ export default class Message extends React.Component<any> {
         previousMessage: {};
         user: {};
         containerStyle: {};
-        isShowImageViewer:false,
-        setImageViewer:(obj:any,v:boolean) => void,
+        isShowImageViewer: false;
+        setImageViewer: (obj: any, v: boolean) => void;
     };
     getInnerComponentProps() {
         const { containerStyle, ...props } = this.props;
@@ -48,28 +49,50 @@ export default class Message extends React.Component<any> {
         if (this.props.renderBubble) {
             return this.props.renderBubble(bubbleProps);
         }
-        return <Bubble {...bubbleProps} isShowImageViewer={this.props.isShowImageViewer} setImageViewer={this.props.setImageViewer} />;
+        return (
+            <Bubble
+                {...bubbleProps}
+                isShowImageViewer={this.props.isShowImageViewer}
+                setImageViewer={this.props.setImageViewer}
+            />
+        );
     }
 
     renderAvatar() {
         let extraStyle: any;
+        //new param added
+        let isSameUserAndSameDay: boolean = false;
         if (
             isSameUser(this.props.currentMessage, this.props.previousMessage) &&
             isSameDay(this.props.currentMessage, this.props.previousMessage)
         ) {
             // Set the invisible avatar height to 0, but keep the width, padding, etc.
             extraStyle = { height: 0 };
+            isSameUserAndSameDay = true;
         }
 
         const avatarProps: any = this.getInnerComponentProps();
+
         return (
-            <Avatar
-                {...avatarProps}
-                showAvatarForEveryMessage={true}
-                imageStyle={{
-                    left: [styles.slackAvatar, avatarProps.imageStyle, extraStyle],
+            <AvatarNativeBase
+                size={'sm'}
+                bg={'transparent'}
+                borderRadius={0}
+                source={{
+                    uri: isSameUserAndSameDay ? null : avatarProps?.currentMessage?.user?.avatar,
                 }}
-            />
+                marginRight={2}
+                _image={{ ...styles.slackAvatar, ...avatarProps.imageStyle }}
+            >
+                {isSameUserAndSameDay ? '' : avatarProps?.currentMessage?.user?.name[0]}
+            </AvatarNativeBase>
+            // <Avatar
+            //     {...avatarProps}
+            //     showAvatarForEveryMessage={true}
+            //     imageStyle={{
+            //         left: [styles.slackAvatar, avatarProps.imageStyle, extraStyle],
+            //     }}
+            // />
         );
     }
 
@@ -101,7 +124,8 @@ const styles = StyleSheet.create({
         height: 40,
         width: 40,
         borderRadius: 3,
-        marginTop: 0,
+        // marginTop: 0,
+        marginTop: 1,
     },
 });
 
@@ -114,6 +138,6 @@ Message.defaultProps = {
     previousMessage: {},
     user: {},
     containerStyle: {},
-    isShowImageViewer:false,
-    setImageViewer:(obj:any,v:boolean) => null,
+    isShowImageViewer: false,
+    setImageViewer: (obj: any, v: boolean) => 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: 10 }),
+    MESSAGES_PER_PAGE: num({ devDefault: 20, default: 20 }),
     FILES_PER_MESSAGE: num({ default: 10 }),
     INBOX_MESSEGE_PATH: str({ default: 'MainStack.Message' }),
     // THREAD_MESSEGE_PATH: str({ default: 'MainStack.Thread' }),