Merge pull request #1769 from GetStream/release-v9.5.2

v9.5.2

Author: oliverlaz

.github/workflows/release.yml

@@ -5,6 +5,7 @@ on:
       - master
       - main
       - beta
+      - release-v9
 
 jobs:
   release:
@@ -18,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 'lts/*'
+          node-version: 16
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Validate CommonJS bundle

.releaserc.json

@@ -5,6 +5,10 @@
     {
       "name": "beta",
       "prerelease": true
+    },
+    {
+      "name": "release-v9",
+      "channel": "v9"
     }
   ],
   "plugins": [

src/components/Attachment/Attachment.tsx

@@ -80,31 +80,35 @@ export const Attachment = <
         ]
       : attachments;
 
-  return (
-    <>
-      {newAttachments.map((attachment) => {
-        if (isGalleryAttachmentType(attachment)) {
-          return renderGallery({ ...rest, attachment });
-        }
+  const getContent = (attachment: StreamAttachment<StreamChatGenerics>) => {
+    if (isGalleryAttachmentType(attachment)) {
+      return renderGallery({ ...rest, attachment });
+    }
+
+    if (isImageAttachment(attachment)) {
+      return renderImage({ ...rest, attachment });
+    }
 
-        if (isImageAttachment(attachment)) {
-          return renderImage({ ...rest, attachment });
-        }
+    if (isAudioAttachment(attachment)) {
+      return renderAudio({ ...rest, attachment });
+    }
 
-        if (isAudioAttachment(attachment)) {
-          return renderAudio({ ...rest, attachment });
-        }
+    if (isFileAttachment(attachment)) {
+      return renderFile({ ...rest, attachment });
+    }
 
-        if (isFileAttachment(attachment)) {
-          return renderFile({ ...rest, attachment });
-        }
+    if (isMediaAttachment(attachment)) {
+      return renderMedia({ ...rest, attachment });
+    }
 
-        if (isMediaAttachment(attachment)) {
-          return renderMedia({ ...rest, attachment });
-        }
+    return renderCard({ ...rest, attachment });
+  };
 
-        return renderCard({ ...rest, attachment });
-      })}
+  return (
+    <>
+      {newAttachments.map((attachment, i) => (
+        <React.Fragment key={i}>{getContent(attachment)}</React.Fragment>
+      ))}
     </>
   );
 };

src/components/Attachment/utils.tsx

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from 'react';
 import ReactPlayer from 'react-player';
-import { nanoid } from 'nanoid';
 
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
 import { Audio as DefaultAudio } from './Audio';
@@ -100,9 +99,6 @@ export const renderAttachmentWithinContainer = <
       className={`str-chat__message-attachment str-chat__message-attachment--${componentType} str-chat__message-attachment--${
         attachment?.type || ''
       } str-chat__message-attachment--${componentType}--${extra}`}
-      key={`${isGalleryAttachmentType(attachment) ? '' : attachment?.id || nanoid()}-${
-        attachment?.type || 'none'
-      } `}
     >
       {children}
     </div>
@@ -124,7 +120,6 @@ export const renderAttachmentActions = <
       actionHandler={(event, name, value) => actionHandler?.(event, name, value)}
       actions={attachment.actions}
       id={attachment.id || ''}
-      key={`key-actions-${attachment.id}`}
       text={attachment.text || ''}
     />
   );
@@ -139,7 +134,7 @@ export const renderGallery = <
 
   return renderAttachmentWithinContainer({
     attachment,
-    children: <Gallery images={attachment.images || []} key='gallery' />,
+    children: <Gallery images={attachment.images || []} />,
     componentType: 'gallery',
   });
 };
@@ -155,7 +150,7 @@ export const renderImage = <
     return renderAttachmentWithinContainer({
       attachment,
       children: (
-        <div className='str-chat__attachment' key={`key-image-${attachment.id}`}>
+        <div className='str-chat__attachment'>
           {<Image {...attachment} />}
           {renderAttachmentActions(props)}
         </div>
@@ -166,7 +161,7 @@ export const renderImage = <
 
   return renderAttachmentWithinContainer({
     attachment,
-    children: <Image {...attachment} key={`key-image-${attachment.id}`} />,
+    children: <Image {...attachment} />,
     componentType: 'image',
   });
 };
@@ -182,8 +177,8 @@ export const renderCard = <
     return renderAttachmentWithinContainer({
       attachment,
       children: (
-        <div className='str-chat__attachment' key={`key-image-${attachment.id}`}>
-          <Card {...attachment} key={`key-card-${attachment.id}`} />
+        <div className='str-chat__attachment'>
+          <Card {...attachment} />
           {renderAttachmentActions(props)}
         </div>
       ),
@@ -193,7 +188,7 @@ export const renderCard = <
 
   return renderAttachmentWithinContainer({
     attachment,
-    children: <Card {...attachment} key={`key-card-${attachment.id}`} />,
+    children: <Card {...attachment} />,
     componentType: 'card',
   });
 };
@@ -209,7 +204,7 @@ export const renderFile = <
 
   return renderAttachmentWithinContainer({
     attachment,
-    children: <File attachment={attachment} key={`key-file-${attachment.id}`} />,
+    children: <File attachment={attachment} />,
     componentType: 'file',
   });
 };
@@ -224,7 +219,7 @@ export const renderAudio = <
   return renderAttachmentWithinContainer({
     attachment,
     children: (
-      <div className='str-chat__attachment' key={`key-video-${attachment.id}`}>
+      <div className='str-chat__attachment'>
         <Audio og={attachment} />
       </div>
     ),
@@ -243,10 +238,7 @@ export const renderMedia = <
     return renderAttachmentWithinContainer({
       attachment,
       children: (
-        <div
-          className='str-chat__attachment str-chat__attachment-media'
-          key={`key-video-${attachment.id}`}
-        >
+        <div className='str-chat__attachment str-chat__attachment-media'>
           <div className='str-chat__player-wrapper'>
             <Media
               className='react-player'
@@ -266,7 +258,7 @@ export const renderMedia = <
   return renderAttachmentWithinContainer({
     attachment,
     children: (
-      <div className='str-chat__player-wrapper' key={`key-video-${attachment.id}`}>
+      <div className='str-chat__player-wrapper'>
         <Media
           className='react-player'
           controls

src/components/MessageList/hooks/usePrependMessagesCount.ts

@@ -8,15 +8,17 @@ export function usePrependedMessagesCount<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(messages: StreamMessage<StreamChatGenerics>[], hasDateSeparator: boolean) {
   const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-  const currentFirstMessageId = messages?.[firstRealMessageIndex]?.id;
-  const firstMessageId = useRef(currentFirstMessageId);
-  const earliestMessageId = useRef(currentFirstMessageId);
+  const firstMessageId = useRef<string>();
+  const earliestMessageId = useRef<string>();
   const previousNumItemsPrepended = useRef(0);
 
   const numItemsPrepended = useMemo(() => {
     if (!messages || !messages.length) {
+      previousNumItemsPrepended.current = 0;
       return 0;
     }
+
+    const currentFirstMessageId = messages?.[firstRealMessageIndex]?.id;
     // if no new messages were prepended, return early (same amount as before)
     if (currentFirstMessageId === earliestMessageId.current) {
       return previousNumItemsPrepended.current;
@@ -35,9 +37,9 @@ export function usePrependedMessagesCount<
       }
     }
 
-    // if no match has found, we have jumped
+    // if no match has found, we have jumped - reset the prepend item count.
     firstMessageId.current = currentFirstMessageId;
-
+    previousNumItemsPrepended.current = 0;
     return 0;
     // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
     // that's why the second dependency is necessary