@messenger-box/platform-mobile 0.0.1-alpha.362 → 0.0.1-alpha.365

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

@@ -1,9 +1,21 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, Button, HStack, Icon, Image, Spinner, Text, useColorModeValue, ScrollView } from 'native-base';
-import { Platform, TouchableOpacity } from 'react-native';
-import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import {
+    Box,
+    Button,
+    HStack,
+    Icon,
+    Image,
+    Spinner,
+    Text,
+    useColorModeValue,
+    Avatar,
+    ScrollView,
+    Center,
+} from 'native-base';
+import { Platform, TouchableOpacity, TouchableHighlight } from 'react-native';
+import { useNavigation, useFocusEffect, useIsFocused } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
-import { orderBy, uniqBy } from 'lodash';
+import { orderBy, uniqBy, startCase } from 'lodash';
 import * as ImagePicker from 'expo-image-picker';
 import { encode as atob } from 'base-64';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
@@ -15,12 +27,15 @@ import {
     useSendMessagesMutation,
     useViewChannelDetailQuery,
     useUploadFilesNative,
+    useGetNewMongooseObjectIdQuery,
+    useOnChatMessageAddedSubscription,
 } from '@messenger-box/platform-client';
 import { IFileInfo } from '@messenger-box/core';
 import { config } from '../config';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { SlackMessage, ImageViewerModal } from '../components/SlackMessageContainer';
 import CachedImage from '../components/CachedImage';
+import { format, isToday, isYesterday } from 'date-fns';
 const {
     MESSAGES_PER_PAGE,
     CALL_TO_ACTION_BOX_BGCOLOR,
@@ -29,9 +44,18 @@ const {
     CALL_TO_ACTION_TEXT_COLOR,
 } = config;
 
+const createdAtText = (value: string) => {
+    if (!value) return '';
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
+};
+
 interface IMessageProps extends IMessage {
     type: string;
     propsConfiguration?: any;
+    replies?: any;
 }
 
 export interface AlertMessageAttachmentsInterface {
@@ -58,10 +82,26 @@ const ConversationViewComponent = ({ channelId }: any) => {
     const [images, setImages] = useState<ImagePicker.ImageInfo[]>([]);
     const [msg, setMsg] = useState<string>('');
     const [loading, setLoading] = useState(false);
+    const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
     const [imageLoading, setImageLoading] = useState(false);
     const [expoTokens, setExpoTokens] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
+    const isFocused = useIsFocused();
+    const { data: mongooseObjectId } = useGetNewMongooseObjectIdQuery({
+        fetchPolicy: 'network-only',
+        pollInterval: 5000,
+    });
+
+    const {
+        data: newMessage,
+        loading: newMsgLoading,
+        error: newMsgError,
+    }: any = useOnChatMessageAddedSubscription({
+        variables: {
+            channelId: channelId?.toString(),
+        },
+    });
 
     const { startUpload } = useUploadFilesNative();
 
@@ -74,10 +114,12 @@ const ConversationViewComponent = ({ channelId }: any) => {
     }: any = useMessagesQuery({
         variables: {
             channelId: channelId?.toString(),
+            parentId: null,
             limit: MESSAGES_PER_PAGE,
         },
         skip: !channelId,
         fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
     });
 
     const {
@@ -91,14 +133,14 @@ const ConversationViewComponent = ({ channelId }: any) => {
     });
     // const { data: users } = useGetAllUsersQuery();
 
-    const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
-        variables: {
-            channelId: channelId?.toString(),
-        },
-        skip: !channelId,
-        fetchPolicy: 'network-only',
-        pollInterval: 5000,
-    });
+    // const { data: checkForMessages }: any = useCheckForNewMessagesQuery({
+    //     variables: {
+    //         channelId: channelId?.toString(),
+    //     },
+    //     skip: !channelId,
+    //     fetchPolicy: 'network-only',
+    //     pollInterval: 5000,
+    // });
 
     useFocusEffect(
         React.useCallback(() => {
@@ -106,6 +148,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
             refetchChannelDetail({ id: channelId?.toString() });
             refetch({
                 channelId: channelId?.toString(),
+                parentId: null,
                 limit: MESSAGES_PER_PAGE,
             }).then(({ data }) => {
                 if (!data?.messages) {
@@ -121,7 +164,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
                 setTotalCount(0);
                 setChannelMessages([]);
             };
-        }, []),
+        }, [isFocused]),
     );
 
     React.useEffect(() => {
@@ -159,17 +202,52 @@ const ConversationViewComponent = ({ channelId }: any) => {
     //         // if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
     //     }
     // }, [data, loadingOldMessages, channelMessages]);///
+    ////......... initiate messages ......................////
+    // useEffect(() => {
+    //     if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
+    //         console.log('loading msg')
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //         if (messages && messages.length > 0) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //             setLoadingOldMessages(false);
+    //         }
+    //         if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+    //     }
+    // }, [data, loadingOldMessages, channelMessages, totalCount]);
+    ////.... initiate messages end................................////
+
+    // useEffect(() => {
+    //     if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
+    //         console.log('initiate msg')
+    //         const { data: messages, totalCount: messeageTotalCount } = data.messages;
+    //         if (messages && messages.length > 0) {
+    //             setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+    //             setTotalCount(messeageTotalCount);
+    //         }
+    //         if(loadingOldMessages) setLoadingOldMessages(false);
+    //     }
+
+    // }, [data, channelMessages,loadingOldMessages]);
 
     useEffect(() => {
-        if (data?.messages?.data && (loadingOldMessages || channelMessages.length === 0)) {
+        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));
-                setLoadingOldMessages(false);
+                setTotalCount(messeageTotalCount);
             }
-            if (totalCount !== messeageTotalCount) setTotalCount(messeageTotalCount);
+            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));
         }
-    }, [data, loadingOldMessages, channelMessages, totalCount]);
+    }, [newMessage]);
 
     // useEffect(() => {
     //     if (data?.messages?.data) {
