feat(Attachments): introduce UnsupportedAttachment component (#1952)

Introduces "UnsupportedAttachment" component to handle unsupported attachment types. This component is disabled by default.

Author: arnautov-anton

src/components/Attachment/Attachment.tsx

@@ -19,13 +19,15 @@ import {
   GalleryContainer,
   ImageContainer,
   MediaContainer,
+  UnsupportedAttachmentContainer,
 } from './AttachmentContainer';
 
 import type { AttachmentActionsProps } from './AttachmentActions';
 import type { AudioProps } from './Audio';
 import type { CardProps } from './Card';
 import type { FileAttachmentProps } from './FileAttachment';
 import type { GalleryProps, ImageProps } from '../Gallery';
+import type { UnsupportedAttachmentProps } from './UnsupportedAttachment';
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -35,6 +37,7 @@ const CONTAINER_MAP = {
   card: CardContainer,
   file: FileContainer,
   media: MediaContainer,
+  unsupported: UnsupportedAttachmentContainer,
 } as const;
 
 export const ATTACHMENT_GROUPS_ORDER = [
@@ -44,6 +47,7 @@ export const ATTACHMENT_GROUPS_ORDER = [
   'media',
   'audio',
   'file',
+  'unsupported',
 ] as const;
 
 export type AttachmentProps<
@@ -67,6 +71,8 @@ export type AttachmentProps<
   Image?: React.ComponentType<ImageProps>;
   /** Custom UI component for displaying a media type attachment, defaults to `ReactPlayer` from 'react-player' */
   Media?: React.ComponentType<ReactPlayerProps>;
+  /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */
+  UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;
 };
 
 /**
@@ -97,41 +103,44 @@ const renderGroupedAttachments = <
   attachments,
   ...rest
 }: AttachmentProps<StreamChatGenerics>): GroupedRenderedAttachment => {
-  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = [];
-
-  const containers = attachments.reduce<GroupedRenderedAttachment>(
-    (acc, attachment) => {
-      if (isUploadedImage(attachment)) {
-        uploadedImages.push({
-          ...attachment,
-          image_url: sanitizeUrl(attachment.image_url),
-          thumb_url: sanitizeUrl(attachment.thumb_url),
-        });
-      } else {
+  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments
+    .filter((attachment) => isUploadedImage(attachment))
+    .map((attachment) => ({
+      ...attachment,
+      image_url: sanitizeUrl(attachment.image_url),
+      thumb_url: sanitizeUrl(attachment.thumb_url),
+    }));
+
+  const containers = attachments
+    .filter((attachment) => !isUploadedImage(attachment))
+    .reduce<GroupedRenderedAttachment>(
+      (typeMap, attachment) => {
         const attachmentType = getAttachmentType(attachment);
 
-        if (attachmentType) {
-          const Container = CONTAINER_MAP[attachmentType];
-          acc[attachmentType].push(
-            <Container
-              key={`${attachmentType}-${acc[attachmentType].length}`}
-              {...rest}
-              attachment={attachment}
-            />,
-          );
-        }
-      }
-      return acc;
-    },
-    {
-      audio: [],
-      card: [],
-      file: [],
-      gallery: [],
-      image: [],
-      media: [],
-    },
-  );
+        const Container = CONTAINER_MAP[attachmentType];
+        typeMap[attachmentType].push(
+          <Container
+            key={`${attachmentType}-${typeMap[attachmentType].length}`}
+            {...rest}
+            attachment={attachment}
+          />,
+        );
+
+        return typeMap;
+      },
+      {
+        audio: [],
+        card: [],
+        file: [],
+        media: [],
+        unsupported: [],
+        // not used in reduce
+        // eslint-disable-next-line sort-keys
+        image: [],
+        // eslint-disable-next-line sort-keys
+        gallery: [],
+      },
+    );
 
   if (uploadedImages.length > 1) {
     containers['gallery'] = [
@@ -149,14 +158,15 @@ const renderGroupedAttachments = <
       <ImageContainer key='image-container' {...rest} attachment={uploadedImages[0]} />,
     ];
   }
+
   return containers;
 };
 
 const getAttachmentType = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
   attachment: AttachmentProps<StreamChatGenerics>['attachments'][number],
-): keyof typeof CONTAINER_MAP | null => {
+): keyof typeof CONTAINER_MAP => {
   if (isScrapedContent(attachment)) {
     return 'card';
   } else if (isMediaAttachment(attachment)) {
@@ -167,5 +177,5 @@ const getAttachmentType = <
     return 'file';
   }
 
-  return null;
+  return 'unsupported';
 };

src/components/Attachment/AttachmentContainer.tsx

@@ -9,6 +9,7 @@ import { Audio as DefaultAudio } from './Audio';
 import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Gallery';
 import { Card as DefaultCard } from './Card';
 import { FileAttachment as DefaultFile } from './FileAttachment';
+import { NullComponent as DefaultUnsupportedAttachment } from './UnsupportedAttachment';
 import {
   AttachmentContainerProps,
   isGalleryAttachmentType,
@@ -292,3 +293,14 @@ export const MediaContainer = <
     </AttachmentWithinContainer>
   );
 };
+
+export const UnsupportedAttachmentContainer = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+  attachment,
+  UnsupportedAttachment = DefaultUnsupportedAttachment,
+}: RenderAttachmentProps<StreamChatGenerics>) => (
+  <>
+    <UnsupportedAttachment attachment={attachment} />
+  </>
+);

src/components/Attachment/UnsupportedAttachment.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Attachment } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+export type UnsupportedAttachmentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = {
+  attachment: Attachment<StreamChatGenerics>;
+};
+
+export const UnsupportedAttachment = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+  attachment,
+}: UnsupportedAttachmentProps<StreamChatGenerics>) => (
+  <div>
+    <div>
+      Unsupported attachment type <strong>{attachment.type ?? 'unknown'}</strong>
+    </div>
+    <code>{JSON.stringify(attachment, null, 4)}</code>;
+  </div>
+);
+
+export const NullComponent = () => null;

src/components/Attachment/index.ts

@@ -3,5 +3,6 @@ export * from './AttachmentActions';
 export * from './AttachmentContainer';
 export * from './Audio';
 export * from './Card';
+export * from './UnsupportedAttachment';
 export * from './FileAttachment';
 export * from './utils';