v10.7.0

v10.7.0

Author: arnautov-anton

.github/workflows/release.yml

@@ -27,5 +27,5 @@ jobs:
       - name: Release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: yarn semantic-release

src/components/Attachment/Attachment.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { sanitizeUrl } from '@braintree/sanitize-url';
 import type { ReactPlayerProps } from 'react-player';
 import type { Attachment as StreamAttachment } from 'stream-chat';
 
@@ -19,13 +18,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 +36,7 @@ const CONTAINER_MAP = {
   card: CardContainer,
   file: FileContainer,
   media: MediaContainer,
+  unsupported: UnsupportedAttachmentContainer,
 } as const;
 
 export const ATTACHMENT_GROUPS_ORDER = [
@@ -44,6 +46,7 @@ export const ATTACHMENT_GROUPS_ORDER = [
   'media',
   'audio',
   'file',
+  'unsupported',
 ] as const;
 
 export type AttachmentProps<
@@ -67,6 +70,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 +102,40 @@ 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),
+  );
+
+  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 +153,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 +172,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';

src/components/Gallery/Gallery.tsx

@@ -1,4 +1,5 @@
 import React, { CSSProperties, MutableRefObject, useState } from 'react';
+import { sanitizeUrl } from '@braintree/sanitize-url';
 import clsx from 'clsx';
 
 import { Modal } from '../Modal';
@@ -81,7 +82,7 @@ const UnMemoizedGallery = <
       >
         <img
           alt='User uploaded content'
-          src={image.previewUrl || image.image_url || image.thumb_url}
+          src={sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url)}
           style={image.style}
           {...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) })}
         />

src/components/Gallery/__tests__/__snapshots__/Gallery.test.js.snap

@@ -11,6 +11,7 @@ exports[`Gallery should render component with 3 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -20,6 +21,7 @@ exports[`Gallery should render component with 3 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -29,6 +31,7 @@ exports[`Gallery should render component with 3 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
 </div>
@@ -45,6 +48,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -54,6 +58,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -63,6 +68,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -72,6 +78,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
 </div>
@@ -88,6 +95,7 @@ exports[`Gallery should render component with 5 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -97,6 +105,7 @@ exports[`Gallery should render component with 5 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -106,6 +115,7 @@ exports[`Gallery should render component with 5 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -136,6 +146,7 @@ exports[`Gallery should render component with default props 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -145,6 +156,7 @@ exports[`Gallery should render component with default props 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
 </div>

src/components/MessageList/hooks/useMessageListElements.tsx

@@ -101,13 +101,7 @@ export const useMessageListElements = <
 
         if (message.type === 'system') {
           return (
-            <li
-              key={
-                (message.event as { created_at: string })?.created_at ||
-                (message.created_at as string) ||
-                ''
-              }
-            >
+            <li key={message.id || (message.created_at as string)}>
               <MessageSystem message={message} />
             </li>
           );