@@ -198,27 +276,30 @@ const ConversationViewComponent = ({ channelId }: any) => {
     //         });
     //     }
     // }, [checkForMessages, totalCount]);
-
-    useEffect(() => {
-        if (
-            !messageLoading &&
-            checkForMessages?.messages?.totalCount &&
-            checkForMessages?.messages?.totalCount > totalCount
-        ) {
-            const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
-            console.log('new msg check');
-            refetch({
-                limit: numberOfNewMessages,
-            }).then(({ data }) => {
-                if (!data?.messages) {
-                    return;
-                }
-                const { data: messages, totalCount }: any = data.messages;
-                setTotalCount(totalCount);
-                setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
-            });
-        }
-    }, [checkForMessages, totalCount]);
+    ////////...............New msg check...........////
+    // useEffect(() => {
+    //     if (
+    //         !messageLoading &&
+    //         checkForMessages?.messages?.totalCount &&
+    //         checkForMessages?.messages?.totalCount > totalCount
+    //     ) {
+    //         const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
+    //         console.log('new msg check');
+    //         refetch({
+    //             channelId: channelId?.toString(),
+    //             parentId: null,
+    //             limit: numberOfNewMessages,
+    //         }).then(({ data }) => {
+    //             if (!data?.messages) {
+    //                 return;
+    //             }
+    //             const { data: messages, totalCount }: any = data.messages;
+    //             setTotalCount(totalCount);
+    //             setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, ...messages], ({ id }) => id));
+    //         });
+    //     }
+    // }, [checkForMessages, totalCount]);
+    ////////////....new msg check end.........//
 
     // const onFetchOld = useCallback(() => {
     //    // if (data?.messages?.totalCount > channelMessages.length) {
@@ -238,12 +319,25 @@ const ConversationViewComponent = ({ channelId }: any) => {
     //      }
     //  };
 
-    const onFetchOld = useCallback(() => {
+    // const onFetchOld = useCallback(() => {
+    //     if (data?.messages?.totalCount > channelMessages.length) {
+    //         console.log('fetchmore')
+
+    //         refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then((res:any)=>{
+    //             setLoadingOldMessages(true);
+    //         });
+
+    //     }
+    // }, [data, channelMessages]);
+
+    const onFetchOld = useCallback((data: any, channelMessages: any) => {
         if (data?.messages?.totalCount > channelMessages.length) {
-            setLoadingOldMessages(true);
-            refetch({ skip: channelMessages.length });
+            setLoadEarlierMsg(true);
+            refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length })?.then(
+                (res: any) => setLoadingOldMessages(true),
+            );
         }
-    }, [data, channelMessages]);
+    }, []);
 
     // const onFetchOld = () => {
     //      if(totalCount > channelMessages.length){
