Prettier + ESLint fixes (and some manual fixes)

GetStream · arnautov-anton · Jan 31, 2025 · Jan 24, 2025 · Jan 27, 2025 · Jan 29, 2025
commit 616e877890557c3b7ce2db34c1494ab7d20ce12e
diff --git a/e2e/fixtures/data/attachment.mjs b/e2e/fixtures/data/attachment.mjs
@@ -1,4 +1,4 @@
-/* eslint-disable sort-keys */
+ 
 const smallImageAttachment = [
   {
     type: 'image',

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -57,10 +57,7 @@ export default tseslint.config(
       'object-shorthand': 'warn',
       'prefer-const': 'warn',
       'require-await': 'error',
-      "sort-destructure-keys/sort-destructure-keys": [
-      	"error",
-      	{ caseSensitive: false },
-      ],
+      'sort-destructure-keys/sort-destructure-keys': ['error', { caseSensitive: false }],
       'sort-imports': [
         'error',
         {

diff --git a/src/components/AIStateIndicator/AIStateIndicator.tsx b/src/components/AIStateIndicator/AIStateIndicator.tsx
@@ -8,20 +8,19 @@
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AIStateIndicatorProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   channel?: Channel<StreamChatGenerics>;
 };
 
 export const AIStateIndicator = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel: channelFromProps,
 }: AIStateIndicatorProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext();
-  const { channel: channelFromContext } = useChannelStateContext<StreamChatGenerics>(
-    'AIStateIndicator',
-  );
+  const { channel: channelFromContext } =
+    useChannelStateContext<StreamChatGenerics>('AIStateIndicator');
   const channel = channelFromProps || channelFromContext;
   const { aiState } = useAIState(channel);
   const allowedStates = {

diff --git a/src/components/AIStateIndicator/hooks/useAIState.ts b/src/components/AIStateIndicator/hooks/useAIState.ts
@@ -18,7 +18,7 @@ export const AIStates = {
  * @returns {{ aiState: AIState }} The current AI state for the given channel.
  */
 export const useAIState = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel?: Channel<StreamChatGenerics>,
 ): { aiState: AIState } => {

diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx
@@ -55,7 +55,7 @@ export const ATTACHMENT_GROUPS_ORDER = [
 ] as const;
 
 export type AttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
   attachments: StreamAttachment<StreamChatGenerics>[];
@@ -87,14 +87,17 @@ export type AttachmentProps<
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
  */
 export const Attachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: AttachmentProps<StreamChatGenerics>,
 ) => {
   const { attachments } = props;
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const groupedAttachments = useMemo(() => renderGroupedAttachments(props), [attachments]);
+  const groupedAttachments = useMemo(
+    () => renderGroupedAttachments(props),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [attachments],
+  );
 
   return (
     <div className='str-chat__attachment-list'>
@@ -107,13 +110,13 @@ export const Attachment = <
 };
 
 const renderGroupedAttachments = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachments,
   ...rest
 }: AttachmentProps<StreamChatGenerics>): GroupedRenderedAttachment => {
-  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments.filter((attachment) =>
-    isUploadedImage(attachment),
+  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments.filter(
+    (attachment) => isUploadedImage(attachment),
   );
 
   const containers = attachments
@@ -169,7 +172,7 @@ const renderGroupedAttachments = <
 };
 
 const getAttachmentType = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: AttachmentProps<StreamChatGenerics>['attachments'][number],
 ): keyof typeof CONTAINER_MAP => {

diff --git a/src/components/Attachment/AttachmentActions.tsx b/src/components/Attachment/AttachmentActions.tsx
@@ -7,7 +7,7 @@ import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler'
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AttachmentActionsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Attachment<StreamChatGenerics> & {
   /** A list of actions */
   actions: Action[];
@@ -20,7 +20,7 @@ export type AttachmentActionsProps<
 };
 
 const UnMemoizedAttachmentActions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: AttachmentActionsProps<StreamChatGenerics>,
 ) => {

diff --git a/src/components/Attachment/AttachmentContainer.tsx b/src/components/Attachment/AttachmentContainer.tsx
@@ -30,13 +30,13 @@ import type {
 import type { Attachment } from 'stream-chat';
 
 export type AttachmentContainerProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachment: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>;
   componentType: AttachmentComponentType;
 };
 export const AttachmentWithinContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   children,
@@ -50,16 +50,17 @@ export const AttachmentWithinContainer = <
       componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url
         ? 'no-image'
         : attachment?.actions?.length
-        ? 'actions'
-        : '';
+          ? 'actions'
+          : '';
   }
 
   const classNames = clsx(
     'str-chat__message-attachment str-chat__message-attachment-dynamic-size',
     {
       [`str-chat__message-attachment--${componentType}`]: componentType,
       [`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
-      [`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
+      [`str-chat__message-attachment--${componentType}--${extra}`]:
+        componentType && extra,
       'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),
       'str-chat__message-attachment-with-actions': extra === 'actions',
     },
@@ -69,7 +70,7 @@ export const AttachmentWithinContainer = <
 };
 
 export const AttachmentActionsContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   actionHandler,
   attachment,
@@ -108,7 +109,7 @@ function getCssDimensionsVariables(url: string) {
 }
 
 export const GalleryContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   Gallery = DefaultGallery,
@@ -150,7 +151,7 @@ export const GalleryContainer = <
 };
 
 export const ImageContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: RenderAttachmentProps<StreamChatGenerics>,
 ) => {
@@ -194,7 +195,7 @@ export const ImageContainer = <
 };
 
 export const CardContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: RenderAttachmentProps<StreamChatGenerics>,
 ) => {
@@ -220,7 +221,7 @@ export const CardContainer = <
 };
 
 export const FileContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   File = DefaultFile,
@@ -234,7 +235,7 @@ export const FileContainer = <
   );
 };
 export const AudioContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   Audio = DefaultAudio,
