refactor: adapt AttachmentPreviewList to LLC attachment types

MartinCupela · MartinCupela · commit 1f4cdd524ebf · 2025-04-04T13:12:48.000+02:00
diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx
@@ -1,15 +1,11 @@
 import React, { useMemo } from 'react';
-import type { ReactPlayerProps } from 'react-player';
-import type { Attachment as StreamAttachment } from 'stream-chat';
-
 import {
   isAudioAttachment,
-  isFileAttachment,
-  isMediaAttachment,
+  isImageAttachment,
   isScrapedContent,
-  isUploadedImage,
   isVoiceRecordingAttachment,
-} from './utils';
+} from 'stream-chat';
+
 import {
   AudioContainer,
   CardContainer,
@@ -20,6 +16,10 @@ import {
   UnsupportedAttachmentContainer,
   VoiceRecordingContainer,
 } from './AttachmentContainer';
+import { isFileAttachment, isMediaAttachment } from './utils';
+
+import type { ReactPlayerProps } from 'react-player';
+import type { Attachment as StreamAttachment } from 'stream-chat';
 import type { AttachmentActionsProps } from './AttachmentActions';
 import type { AudioProps } from './Audio';
 import type { VoiceRecordingProps } from './VoiceRecording';
@@ -104,11 +104,11 @@ const renderGroupedAttachments = ({
   ...rest
 }: AttachmentProps): GroupedRenderedAttachment => {
   const uploadedImages: StreamAttachment[] = attachments.filter((attachment) =>
-    isUploadedImage(attachment),
+    isImageAttachment(attachment),
   );
 
   const containers = attachments
-    .filter((attachment) => !isUploadedImage(attachment))
+    .filter((attachment) => !isImageAttachment(attachment))
     .reduce<GroupedRenderedAttachment>(
       (typeMap, attachment) => {
         const attachmentType = getAttachmentType(attachment);
diff --git a/src/components/Attachment/utils.tsx b/src/components/Attachment/utils.tsx
@@ -1,16 +1,15 @@
 import type { ReactNode } from 'react';
-import type { Attachment } from 'stream-chat';
-
-import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
 import type {
+  Attachment,
   LocalAttachment,
   LocalAudioAttachment,
-  LocalFileAttachment,
   LocalImageAttachment,
-  LocalVideoAttachment,
   LocalVoiceRecordingAttachment,
   VoiceRecordingAttachment,
-} from '../MessageInput';
+} from 'stream-chat';
+
+import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
+import type { LocalFileAttachment, LocalVideoAttachment } from '../MessageInput';
 
 export const SUPPORTED_VIDEO_FORMATS = [
   'video/mp4',
diff --git a/src/components/MediaRecorder/classes/MediaRecorderController.ts b/src/components/MediaRecorder/classes/MediaRecorderController.ts
@@ -1,6 +1,5 @@
 import fixWebmDuration from 'fix-webm-duration';
 import { nanoid } from 'nanoid';
-import type { AmplitudeRecorderConfig } from './AmplitudeRecorder';
 import {
   AmplitudeRecorder,
   DEFAULT_AMPLITUDE_RECORDER_CONFIG,
@@ -16,11 +15,11 @@ import {
   getExtensionFromMimeType,
   getRecordedMediaTypeFromMimeType,
 } from '../../ReactFileUtilities';
-import type { TranslationContextValue } from '../../../context';
 import { defaultTranslatorFunction } from '../../../i18n';
 import { mergeDeepUndefined } from '../../../utils/mergeDeep';
-
-import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
+import type { LocalVoiceRecordingAttachment } from 'stream-chat';
+import type { AmplitudeRecorderConfig } from './AmplitudeRecorder';
+import type { TranslationContextValue } from '../../../context';
 
 export const RECORDED_MIME_TYPE_BY_BROWSER = {
   audio: {
@@ -188,7 +187,7 @@ export class MediaRecorderController {
         this.amplitudeRecorder?.amplitudes.value ?? [],
         this.amplitudeRecorderConfig.sampleCount,
       ),
-    };
+    } as LocalVoiceRecordingAttachment;
   };
 
   handleErrorEvent = (e: Event) => {
diff --git a/src/components/MediaRecorder/hooks/useMediaRecorder.ts b/src/components/MediaRecorder/hooks/useMediaRecorder.ts
@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import type { MessageInputContextValue } from '../../../context';
-import { useTranslationContext } from '../../../context';
-import type { CustomAudioRecordingConfig, MediaRecordingState } from '../classes';
 import { MediaRecorderController } from '../classes';
-
-import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
+import { useTranslationContext } from '../../../context';
 import { useMessageComposer } from '../../MessageInput/hooks/messageComposer/useMessageComposer';
 
+import type { LocalVoiceRecordingAttachment } from 'stream-chat';
+import type { CustomAudioRecordingConfig, MediaRecordingState } from '../classes';
+import type { MessageInputContextValue } from '../../../context';
+
 export type RecordingController = {
   completeRecording: () => void;
   permissionState?: PermissionState;
diff --git a/src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx b/src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx
@@ -1,26 +1,26 @@
 import type { ComponentType } from 'react';
 import React from 'react';
-import type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
-import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from './UnsupportedAttachmentPreview';
-import type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
-import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
-import type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
-import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
-import type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
-import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
 import {
   isLocalAttachment,
   isLocalAudioAttachment,
   isLocalFileAttachment,
   isLocalImageAttachment,
-  isLocalMediaAttachment,
+  isLocalVideoAttachment,
   isLocalVoiceRecordingAttachment,
   isScrapedContent,
-} from '../../Attachment';
+} from 'stream-chat';
+import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from './UnsupportedAttachmentPreview';
+import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
+import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
+import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
+import { useMessageComposer } from '../hooks/messageComposer/useMessageComposer';
+import { useStateStore } from '../../../store';
 
 import type { AttachmentManagerState } from 'stream-chat';
-import { useStateStore } from '../../../store';
-import { useMessageComposer } from '../hooks/messageComposer/useMessageComposer';
+import type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
+import type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
+import type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
+import type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
 
 const attachmentManagerStateSelector = (state: AttachmentManagerState) => ({
   attachments: state.attachments,
@@ -76,7 +76,7 @@ export const AttachmentPreviewList = ({
                 removeAttachments={messageComposer.attachmentManager.removeAttachments}
               />
             );
-          } else if (isLocalMediaAttachment(attachment)) {
+          } else if (isLocalVideoAttachment(attachment)) {
             return (
               <VideoAttachmentPreview
                 attachment={attachment}
diff --git a/src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx
@@ -1,23 +1,21 @@
 import React from 'react';
+import { useTranslationContext } from '../../../context';
 import { FileIcon } from '../../ReactFileUtilities';
 import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
-import { useTranslationContext } from '../../../context';
 
-import type { AttachmentPreviewProps } from './types';
-import type { LocalAttachmentCast, LocalAttachmentUploadMetadata } from '../types';
-import type { Attachment } from 'stream-chat';
+import type {
+  LocalAudioAttachment,
+  LocalFileAttachment,
+  LocalVideoAttachment,
+} from 'stream-chat';
+import type { UploadAttachmentPreviewProps } from './types';
 
-type FileLikeAttachment = Partial<
-  Pick<Attachment, 'title' | 'file_size' | 'asset_url' | 'mime_type'>
->;
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export type FileAttachmentPreviewProps<CustomLocalMetadata = {}> = AttachmentPreviewProps<
-  LocalAttachmentCast<
-    FileLikeAttachment,
-    LocalAttachmentUploadMetadata & CustomLocalMetadata
-  >
->;
+export type FileAttachmentPreviewProps<CustomLocalMetadata = unknown> =
+  UploadAttachmentPreviewProps<
+    | LocalFileAttachment<CustomLocalMetadata>
+    | LocalAudioAttachment<CustomLocalMetadata>
+    | LocalVideoAttachment<CustomLocalMetadata>
+  >;
 
 export const FileAttachmentPreview = ({
   attachment,
@@ -26,6 +24,7 @@ export const FileAttachmentPreview = ({
 }: FileAttachmentPreviewProps) => {
   const { t } = useTranslationContext('FilePreview');
   const uploadState = attachment.localMetadata?.uploadState;
+
   return (
     <div
       className='str-chat__attachment-preview-file'
diff --git a/src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx';
-import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import React, { useCallback, useState } from 'react';
+import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { BaseImage as DefaultBaseImage } from '../../Gallery';
 import { useComponentContext, useTranslationContext } from '../../../context';
-import type { AttachmentPreviewProps } from './types';
-import type { LocalImageAttachment } from '../types';
+import type { LocalImageAttachment } from 'stream-chat';
+import type { UploadAttachmentPreviewProps } from './types';
 
 export type ImageAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
-  AttachmentPreviewProps<LocalImageAttachment<CustomLocalMetadata>>;
+  UploadAttachmentPreviewProps<LocalImageAttachment<CustomLocalMetadata>>;
 
 export const ImageAttachmentPreview = ({
   attachment,
diff --git a/src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
+import { isLocalUploadAttachment } from 'stream-chat';
 import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { FileIcon } from '../../ReactFileUtilities';
 import { useTranslationContext } from '../../../context';
-import type { AttachmentPreviewProps } from './types';
-import type { AnyLocalAttachment } from '../types';
+import type { AnyLocalAttachment, LocalUploadAttachment } from 'stream-chat';
 
 export type UnsupportedAttachmentPreviewProps<
   CustomLocalMetadata = Record<string, unknown>,
-> = AttachmentPreviewProps<AnyLocalAttachment<CustomLocalMetadata>>;
+> = {
+  attachment: AnyLocalAttachment<CustomLocalMetadata>;
+  handleRetry: (
+    attachment: LocalUploadAttachment,
+  ) => void | Promise<LocalUploadAttachment | undefined>;
+  removeAttachments: (ids: string[]) => void;
+};
 
 export const UnsupportedAttachmentPreview = ({
   attachment,
@@ -37,15 +43,17 @@ export const UnsupportedAttachmentPreview = ({
         <CloseIcon />
       </button>
 
-      {attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (
-        <button
-          className='str-chat__attachment-preview-error str-chat__attachment-preview-error-file'
-          data-testid='file-preview-item-retry-button'
-          onClick={() => handleRetry(attachment)}
-        >
-          <RetryIcon />
-        </button>
-      )}
+      {isLocalUploadAttachment(attachment) &&
+        attachment.localMetadata?.uploadState === 'failed' &&
+        !!handleRetry && (
+          <button
+            className='str-chat__attachment-preview-error str-chat__attachment-preview-error-file'
+            data-testid='file-preview-item-retry-button'
+            onClick={() => handleRetry(attachment)}
+          >
+            <RetryIcon />
+          </button>
+        )}
 
       <div className='str-chat__attachment-preview-metadata'>
         <div className='str-chat__attachment-preview-title' title={title}>
diff --git a/src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
@@ -4,11 +4,11 @@ import { RecordingTimer } from '../../MediaRecorder';
 import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { FileIcon } from '../../ReactFileUtilities';
 import { useAudioController } from '../../Attachment/hooks/useAudioController';
-import type { AttachmentPreviewProps } from './types';
-import type { LocalVoiceRecordingAttachment } from '../types';
+import type { LocalVoiceRecordingAttachment } from 'stream-chat';
+import type { UploadAttachmentPreviewProps } from './types';
 
 export type VoiceRecordingPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
-  AttachmentPreviewProps<LocalVoiceRecordingAttachment<CustomLocalMetadata>>;
+  UploadAttachmentPreviewProps<LocalVoiceRecordingAttachment<CustomLocalMetadata>>;
 
 export const VoiceRecordingPreview = ({
   attachment,
diff --git a/src/components/MessageInput/AttachmentPreviewList/index.ts b/src/components/MessageInput/AttachmentPreviewList/index.ts
@@ -1,6 +1,6 @@
 export * from './AttachmentPreviewList';
 export type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
 export type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
-export type { AttachmentPreviewProps } from './types';
+export type { UploadAttachmentPreviewProps as AttachmentPreviewProps } from './types';
 export type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
 export type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
diff --git a/src/components/MessageInput/AttachmentPreviewList/types.ts b/src/components/MessageInput/AttachmentPreviewList/types.ts
@@ -1,9 +1,9 @@
-import type { LocalAttachment } from 'stream-chat';
+import type { LocalUploadAttachment } from 'stream-chat';
 
-export type AttachmentPreviewProps<A extends LocalAttachment> = {
+export type UploadAttachmentPreviewProps<A extends LocalUploadAttachment> = {
   attachment: A;
   handleRetry: (
-    attachment: LocalAttachment,
-  ) => void | Promise<LocalAttachment | undefined>;
+    attachment: LocalUploadAttachment,
+  ) => void | Promise<LocalUploadAttachment | undefined>;
   removeAttachments: (ids: string[]) => void;
 };
diff --git a/src/components/MessageInput/hooks/useAttachments.ts b/src/components/MessageInput/hooks/useAttachments.ts
@@ -47,7 +47,7 @@ const ensureIsLocalAttachment = (
   attachment: Attachment | LocalAttachment,
 ): LocalAttachment => {
   if (isLocalAttachment(attachment)) {
-    return attachment;
+    return attachment as LocalAttachment;
   }
   // local is considered local only if localMetadata has `id` so this is to doublecheck
   const { localMetadata, ...rest } = attachment as LocalAttachment;
