Merge pull request #10 from AmityCo/feat/asc-22764-show-alert-block-l…

…ist-and-link

feat: ASC-22764 - filter out unsynced message from message list

src/routes/ChatNavigator.tsx

@@ -14,7 +14,6 @@ import { ChatRoomSetting } from '../screens/ChatDetail/ChatRoomSetting';
 import { EditChatRoomDetail } from '../screens/EditChatDetail/EditChatRoomDetail';
 import MemberDetail from '../screens/MemberDetail/MemberDetail';
 import ChatRoom from '../screens/ChatRoom/ChatRoom';
-import useAuth from '../hooks/useAuth';
 
 export default function ChatNavigator() {
   const Stack = createNativeStackNavigator<RootStackParamList>();

src/screens/ChatRoom/ChatRoom.tsx

@@ -166,15 +166,22 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
       disposers.push(
         MessageRepository.getMessages(
           { subChannelId: channelId, limit: 10, includeDeleted: true },
-          (value) => {
-            const messages = value.data;
-
-            // mark the last message as read
-            if (messages.length > 0) {
-              const lastMessage = messages[0];
-              lastMessage.markRead();
+          ({ data: messages, loading, error }) => {
+            if (!loading && messages) {
+              // filter syned message since UIKIT did not support unsync message yet
+              const syncedMessages = messages.filter(
+                (message) =>
+                  !message.syncState || message.syncState === 'synced'
+              );
+
+              // mark the last message as read
+              if (syncedMessages.length > 0) {
+                const lastMessage = messages[0];
+                lastMessage.markRead();
+              }
+
+              setMessagesData({ data: syncedMessages, loading, error });
             }
-            setMessagesData(value);
           }
         )
       );

src/screens/RecentChat/RecentChat.tsx

@@ -9,7 +9,7 @@ import ChatList, {
 } from '../../components/ChatList/index';
 import useAuth from '../../hooks/useAuth';
 import { useEffect, useState } from 'react';
-import moment, { locale } from 'moment';
+import moment from 'moment';
 
 import { useStyles } from './styles';
 import CustomText from '../../components/CustomText';