Merge pull request #764 from GetStream/fix-reconnect-removing-messages

fix: Fix messages disappearing on reconnect
GetStream · Jul 22, 2021 · dc0fc3d · dc0fc3d
2 parents 9c2d947 + 2392952
commit dc0fc3d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 42 deletions.
diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock
@@ -706,9 +706,9 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: e92e80c70dfd2f0b040ecc050b354d853f784780
+  FBReactNativeSpec: 9fc430e51b1638f54c19c48123394b806d9483a5
   Firebase: 73c3e3b216ec1ecbc54d2ffdd4670c65c749edb1
   FirebaseAnalytics: dcb92c7c9ef4fa7ffac276e8f87bd4fc8c97f1b8
   FirebaseAppDistribution: 6b9a20f093001a1be1ec78e0687a6b3750f75e35
@@ -723,7 +723,7 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
-  glog: 2ad46e202fbaa5641fceb4b2af37dcd88fd8762d
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   GoogleAppMeasurement: c6bbc9753d046b5456dd4f940057fbad2c28419e
   GoogleDataTransport: 11e3a5f2c190327df1a4a5d7e7ae3d4d5b9c9e4c
   GoogleUtilities: f8a43108b38a68eebe8b3540e1f4f2d28843ce20
@@ -732,7 +732,7 @@ SPEC CHECKSUMS:
   nanopb: a0ba3315591a9ae0a16a309ee504766e90db0c96
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97
-  RCT-Folly: 91521e05ace43e89980cabd1fb54685f7827ddb9
+  RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: ec2ebc96b7bfba3ca5c32740f5a0c6a014a274d2
   RCTTypeSafety: 22567f31e67c3e088c7ac23ea46ab6d4779c0ea5
   React: a241e3dbb1e91d06332f1dbd2b3ab26e1a4c4b9d

diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -681,6 +681,9 @@ const ChannelWithContext = <
   const connectionRecoveredHandler = () => {
     if (channel) {
       copyChannelState();
+      if (thread) {
+        setThreadMessages([...channel.state.threads[thread.id]]);
+      }
     }
   };
 
@@ -863,6 +866,30 @@ const ChannelWithContext = <
       return;
     });
 
+  const reloadThread = async () => {
+    if (!channel || !thread?.id) return;
+
+    setThreadLoadingMore(true);
+    try {
+      const parentID = thread.id;
+
+      const limit = 50;
+      channel.state.threads[parentID] = [];
+      const queryResponse = await channel.getReplies(parentID, {
+        limit: 50,
+      });
+
+      const updatedHasMore = queryResponse.messages.length === limit;
+      const updatedThreadMessages = channel.state.threads[parentID] || [];
+      loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
+    } catch (err) {
+      console.warn('Thread loading request failed with error', err);
+      setError(err);
+      setThreadLoadingMore(false);
+      throw err;
+    }
+  };
+
   const resyncChannel = async () => {
     if (!channel) return;
 
@@ -899,6 +926,22 @@ const ChannelWithContext = <
         return;
       }
 
+      const parseMessage = (message: typeof oldListTopMessage) =>
+        ({
+          ...message,
+          created_at: message.created_at.toString(),
+          pinned_at: message.pinned_at?.toString(),
+          updated_at: message.updated_at?.toString(),
+        } as unknown as MessageResponse<At, Ch, Co, Me, Re, Us>);
+
+      const failedMessages = messages
+        .filter((message) => message.status === 'failed')
+        .map(parseMessage);
+
+      const failedThreadMessages = thread
+        ? threadMessages.filter((message) => message.status === 'failed').map(parseMessage)
+        : [];
+
       const oldListTopMessageCreatedAt = oldListTopMessage.created_at;
       const oldListBottomMessageCreatedAt = oldListBottomMessage.created_at;
       const newListTopMessageCreatedAt = newListTopMessage.created_at
@@ -927,8 +970,21 @@ const ChannelWithContext = <
 
       channel.state.clearMessages();
       channel.state.addMessagesSorted(finalMessages);
+
       setHasMore(true);
       copyChannelState();
+
+      if (failedMessages.length) {
+        channel.state.addMessagesSorted(failedMessages);
+        copyChannelState();
+      }
+
+      await reloadThread();
+
+      if (thread && failedThreadMessages.length) {
+        channel.state.addMessagesSorted(failedThreadMessages);
+        setThreadMessages([...channel.state.threads[thread.id]]);
+      }
     } catch (err) {
       setError(err);
       setLoading(false);
@@ -1455,30 +1511,6 @@ const ChannelWithContext = <
       }
     };
 
-  const reloadThread = async () => {
-    if (!channel || !thread?.id) return;
-
-    setThreadLoadingMore(true);
-    try {
-      const parentID = thread.id;
-
-      const limit = 50;
-      channel.state.threads[parentID] = [];
-      const queryResponse = await channel.getReplies(parentID, {
-        limit: 50,
-      });
-
-      const updatedHasMore = queryResponse.messages.length === limit;
-      const updatedThreadMessages = channel.state.threads[parentID] || [];
-      loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-    } catch (err) {
-      console.warn('Thread loading request failed with error', err);
-      setError(err);
-      setThreadLoadingMore(false);
-      throw err;
-    }
-  };
-
   const channelContext = useCreateChannelContext({
     ...channelConfig,
     channel,

diff --git a/package/src/components/Thread/Thread.tsx b/package/src/components/Thread/Thread.tsx
@@ -82,12 +82,10 @@ const ThreadWithContext = <
     additionalMessageInputProps,
     additionalMessageListProps,
     autoFocus = true,
-    client,
     closeThread,
     closeThreadOnDismount = true,
     disabled,
     loadMoreThread,
-    reloadThread,
     MessageInput = DefaultMessageInput,
     MessageList,
     onThreadDismount,
@@ -102,18 +100,6 @@ const ThreadWithContext = <
     if (thread?.id && thread.reply_count) {
       loadMoreThreadAsync();
     }
-
-    const recoveredHandler = client.on('connection.recovered', reloadThread);
-    const changedHandler = client.on('connection.changed', (event) => {
-      if (event.online) {
-        reloadThread();
-      }
-    });
-
-    return () => {
-      recoveredHandler.unsubscribe();
-      changedHandler.unsubscribe();
-    };
   }, []);
 
   useEffect(