fix: some miscellaneous cleanup

Author: vishalnarkhede

package/src/components/Attachment/GalleryImage.tsx

@@ -13,6 +13,8 @@ export type GalleryImageWithContextProps<
 export const GalleryImageWithContext: React.FC<GalleryImageWithContextProps> = (props) => {
   const { ImageComponent = Image, uri, ...rest } = props;
 
+  // Caching image components such as FastImage will not work with local images.
+  // This for the case of local uris, we use the default Image component.
   if (!isLocalUrl(uri)) {
     return (
       <ImageComponent

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
+import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
+
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
@@ -48,7 +50,7 @@ export const usePaginatedChannels = <
   const { client } = useChatContext<StreamChatGenerics>();
   const [channels, setChannels] = useState<Channel<StreamChatGenerics>[] | null>(null);
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
-
+  const activeChannels = useActiveChannelsRefContext();
   const [error, setError] = useState<Error>();
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
@@ -99,17 +101,17 @@ export const usePaginatedChannels = <
     };
 
     try {
-      const activeChannelIds = [];
+      const activeChannelIds: string[] = [];
       for (const cid in client.activeChannels) {
         if (client.activeChannels[cid].id) {
+          // @ts-ignore
           activeChannelIds.push(client.activeChannels[cid].id);
         }
       }
 
       // TODO: Think about the implications of this.
       const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {
-        // @ts-ignore
-        skipInitialization: activeChannelIds,
+        skipInitialization: enableOfflineSupport ? activeChannelIds : activeChannels.current,
       });
       if (isQueryStale() || !isMountedRef.current) {
         return;

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -128,7 +128,7 @@ type FileUploadPreviewPropsWithContext<
   'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads'
 > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'AudioAttachment' | 'FileAttachmentIcon'> &
-  Pick<ChatContextValue<StreamChatGenerics>, 'isOnline' | 'enableOfflineSupport'>;
+  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 const FileUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -140,7 +140,6 @@ const FileUploadPreviewWithContext = <
     enableOfflineSupport,
     FileAttachmentIcon,
     fileUploads,
-    isOnline,
     removeFile,
     setFileUploads,
     uploadFile,
@@ -215,7 +214,7 @@ const FileUploadPreviewWithContext = <
   } = useTheme();
 
   const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state, isOnline, enableOfflineSupport);
+    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
 
     const lastIndexOfDot = item.file.name.lastIndexOf('.');
 
@@ -393,7 +392,7 @@ export const FileUploadPreview = <
 >(
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, isOnline } = useChatContext<StreamChatGenerics>();
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
   const { AudioAttachment, FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
@@ -408,7 +407,7 @@ export const FileUploadPreview = <
         setFileUploads,
         uploadFile,
       }}
-      {...{ enableOfflineSupport, isOnline }}
+      {...{ enableOfflineSupport }}
       {...props}
     />
   );

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -80,7 +80,7 @@ type ImageUploadPreviewPropsWithContext<
   MessageInputContextValue<StreamChatGenerics>,
   'imageUploads' | 'removeImage' | 'uploadImage'
 > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'isOnline' | 'enableOfflineSupport'>;
+  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
 
 export type ImageUploadPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -93,7 +93,7 @@ const ImageUploadPreviewWithContext = <
 >(
   props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, imageUploads, isOnline, removeImage, uploadImage } = props;
