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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "0.0.1-alpha.391",
+    "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.391",
-        "@messenger-box/platform-client": "0.0.1-alpha.391",
+        "@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": "8d25492999ac0d8328186716751cd8966e63225c"
+    "gitHead": "f254347ff1e530eebfa57500fd05521a6d87c361"
 }

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

@@ -1,8 +1,16 @@
-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';
-import { IChannel, IUserAccount, useMessagesQuery, useUserAccountQuery } from '@messenger-box/platform-client';
+import {
+    IChannel,
+    ISortEnum,
+    IUserAccount,
+    useMessagesQuery,
+    useOnChatMessageAddedSubscription,
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+    useUserAccountQuery,
+} from '@messenger-box/platform-client';
 import { startCase } from 'lodash';
 
 const createdAtText = (value: string) => {
@@ -37,24 +45,51 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     channel,
     onOpen,
 }) {
-    const parentId:any = null;
+    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: 25,
+            limit: 10,
+            // sort: {
+            //     key: 'updatedAt',
+            //     value: ISortEnum.Desc,
+            // },
+            //limit: 25,
         },
         fetchPolicy: 'cache-and-network',
+        refetchWritePolicy: 'merge',
+    });
+
+    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,15 +98,32 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         }, []),
     );
 
+    React.useEffect(() => {
+        if (messagesQuery) {
+            if (messagesQuery?.messages?.data?.length) {
+                const msg = messagesQuery?.messages?.data;
+                setMessages((pre: any[]) => [...pre, ...msg]);
+            }
+        }
+    }, [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(
         () =>
@@ -151,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}
@@ -164,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"
@@ -189,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: 20 }),
+    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' }),