@@ -247,11 +248,11 @@ export const AudioContainer = <
 );
 
 export const VoiceRecordingContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
-  VoiceRecording = DefaultVoiceRecording,
   isQuoted,
+  VoiceRecording = DefaultVoiceRecording,
 }: RenderAttachmentProps<StreamChatGenerics>) => (
   <AttachmentWithinContainer attachment={attachment} componentType='voiceRecording'>
     <div className='str-chat__attachment'>
@@ -261,18 +262,17 @@ export const VoiceRecordingContainer = <
 );
 
 export const MediaContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: RenderAttachmentProps<StreamChatGenerics>,
 ) => {
   const { attachment, Media = ReactPlayer } = props;
   const componentType = 'media';
-  const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
+  const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } =
+    useChannelStateContext();
   const videoElement = useRef<HTMLDivElement>(null);
-  const [
-    attachmentConfiguration,
-    setAttachmentConfiguration,
-  ] = useState<VideoAttachmentConfiguration>();
+  const [attachmentConfiguration, setAttachmentConfiguration] =
+    useState<VideoAttachmentConfiguration>();
 
   useLayoutEffect(() => {
     if (videoElement.current && videoAttachmentSizeHandler) {
@@ -319,7 +319,7 @@ export const MediaContainer = <
 };
 
 export const UnsupportedAttachmentContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   UnsupportedAttachment = DefaultUnsupportedAttachment,

diff --git a/src/components/Attachment/Audio.tsx b/src/components/Attachment/Audio.tsx
@@ -8,14 +8,14 @@ import { useAudioController } from './hooks/useAudioController';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AudioProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   // fixme: rename og to attachment
   og: Attachment<StreamChatGenerics>;
 };
 
 const UnMemoizedAudio = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: AudioProps<StreamChatGenerics>,
 ) => {

diff --git a/src/components/Attachment/Card.tsx b/src/components/Attachment/Card.tsx
@@ -41,8 +41,14 @@
   );
 };
 
