MRN-880

Author: karthikeyan-se-contus

src/components/ConversationList.js

@@ -19,6 +19,7 @@ import { getCurrentUserJid } from '../uikitMethods';
 import ChatMessage from './ChatMessage';
 import store from '../redux/store';
 import { highlightMessage } from '../redux/chatMessageDataSlice';
+import { getMergedMediaMessages } from '../hooks/useMediaMessaegs';
 
 export const conversationFlatListRef = createRef();
 conversationFlatListRef.current = {};
@@ -46,6 +47,7 @@ const ConversationList = ({ chatUser }) => {
          setChatLoading(false);
       };
       initialize();
+      getMergedMediaMessages(chatUser);
    }, [chatUser]);
 
    // Monitor new messages and update counter

src/hooks/useMediaMessaegs.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { getUserIdFromJid } from '../helpers/chatHelpers';
-import { useMediaMessages } from '../redux/reduxHook';
+import { getMediaMessages, useMediaMessages } from '../redux/reduxHook';
 import SDK from '../SDK/SDK';
 
 const cache = {};
@@ -21,7 +21,7 @@ export const useMergedMediaMessages = (jid, mediaTypeArr = []) => {
          setFetchedMediaMessages(cache[cacheKey]);
          return;
       }
-      const getMediaMessages = async () => {
+      const getMediaMessage = async () => {
          if (!userId) {
             return;
          }
@@ -37,7 +37,7 @@ export const useMergedMediaMessages = (jid, mediaTypeArr = []) => {
          setIsLoading(false);
       };
 
-      getMediaMessages();
+      getMediaMessage();
    }, [userId]);
 
    // Memoized merged media messages
@@ -73,3 +73,34 @@ export const useMergedMediaMessages = (jid, mediaTypeArr = []) => {
 
    return { mergedMediaMessages, isLoading };
 };
+
+export const getMergedMediaMessages = async (jid, mediaTypeArr = []) => {
+   const userId = getUserIdFromJid(jid);
+   const cacheKey = `${jid}-${mediaTypeArr.join(',')}`;
+
+   // Get media messages from Redux
+   const stateMediaMessages = getMediaMessages(userId, mediaTypeArr);
+   const fetchedData = await SDK.getMediaMessages({ jid, messageTypes: mediaTypeArr });
+   const fetchedMessagesMap = fetchedData?.data ? { ...fetchedData.data } : {};
+
+   stateMediaMessages.forEach(stateMsg => {
+      if (fetchedMessagesMap[stateMsg.msgId]) {
+         fetchedMessagesMap[stateMsg.msgId] = {
+            ...fetchedMessagesMap[stateMsg.msgId],
+            ...stateMsg,
+            msgBody: {
+               ...fetchedMessagesMap[stateMsg.msgId].msgBody,
+               ...stateMsg.msgBody,
+               media: {
+                  ...fetchedMessagesMap[stateMsg.msgId].msgBody?.media,
+                  ...stateMsg.msgBody?.media,
+               },
+            },
+         };
+      } else {
+         fetchedMessagesMap[stateMsg.msgId] = stateMsg;
+      }
+   });
+
+   cache[cacheKey] = Object.values(fetchedMessagesMap);
+};

src/redux/reduxHook.js

@@ -134,3 +134,17 @@ export const getAnySelectedChatMessages = userId => {
    return messages.some(item => item.isSelected === 1);
 };
 export const getRoomLink = () => store.getState().callData?.connectionState?.roomLink;
+
+export const getMediaMessages = (userId, mediaTypeArr = []) => {
+   const state = store.getState();
+   const messages = state.chatMessagesData?.[userId] || [];
+
+   return messages.filter(
+      ({ msgBody: { message_type = '', media } = {}, deleteStatus, recallStatus }) =>
+         mediaTypeArr.includes(message_type) &&
+         deleteStatus === 0 &&
+         recallStatus === 0 &&
+         media?.is_downloaded === 2 &&
+         media?.is_uploading === 2,
+   );
+};

src/screens/PostPreViewPage.js

@@ -14,6 +14,7 @@ import { getCurrentUserJid } from '../uikitMethods';
 
 const PostPreViewPage = () => {
    const stringSet = getStringSet();
+   const pagerRef = React.useRef();
    const themeColorPalatte = useThemeColorPalatte();
    const { params: { jid = '', msgId = '' } = {} } = useRoute();
    const navigation = useNavigation();
@@ -40,7 +41,7 @@ const PostPreViewPage = () => {
    };
 
    const initialPage = React.useMemo(() => {
-      const selectedMsgIndex = messageList.findIndex(message => {
+      const selectedMsgIndex = messageList.reverse().findIndex(message => {
          return message.msgId === msgId;
       });
       setCurrentIndex(selectedMsgIndex);
@@ -49,7 +50,11 @@ const PostPreViewPage = () => {
 
    const renderMediaPages = React.useMemo(() => {
       return (
-         <PagerView style={commonStyles.flex1} initialPage={initialPage} onPageScroll={handlePageSelected}>
+         <PagerView
+            ref={pagerRef}
+            style={commonStyles.flex1}
+            initialPage={initialPage}
+            onPageScroll={handlePageSelected}>
             {messageList.map?.(item => (
                <PostView key={item.msgId} item={item} />
             ))}