@@ -420,102 +514,223 @@ const ConversationViewComponent = ({ channelId }: any) => {
     //     [setChannelMessages, currentUser, channelId, images,expoTokens],
     // );
 
-    const handleSend = async (message: string) => {
-        if (!channelId) return;
-        if (!message && message != ' ' && images.length == 0) return;
-
-        setLoading(true);
-        const { data } = await sendMsg({
-            variables: {
-                channelId,
-                content: message,
-            },
-            update: (cache, { data, errors }: any) => {
-                if (!data || errors) {
-                    setLoading(false);
-                    return;
-                }
-                setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
-                setTotalCount((t: any) => t + 1);
-                setChannelToTop(channelToTop + 1);
-                setLoading(false);
-                setMsg('');
-                const givenName = auth?.profile?.given_name ?? '';
-                const familyName = auth?.profile?.family_name ?? '';
-                const fullName = givenName ? givenName + ' ' + familyName : '';
-                const title: String = fullName ? fullName : 'Message';
-                const body: String = message;
-                const notificationData: any = {
-                    url: config.INBOX_MESSEGE_PATH,
-                    params: { channelId, hideTabBar: true },
-                    screen: 'DialogMessages',
-                };
-                refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
-                    if (res?.data?.viewChannelDetail?.members?.length) {
-                        const channelData: any =
-                            res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
-                        const tokens: any =
-                            channelData
-                                ?.map(
-                                    (u: any) =>
-                                        u?.user?.tokens
-                                            ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
-                                            ?.map((et: any) => et?.token) ?? [],
-                                )
-                                ?.flat(1)
-                                ?.filter((t: any) => t)
-                                ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
-                        console.log('expo to', JSON.stringify(tokens));
-                        if (tokens?.length > 0) {
-                            const to: any = tokens?.length > 0 ? tokens : [];
-
-                            sendPushNotification(title, body, notificationData, to);
-                        }
-                    }
+    const handleSend = useCallback(
+        async (message: string) => {
+            if (!channelId) return;
+            if (!message && message != ' ' && images.length == 0) return;
+
+            if (images && images.length > 0) {
+                const postId: any = mongooseObjectId?.getNewMongooseObjectId;
+                setLoading(true);
+                const uploadResponse = await startUpload({
+                    file: images,
+                    saveUploadedFile: {
+                        variables: {
+                            postId,
+                        },
+                    },
+                    createUploadLink: {
+                        variables: {
+                            postId,
+                        },
+                    },
                 });
-            },
-        });
-        if (images && images.length > 0 && data?.sendMessage?.id) {
-            const { id: postId } = data.sendMessage;
-            setLoading(true);
-            const uploadResponse = await startUpload({
-                file: images,
-                saveUploadedFile: {
+                if (uploadResponse?.error) setLoading(false);
+                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+
+                if (uploadResponse.data) {
+                    setImage('');
+                    setFiles([]);
+                    setImages([]);
+                    //setLoading(false);
+                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
+                    await sendMsg({
+                        variables: {
+                            postId,
+                            channelId,
+                            content: message,
+                            files,
+                        },
+                        update: (cache, { data, errors }: any) => {
+                            if (!data || errors) {
+                                setLoading(false);
+                                return;
+                            }
+                            // setChannelMessages((messages: any) => [
+                            //     ...messages,
+                            //     {
+                            //         ...data?.sendMessage,
+                            //         files: {
+                            //             totalCount: uploadedFiles.length,
+                            //             data: uploadedFiles,
+                            //         },
+                            //     },
+                            // ]);
+                            // setTotalCount((t: any) => t + 1);
+                            setChannelToTop(channelToTop + 1);
+                            setLoading(false);
+                            setMsg('');
+                            const msg = message == '' ? 'Send a file' : message;
+                            fetchTokenAndSendPushNotification(msg, channelId);
+                        },
+                    });
+                }
+            } else {
+                setLoading(true);
+                await sendMsg({
                     variables: {
-                        postId,
+                        channelId,
+                        content: message,
                     },
-                },
-                createUploadLink: {
-                    variables: {
-                        postId,
+                    update: (cache, { data, errors }: any) => {
+                        if (!data || errors) {
+                            setLoading(false);
+                            return;
+                        }
+                        // setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
+                        // setTotalCount((t: any) => t + 1);
+                        setChannelToTop(channelToTop + 1);
+                        setLoading(false);
+                        setMsg('');
+                        fetchTokenAndSendPushNotification(message, channelId);
                     },
-                },
-            });
-            if (uploadResponse?.error) setLoading(false);
-            const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-            if (uploadResponse.data) {
-                setImage('');
-                setFiles([]);
-                setImages([]);
-                setLoading(false);
+                });
             }
-            setChannelMessages((messages: any) =>
-                messages.map((message: any) => {
-                    if (message.id === postId) {
-                        return {
-                            ...message,
-                            files: {
-                                totalCount: uploadedFiles.length,
-                                data: uploadedFiles,
-                            },
-                        };
-                    }
-                    return message;
-                }),
-            );
-        }
+        },
+        [mongooseObjectId, setChannelMessages, channelId, images, channelToTop, expoTokens],
+    );
+
+    const fetchTokenAndSendPushNotification = (message: any, channelId: any) => {
+        const givenName = auth?.profile?.given_name ?? '';
+        const familyName = auth?.profile?.family_name ?? '';
+        const fullName = givenName ? givenName + ' ' + familyName : '';
+        const title: String = fullName ? fullName : 'Message';
+        const body: String = message;
+        const notificationData: any = {
+            url: config.INBOX_MESSEGE_PATH,
+            params: { channelId, hideTabBar: true },
+            screen: 'DialogMessages',
+        };
+        refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
+            if (res?.data?.viewChannelDetail?.members?.length) {
+                const channelData: any =
+                    res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
+                const tokens: any =
+                    channelData
+                        ?.map(
+                            (u: any) =>
+                                u?.user?.tokens
+                                    ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
+                                    ?.map((et: any) => et?.token) ?? [],
+                        )
+                        ?.flat(1)
+                        ?.filter((t: any) => t)
+                        ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
+                console.log('expo to', JSON.stringify(tokens));
+                if (tokens?.length > 0) {
+                    const to: any = tokens?.length > 0 ? tokens : [];
+                    sendPushNotification(title, body, notificationData, to);
+                }
+            }
+        });
     };
 
+    // const handleSend1 = async (message: string) => {
+    //     if (!channelId) return;
+    //     if (!message && message != ' ' && images.length == 0) return;
+
+    //     setLoading(true);
+    //     const { data } = await sendMsg({
+    //         variables: {
+    //             channelId,
+    //             content: message,
+    //         },
+    //         update: (cache, { data, errors }: any) => {
+    //             if (!data || errors) {
+    //                 setLoading(false);
+    //                 return;
+    //             }
+    //             setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
+    //             setTotalCount((t: any) => t + 1);
+    //             setChannelToTop(channelToTop + 1);
+    //             setLoading(false);
+    //             setMsg('');
+    //             const givenName = auth?.profile?.given_name ?? '';
+    //             const familyName = auth?.profile?.family_name ?? '';
+    //             const fullName = givenName ? givenName + ' ' + familyName : '';
+    //             const title: String = fullName ? fullName : 'Message';
+    //             const body: String = message;
+    //             const notificationData: any = {
+    //                 url: config.INBOX_MESSEGE_PATH,
+    //                 params: { channelId, hideTabBar: true },
+    //                 screen: 'DialogMessages',
+    //             };
+    //             refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
+    //                 if (res?.data?.viewChannelDetail?.members?.length) {
+    //                     const channelData: any =
+    //                         res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
+    //                     const tokens: any =
+    //                         channelData
+    //                             ?.map(
+    //                                 (u: any) =>
+    //                                     u?.user?.tokens
+    //                                         ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
+    //                                         ?.map((et: any) => et?.token) ?? [],
+    //                             )
+    //                             ?.flat(1)
+    //                             ?.filter((t: any) => t)
+    //                             ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
+    //                     console.log('expo to', JSON.stringify(tokens));
+    //                     if (tokens?.length > 0) {
+    //                         const to: any = tokens?.length > 0 ? tokens : [];
+
+    //                         sendPushNotification(title, body, notificationData, to);
+    //                     }
+    //                 }
+    //             });
+    //         },
+    //     });
+    //     if (images && images.length > 0 && data?.sendMessage?.id) {
+    //         const { id: postId } = data.sendMessage;
+    //         setLoading(true);
+    //         const uploadResponse = await startUpload({
+    //             file: images,
+    //             saveUploadedFile: {
+    //                 variables: {
+    //                     postId,
+    //                 },
+    //             },
+    //             createUploadLink: {
+    //                 variables: {
+    //                     postId,
+    //                 },
+    //             },
+    //         });
+    //         if (uploadResponse?.error) setLoading(false);
+    //         const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+    //         if (uploadResponse.data) {
+    //             setImage('');
+    //             setFiles([]);
+    //             setImages([]);
+    //             setLoading(false);
+    //         }
+    //         setChannelMessages((messages: any) =>
+    //             messages.map((message: any) => {
+    //                 if (message.id === postId) {
+    //                     return {
+    //                         ...message,
+    //                         files: {
+    //                             totalCount: uploadedFiles.length,
+    //                             data: uploadedFiles,
+    //                         },
+    //                     };
+    //                 }
+    //                 return message;
+    //             }),
+    //         );
+    //     }
+    // };
+
     const messageList = useMemo(() => {
         let currentDate = '';
         let res: any = [];
@@ -546,6 +761,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
                     (message.received = msg?.isRead);
                 message.type = msg?.type;
                 message.propsConfiguration = msg?.propsConfiguration;
+                message.replies = msg?.replies ?? [];
                 res.push(message);
             });
         }
@@ -569,6 +785,8 @@ const ConversationViewComponent = ({ channelId }: any) => {
 
     const renderMessageText = (props: any) => {
         const { currentMessage } = props;
+        const lastReply: any = currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
+
         if (currentMessage.type === 'ALERT') {
             const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
             let action: string = '';
@@ -600,7 +818,60 @@ const ConversationViewComponent = ({ channelId }: any) => {
                 </Box>
             );
         } else {
-            return <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />;
+            return (
+                <TouchableHighlight
+                    underlayColor={'#c0c0c0'}
+                    style={{ width: '100%' }}
+                    onPress={() =>
+                        navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                            channelId: channelId,
+                            title: 'Message',
+                            postParentId: currentMessage?._id,
+                            isPostParentIdThread: true,
+                        })
+                    }
+                >
+                    <>
+                        <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                        {currentMessage?.replies?.data?.length > 0 && (
+                            <HStack space={1} px={1} alignItems={'center'}>
+                                <HStack>
+                                    {currentMessage?.replies?.data
+                                        ?.filter(
+                                            (v: any, i: any, a: any) =>
+                                                a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
+                                        )
+                                        ?.slice(0, 2)
+                                        ?.reverse()
+                                        ?.map((p: any, i: Number) => (
+                                            <Avatar
+                                                key={'key' + i}
+                                                bg={'transparent'}
+                                                size={6}
+                                                // top={i == 1 ? 4 : 0}
+                                                // right={i == 1 ? -2 : 0}
+                                                // zIndex={i == 1 ? 5 : 1}
+                                                _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                                source={{
+                                                    uri: p?.author?.picture,
+                                                }}
+                                            >
+                                                {startCase(p?.author?.username?.charAt(0))}
+                                            </Avatar>
+                                        ))}
+                                </HStack>
+                                <Text fontSize={12} fontWeight={'bold'} color={'blue.800'}>
+                                    {currentMessage?.replies?.totalCount}{' '}
+                                    {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                </Text>
+                                <Text fontSize={12} fontWeight={'bold'} color={'gray.500'}>
+                                    {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                </Text>
+                            </HStack>
+                        )}
+                    </>
+                </TouchableHighlight>
+            );
         }
     };
 
@@ -682,13 +953,13 @@ const ConversationViewComponent = ({ channelId }: any) => {
 
     let onScroll = false;
 
-    const onEndReached = () => {
-        console.log('on end reached');
-        if (!onScroll) return;
-        // load messages, show ActivityIndicator
-        onScroll = false;
-        // setLoadingOldMessages(true);
-    };
+    // const onEndReached = () => {
+    //     console.log('on end reached');
+    //     if (!onScroll) return;
+    //     // load messages, show ActivityIndicator
+    //     onScroll = false;
+    //     // setLoadingOldMessages(true);
+    // };
 
     // const onMomentumScrollBegin = useCallback(
     //     ({ nativeEvent }: any) => {
@@ -703,21 +974,22 @@ const ConversationViewComponent = ({ channelId }: any) => {
     //     [loadingOldMessages, channelMessages],
     // );
 
-    const onMomentumScrollBegin = ({ nativeEvent }: any) => {
-        onScroll = true;
-        console.log('scroll top');
-        if (
-            !loadingOldMessages &&
-            (channelMessages?.length <= 10 || isCloseToTop(nativeEvent)) &&
-            channelMessages?.length != totalCount
-        ) {
-            onFetchOld();
-        }
-    };
+    // const onMomentumScrollBegin = ({ nativeEvent }: any) => {
+    //     onScroll = true;
+    //     console.log('scroll top');
+    //     if (
+    //         !loadingOldMessages &&
+    //         (channelMessages?.length <= 10 || isCloseToTop(nativeEvent)) &&
+    //         channelMessages?.length != totalCount
+    //     ) {
+    //         onFetchOld();
+    //     }
+    // };
 
     return (
         <>
-            {loadingOldMessages && <Spinner />}
+            {loadEarlierMsg && <Spinner />}
+
             <GiftedChat
                 wrapInSafeArea={false}
                 renderLoading={() => <Spinner />}
@@ -726,7 +998,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
                 //     onEndReached: onEndReached,
                 //     onEndReachedThreshold: 0.5,
                 //     onMomentumScrollBegin: onMomentumScrollBegin,
-                // }}////
+                // }}
                 // listViewProps={{
                 //     scrollEventThrottle: 400,
                 //     onScroll: ({ nativeEvent }) => { console.log('scroll')
@@ -746,13 +1018,25 @@ const ConversationViewComponent = ({ channelId }: any) => {
                 }}
                 isTyping={true}
                 alwaysShowSend={loading ? false : true}
-                onLoadEarlier={onFetchOld}
-                infiniteScroll={true}
+                //onLoadEarlier={onFetchOld}
+                //infiniteScroll={true}
                 renderSend={renderSend}
                 loadEarlier={data?.messages?.totalCount > channelMessages.length}
-                //isLoadingEarlier={isLoadingEarlier}
+                isLoadingEarlier={loadEarlierMsg}
                 //extraData={{ isLoadingEarlier: loadingOldMessages }}
-                //renderLoadEarlier={() => <Spinner />}}
+                renderLoadEarlier={() =>
+                    !loadEarlierMsg && (
+                        <Center py={2}>
+                            <Button
+                                onPress={() => onFetchOld(data, channelMessages)}
+                                variant={'outline'}
+                                _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
+                            >
+                                Load earlier messages
+                            </Button>
+                        </Center>
+                    )
+                }
                 renderMessageText={renderMessageText}
                 minInputToolbarHeight={50}
                 renderActions={renderActions}