Merge pull request #7 from AmityCo/fix/asc-24627-duplicate-message-in…

…-rte fix: ASC-24627 - duplicate message in rte
AmityCo · Jul 31, 2024 · e050916 · e050916
2 parents 8552fa2 + b005124
commit e050916
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -174,7 +174,7 @@
     ]
   },
   "dependencies": {
-    "@amityco/ts-sdk-react-native": "^6.24.1",
+    "@amityco/ts-sdk-react-native": "^6.29.1",
     "@reduxjs/toolkit": "^2.2.5",
     "i18next": "22.4.10",
     "moment": "2.29.4",

diff --git a/src/screens/ChatRoom/ChatRoom.tsx b/src/screens/ChatRoom/ChatRoom.tsx
@@ -1,6 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react-native/no-inline-styles */
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+  useCallback,
+} from 'react';
 import {
   View,
   Image,
@@ -17,7 +23,11 @@ import {
 import ImageView from 'react-native-image-viewing';
 import CustomText from '../../components/CustomText';
 import { useStyles } from './styles';
-import { type RouteProp, useNavigation } from '@react-navigation/native';
+import {
+  type RouteProp,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native';
 import type { RootStackParamList } from '../../routes/RouteParamList';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -27,8 +37,6 @@ import {
   MessageContentType,
   MessageRepository,
   SubChannelRepository,
-  getSubChannelTopic,
-  subscribeTopic,
 } from '@amityco/ts-sdk-react-native';
 import useAuth from '../../hooks/useAuth';
 
@@ -122,15 +130,10 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [visibleFullImage, setIsVisibleFullImage] = useState<boolean>(false);
   const [fullImage, setFullImage] = useState<string>('');
-  const [subChannelData, setSubChannelData] = useState<Amity.SubChannel>();
   const [displayImages, setDisplayImages] = useState<IDisplayImage[]>([]);
   const [editMessageModal, setEditMessageModal] = useState<boolean>(false);
   const [editMessageId, setEditMessageId] = useState<string>('');
   const [editMessageText, setEditMessageText] = useState<string>('');
-  const disposers: Amity.Unsubscriber[] = [];
-
-  const subscribeSubChannel = (subChannel: Amity.SubChannel) =>
-    disposers.push(subscribeTopic(getSubChannelTopic(subChannel)));
 
   useEffect(() => {
     const currentChannel = channelList.find(
@@ -143,18 +146,6 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
     });
   }, [channelList]);
 
-  useEffect(() => {
-    if (channelId) {
-      SubChannelRepository.getSubChannel(channelId, ({ data: subChannel }) => {
-        setSubChannelData(subChannel);
-      });
-    }
-    return () => {
-      disposers.forEach((fn) => fn());
-      stopRead();
-    };
-  }, [channelId]);
-
   const startRead = async () => {
     await SubChannelRepository.startMessageReceiptSync(channelId);
   };
@@ -167,27 +158,33 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
     return user;
   };
 
-  useEffect(() => {
-    if (subChannelData && channelId) {
+  useFocusEffect(
+    useCallback(() => {
+      let disposers: Amity.Unsubscriber[] = [];
       startRead();
 
-      const unsubscribe = 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();
+      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();
+            }
+            setMessagesData(value);
           }
-          setMessagesData(value);
-          subscribeSubChannel(subChannelData as Amity.SubChannel);
-        }
+        )
       );
-      disposers.push(() => unsubscribe);
-    }
-  }, [subChannelData]);
+
+      return () => {
+        disposers.forEach((fn) => fn());
+        stopRead();
+      };
+    }, [channelId])
+  );
 
   const chatFormatter = async () => {
     if (messagesArr.length > 0) {
@@ -283,11 +280,6 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
     }
   };
 
-  function handleBack(): void {
-    disposers.forEach((fn) => fn());
-    stopRead();
-  }
-
   const loadNextMessages = () => {
     if (flatListRef.current && hasNextPage && onNextPage) {
       onNextPage();
@@ -647,9 +639,7 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
       <SafeAreaView style={styles.topBarContainer} edges={['top']}>
         <View style={styles.topBar}>
           <View style={styles.chatTitleWrap}>
-            <TouchableOpacity onPress={handleBack}>
-              <BackButton onPress={handleBack} />
-            </TouchableOpacity>
+            <BackButton />
 
             {chatReceiver ? (
               chatReceiver?.avatarFileId ? (

diff --git a/yarn.lock b/yarn.lock
@@ -43,7 +43,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@amityco/react-native-cli-chat-ui-kit@workspace:."
   dependencies:
-    "@amityco/ts-sdk-react-native": ^6.24.1
+    "@amityco/ts-sdk-react-native": ^6.29.1
     "@commitlint/config-conventional": ^17.0.2
     "@evilmartians/lefthook": ^1.5.0
     "@react-native-async-storage/async-storage": ^1.22.3
@@ -98,9 +98,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@amityco/ts-sdk-react-native@npm:^6.24.1":
-  version: 6.24.1
-  resolution: "@amityco/ts-sdk-react-native@npm:6.24.1"
+"@amityco/ts-sdk-react-native@npm:^6.29.1":
+  version: 6.29.1
+  resolution: "@amityco/ts-sdk-react-native@npm:6.29.1"
   dependencies:
     "@react-native-async-storage/async-storage": ^1.17.7
     "@react-native-community/netinfo": ^9.4.1
@@ -109,6 +109,7 @@ __metadata:
     debug: ^4.3.4
     hls.js: ^1.4.10
     js-base64: ^3.7.2
+    mime: 3.0.0
     mitt: ^3.0.0
     mqtt: ^4.3.7
     object-hash: ^3.0.0
@@ -117,7 +118,7 @@ __metadata:
     ts-jest: ^28.0.3
   peerDependencies:
     react-native: ^0.70.13
-  checksum: 08b6ab03ed8f334c143385111c34664ddc903073a4a27df35cff48a85a8dd0c92255064ecaa02bc0f44cb02905ab22d811fa90dba282ee544dee900b0f5476e9
+  checksum: f72199cb7a17a66bca4ae4971bb7f8c9b8215511d6f77ea4e6f92e9cffb436004d0dd8ba65f8eda22d4e2e38634cfa374ca18cb798183813dd03359b6d22312c
   languageName: node
   linkType: hard
 
@@ -10435,6 +10436,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:3.0.0":
+  version: 3.0.0
+  resolution: "mime@npm:3.0.0"
+  bin:
+    mime: cli.js
+  checksum: f43f9b7bfa64534e6b05bd6062961681aeb406a5b53673b53b683f27fcc4e739989941836a355eef831f4478923651ecc739f4a5f6e20a76487b432bfd4db928
+  languageName: node
+  linkType: hard
+
 "mime@npm:^2.4.1":
   version: 2.6.0
   resolution: "mime@npm:2.6.0"