Merge pull request #446 from GetStream/vishal/channel-list-fix1

Updates/fixes around 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 calling 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(

src/components/MessageList/MessageList.tsx

@@ -42,7 +42,6 @@ import {
   ThreadContextValue,
   useThreadContext,
 } from '../../contexts/threadContext/ThreadContext';
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { styled } from '../../styles/styledComponents';
 
 import type { UserResponse } from 'stream-chat';
@@ -61,20 +60,7 @@ import type {
   UnknownType,
 } from '../../types/types';
 
-const ErrorNotification = styled.View`
-  align-items: center;
-  background-color: #fae6e8;
-  color: red;
-  padding: 5px;
-  z-index: 10;
-  ${({ theme }) => theme.messageList.errorNotification.css}
-`;
-
-const ErrorNotificationText = styled.Text`
-  background-color: #fae6e8;
-  color: red;
-  ${({ theme }) => theme.messageList.errorNotificationText.css}
-`;
+import { NetworkDownIndicator as DefaultNetworkDownIndicator } from './NetworkDownIndicator';
 
 const ListContainer = (styled(FlatList)`
   flex: 1;
@@ -185,6 +171,12 @@ export type MessageListProps<
   MessageSystem?: React.ComponentType<
     MessageSystemProps<At, Ch, Co, Ev, Me, Re, Us>
   >;
+  /**
+   * Custom UI component to render network down indicator
+   *
+   * Defaults to and accepts same props as: [NetworkDownIndicator](https://getstream.github.io/stream-chat-react-native/#NetworkDownIndicator)
+   */
+  NetworkDownIndicator?: React.ComponentType;
   /** Turn off grouping of messages by user */
   noGroupByUser?: boolean;
   onListScroll?: ScrollViewProps['onScroll'];
@@ -261,6 +253,7 @@ export const MessageList = <
     onThreadSelect,
     setFlatListRef,
     threadList,
+    NetworkDownIndicator = DefaultNetworkDownIndicator,
     TypingIndicator = DefaultTypingIndicator,
   } = props;
 
@@ -280,7 +273,6 @@ export const MessageList = <
     Message: MessageFromContext,
   } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { loadMoreThread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { t } = useTranslationContext();
 
   const messageList = useMessageList<At, Ch, Co, Ev, Me, Re, Us>({
     inverted,
@@ -455,13 +447,7 @@ export const MessageList = <
             showNotification={newMessagesNotification}
           />
         )}
-        {!isOnline && (
-          <ErrorNotification testID='error-notification'>
-            <ErrorNotificationText>
-              {t('Connection failure, reconnecting now ...')}
-            </ErrorNotificationText>
-          </ErrorNotification>
-        )}
+        {!isOnline && <NetworkDownIndicator />}
       </View>
       {
         // Mask for edit state

src/components/MessageList/NetworkDownIndicator.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { styled } from '../../styles/styledComponents';
+
+const ErrorNotification = styled.View`
+  align-items: center;
+  background-color: #fae6e8;
+  color: red;
+  padding: 5px;
+  z-index: 10;
+  ${({ theme }) => theme.messageList.errorNotification.css}
+`;
+
+const ErrorNotificationText = styled.Text`
+  background-color: #fae6e8;
+  color: red;
+  ${({ theme }) => theme.messageList.errorNotificationText.css}
+`;
+
+export const NetworkDownIndicator = () => {
+  const { t } = useTranslationContext();
+  return (
+    <ErrorNotification testID='error-notification'>
+      <ErrorNotificationText>
+        {t('Connection failure, reconnecting now ...')}
+      </ErrorNotificationText>
+    </ErrorNotification>
+  );
+};