Fixing channellist network recovery

Author: vishalnarkhede

src/components/Attachment/Gallery.tsx

@@ -143,9 +143,9 @@ export const Gallery = <At extends UnknownType = DefaultAttachmentType>(
   const immutableGalleryImages = images.reduce((returnArray, currentImage) => {
     const url = currentImage.image_url || currentImage.thumb_url;
     if (url) {
-      returnArray.push({ url: makeImageCompatibleUrl(url) } as Immutable<
-        IImageInfo
-      >);
+      returnArray.push({
+        url: makeImageCompatibleUrl(url),
+      } as Immutable<IImageInfo>);
     }
     return returnArray;
   }, [] as Immutable<IImageInfo>[]);

src/components/ChannelList/ChannelList.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import {
   ChannelListMessenger,
@@ -306,6 +306,11 @@ export const ChannelList = <
     sort,
   });
 
+  useEffect(() => {
+    // TODO: Use sync api endpoint to refresh the list, instead of caliing queryChannels.
+    refreshList();
+  }, [forceUpdate]);
+
   // Setup event listeners
   useAddedToChannelNotification({
     onAddedToChannel,

src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -78,7 +78,7 @@ export const usePaginatedChannels = <
 
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset: queryType === 'reload' ? 0 : offset,
+      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : offset,
       ...options,
     };
 
@@ -90,7 +90,7 @@ export const usePaginatedChannels = <
       );
 
       let newChannels;
-      if (queryType === 'reload') {
+      if (queryType === 'reload' || queryType === 'refresh') {
         newChannels = channelQueryResponse;
       } else {
         newChannels = [...channels, ...channelQueryResponse];

src/components/ChannelPreview/ChannelPreview.tsx

@@ -54,7 +54,7 @@ const UnMemoizedChannelPreview = <
 >(
   props: ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { channel, Preview = ChannelPreviewMessenger } = props;
+  const { channel, forceUpdate, Preview = ChannelPreviewMessenger } = props;
 
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
 
@@ -88,6 +88,10 @@ const UnMemoizedChannelPreview = <
     };
   }, []);
 
+  useEffect(() => {
+    setUnread(channel.countUnread());
+  }, [forceUpdate]);
+
   useEffect(() => {
     const handleReadEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
       if (event.user?.id === client.userID) {
@@ -124,7 +128,9 @@ const areEqual = <
   const { last_message_at: previousLast } = prevProps.channel.state;
   const { last_message_at: nextLast } = nextProps.channel.state;
 
-  return previousLast === nextLast;
+  return (
+    previousLast === nextLast && prevProps.forceUpdate === nextProps.forceUpdate
+  );
 };
 
 export const ChannelPreview = React.memo(