-const SourceLink = ({ author_name, url }: Pick<CardProps, 'author_name'> & { url: string }) => (
-  <div className='str-chat__message-attachment-card--source-link' data-testid='card-source-link'>
+const SourceLink = ({
+  author_name,
+  url,
+}: Pick<CardProps, 'author_name'> & { url: string }) => (
+  <div
+    className='str-chat__message-attachment-card--source-link'
+    data-testid='card-source-link'
+  >
     <SafeAnchor
       className='str-chat__message-attachment-card--url'
       href={url}
@@ -68,7 +74,13 @@
   let visual = null;
   if (asset_url && type === 'video') {
     visual = (
-      <ReactPlayer className='react-player' controls height='100%' url={asset_url} width='100%' />
+      <ReactPlayer
+        className='react-player'
+        controls
+        height='100%'
+        url={asset_url}
+        width='100%'
+      />
     );
   } else if (image) {
     visual = (
@@ -104,7 +116,9 @@
       ) : (
         <div className='str-chat__message-attachment-card--flex'>
           {url && <SourceLink author_name={author_name} url={url} />}
-          {title && <div className='str-chat__message-attachment-card--title'>{title}</div>}
+          {title && (
+            <div className='str-chat__message-attachment-card--title'>{title}</div>
+          )}
           {text && <div className='str-chat__message-attachment-card--text'>{text}</div>}
         </div>
       )}
@@ -139,9 +153,13 @@
       )}
       <div className='str-chat__message-attachment-audio-widget--second-row'>
         {url && <SourceLink author_name={author_name} url={url} />}
-        {title && <div className='str-chat__message-attachment-audio-widget--title'>{title}</div>}
+        {title && (
+          <div className='str-chat__message-attachment-audio-widget--title'>{title}</div>
+        )}
         {text && (
-          <div className='str-chat__message-attachment-audio-widget--description'>{text}</div>
+          <div className='str-chat__message-attachment-audio-widget--description'>
+            {text}
+          </div>
         )}
       </div>
     </div>
@@ -158,7 +176,8 @@
   const dimensions: { height?: string; width?: string } = {};
 
   if (type === 'giphy' && typeof giphy !== 'undefined') {
-    const giphyVersion = giphy[giphyVersionName as keyof NonNullable<Attachment['giphy']>];
+    const giphyVersion =
+      giphy[giphyVersionName as keyof NonNullable<Attachment['giphy']>];
     image = giphyVersion.url;
     dimensions.height = giphyVersion.height;
     dimensions.width = giphyVersion.width;
@@ -169,7 +188,9 @@
   }
 
   return (
-    <div className={`str-chat__message-attachment-card str-chat__message-attachment-card--${type}`}>
+    <div
+      className={`str-chat__message-attachment-card str-chat__message-attachment-card--${type}`}
+    >
       <CardHeader {...props} dimensions={dimensions} image={image} />
       <CardContent {...props} />
     </div>

diff --git a/src/components/Attachment/FileAttachment.tsx b/src/components/Attachment/FileAttachment.tsx
@@ -7,21 +7,24 @@ import { DownloadButton, FileSizeIndicator } from './components';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type FileAttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachment: Attachment<StreamChatGenerics>;
 };
 
 const UnMemoizedFileAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
 }: FileAttachmentProps<StreamChatGenerics>) => (
   <div className='str-chat__message-attachment-file--item' data-testid='attachment-file'>
     <FileIcon className='str-chat__file-icon' mimeType={attachment.mime_type} />
     <div className='str-chat__message-attachment-file--item-text'>
       <div className='str-chat__message-attachment-file--item-first-row'>
-        <div className='str-chat__message-attachment-file--item-name' data-testid='file-title'>
+        <div
+          className='str-chat__message-attachment-file--item-name'
+          data-testid='file-title'
+        >
           {attachment.title}
         </div>
         <DownloadButton assetUrl={attachment.asset_url} />