+  const { enableOfflineSupport, imageUploads, removeImage, uploadImage } = props;
 
   const {
     theme: {
@@ -131,7 +131,7 @@ const ImageUploadPreviewWithContext = <
   };
 
   const renderItem = ({ index, item }: ImageUploadPreviewItem) => {
-    const indicatorType = getIndicatorTypeForFileState(item.state, isOnline, enableOfflineSupport);
+    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
     const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};
 
     return (
@@ -202,40 +202,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
-  const {
-    enableOfflineSupport: prevEnableOfflineSupport,
-    imageUploads: prevImageUploads,
-    isOnline: prevIsOnline,
-  } = prevProps;
-  const {
-    enableOfflineSupport: nextEnableOfflineSupport,
-    imageUploads: nextImageUploads,
-    isOnline: nextIsOnline,
-  } = nextProps;
-
-  const isOnlineEqual = prevIsOnline === nextIsOnline;
-
-  if (!isOnlineEqual) {
-    return false;
-  }
-
-  const enableOfflineSupportEqual = prevEnableOfflineSupport === nextEnableOfflineSupport;
-
-  if (!enableOfflineSupportEqual) {
-    return false;
-  }
+  const { imageUploads: prevImageUploads } = prevProps;
+  const { imageUploads: nextImageUploads } = nextProps;
 
-  const imageUploadsEqual =
+  return (
     prevImageUploads.length === nextImageUploads.length &&
     prevImageUploads.every(
       (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,
-    );
-
-  if (!imageUploadsEqual) {
-    return false;
-  }
-
-  return true;
+    )
+  );
 };
 
 const MemoizedImageUploadPreviewWithContext = React.memo(
@@ -251,13 +226,13 @@ export const ImageUploadPreview = <
 >(
   props: ImageUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { enableOfflineSupport, isOnline } = useChatContext<StreamChatGenerics>();
+  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();
 
   return (
     <MemoizedImageUploadPreviewWithContext
       {...{ imageUploads, removeImage, uploadImage }}
-      {...{ enableOfflineSupport, isOnline }}
+      {...{ enableOfflineSupport }}
       {...props}
     />
   );

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -491,21 +491,20 @@ export const MessageInputProvider = <
       return true;
     }
 
-    for (const image of imageUploads) {
-      if ((!image || image.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
-        continue;
-      }
-
-      if (image.state === FileState.UPLOADING) {
-        // TODO: show error to user that they should wait until image is uploaded
-        return false;
+    const imagesAndFiles = [...imageUploads, ...fileUploads];
+    if (enableOfflineSupport) {
+      // Allow only if none of the attachments have unsupported status
+      for (const file of imagesAndFiles) {
+        if (file.state === FileState.NOT_SUPPORTED) {
+          return false;
+        }
       }
 
       return true;
     }
 
-    for (const file of fileUploads) {
-      if ((!file || file.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
+    for (const file of imagesAndFiles) {
+      if (!file || file.state === FileState.UPLOAD_FAILED) {
         continue;
       }
       if (file.state === FileState.UPLOADING) {

package/src/utils/utils.ts

@@ -64,15 +64,16 @@ type IndicatorStatesMap = Record<ValueOf<typeof FileState>, Progress | null>;
 
 export const getIndicatorTypeForFileState = (
   fileState: FileStateValue,
-  isOnline: boolean,
   enableOfflineSupport: boolean,
 ): Progress | null => {
   const indicatorMap: IndicatorStatesMap = {
-    [FileState.UPLOADING]: ProgressIndicatorTypes.IN_PROGRESS,
-    [FileState.UPLOAD_FAILED]:
-      !isOnline && enableOfflineSupport
-        ? ProgressIndicatorTypes.INACTIVE
-        : ProgressIndicatorTypes.RETRY,
+    [FileState.UPLOADING]: enableOfflineSupport
+      ? ProgressIndicatorTypes.INACTIVE
+      : ProgressIndicatorTypes.IN_PROGRESS,
+    // If offline support is disabled, then there is no need
+    [FileState.UPLOAD_FAILED]: enableOfflineSupport
+      ? ProgressIndicatorTypes.INACTIVE
+      : ProgressIndicatorTypes.RETRY,
     [FileState.NOT_SUPPORTED]: ProgressIndicatorTypes.NOT_SUPPORTED,
     [FileState.UPLOADED]: ProgressIndicatorTypes.INACTIVE,
     [FileState.FINISHED]: ProgressIndicatorTypes.INACTIVE,