chore: upgrade stream chat react to v12.5.2 (#103)

GetStream · Nov 13, 2024 · cd57a0a · cd57a0a
1 parent d957459
commit cd57a0a
Show file tree

Hide file tree

Showing 13 changed files with 1,934 additions and 1,838 deletions.
diff --git a/gaming-livestream/package.json b/gaming-livestream/package.json
@@ -10,8 +10,8 @@
     "emoji-mart": "^5.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "stream-chat": "^8.37.0",
-    "stream-chat-react": "12.0.0-rc.6"
+    "stream-chat": "^8.42.0",
+    "stream-chat-react": "^12.5.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

diff --git a/gaming-livestream/yarn.lock b/gaming-livestream/yarn.lock
diff --git a/package.json b/package.json
@@ -19,7 +19,11 @@
     "start:gaming-livestream": "cd gaming-livestream && yarn start",
     "start:social-messenger-ts": "cd social-messenger-ts && yarn start",
     "start:team-ts": "cd team-ts && yarn start",
-    "start:virtual-event": "cd virtual-event && yarn start"
+    "start:virtual-event": "cd virtual-event && yarn start",
+    "upgrade:gaming-livestream": "cd gaming-livestream && yarn add stream-chat-react stream-chat",
+    "upgrade:social-messenger-ts": "cd social-messenger-ts && yarn add stream-chat-react stream-chat",
+    "upgrade:team-ts": "cd team-ts && yarn add stream-chat-react stream-chat",
+    "upgrade:virtual-event": "cd virtual-event && yarn add stream-chat-react stream-chat"
   },
   "devDependencies": {
     "eslint": "^7.6.0",

diff --git a/social-messenger-ts/package.json b/social-messenger-ts/package.json
@@ -12,8 +12,8 @@
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "stream-chat": "^8.40.7",
-    "stream-chat-react": "^12.0.0-rc.14"
+    "stream-chat": "^8.42.0",
+    "stream-chat-react": "^12.5.0"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",

diff --git a/social-messenger-ts/yarn.lock b/social-messenger-ts/yarn.lock
@@ -9490,10 +9490,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react@^12.0.0-rc.14:
-  version "12.0.0-rc.14"
-  resolved "https://registry.yarnpkg.com/stream-chat-react/-/stream-chat-react-12.0.0-rc.14.tgz#627e84c1f21b18e251c4306903456b4f698ab3a9"
-  integrity sha512-5rRMu8WYqC2DVQugB8XqfdCdvjsOnw22xV3AVWeo+RvnqBgJVNhbwJN32w9KzDljEtVZBBH//uIsnmvj7YyksQ==
+stream-chat-react@^12.5.0:
+  version "12.5.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react/-/stream-chat-react-12.5.0.tgz#a612cd5f77333fad449e885971d63b36ee5c9111"
+  integrity sha512-rTQd7MC+YCoLl665MJWKst7TJ8Lps9SiX07b1fcjzRu5j2XwL8diaxGuvovTEI/vuBvsJMTxdNelqfZAMKx0LQ==
   dependencies:
     "@braintree/sanitize-url" "^6.0.4"
     "@popperjs/core" "^2.11.5"
@@ -9530,10 +9530,10 @@ stream-chat-react@^12.0.0-rc.14:
     "@stream-io/transliterate" "^1.5.5"
     mml-react "^0.4.7"
 
-stream-chat@^8.40.7:
-  version "8.40.7"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.40.7.tgz#411ce2ed11c64842d4b1386e744631539bba7760"
-  integrity sha512-pVFa3lmYLBdoI4I6hDRFqLjyOKMNpDVwYY87MtP9ur2Lo5afTc7unGQ7hdQS5VHTiE0Rb1RXATlkAQb7+J0CgA==
+stream-chat@^8.42.0:
+  version "8.42.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.42.0.tgz#124ea2c10c6e8f7990304e1101c66751daf63e6c"
+  integrity sha512-8xZz+fmdHSOa3L1rHUOC4Wah+ipvLvdiOmeOfGK6uXnLOKlSHMOblwmQErrOoFM4SKfX9Bea3V8viaKUu6bPng==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@types/jsonwebtoken" "~9.0.0"

diff --git a/team-ts/package.json b/team-ts/package.json
@@ -19,8 +19,8 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-popper": "^2.3.0",
-    "stream-chat": "^8.37.0",
-    "stream-chat-react": "12.0.0-rc.6"
+    "stream-chat": "^8.42.0",
+    "stream-chat-react": "^12.5.0"
   },
   "devDependencies": {
     "@types/emoji-mart": "^3.0.9",

diff --git a/team-ts/src/components/PinnedMessageList/PinnedMessageList.tsx b/team-ts/src/components/PinnedMessageList/PinnedMessageList.tsx
@@ -1,4 +1,4 @@
-import { Message, useChannelStateContext } from 'stream-chat-react';
+import {DialogManagerProvider, Message, useChannelStateContext } from 'stream-chat-react';
 
 import { CloseThreadButton } from '../TeamChannelHeader/CloseThreadButton';
 import type { StreamChatType } from '../../types';
@@ -13,6 +13,7 @@ export const PinnedMessageList = () => {
   if (!pinnedMessageListOpen) return null;
 
   return (
+    <DialogManagerProvider id='pinned-message-list-dialog-manager'>
     <div className='pinned-messages__container'>
       <div className='pinned-messages__header'>
         <div className='workspace-header__title'>Pins</div>
@@ -29,5 +30,6 @@ export const PinnedMessageList = () => {
         ))}
       </div>
     </div>
+    </DialogManagerProvider>
   );
 };
diff --git a/team-ts/src/components/TeamMessage/TeamMessage.tsx b/team-ts/src/components/TeamMessage/TeamMessage.tsx
@@ -1,75 +1,53 @@
 import clsx from 'clsx';
-import React, { useMemo, useRef } from 'react';
-import type { TranslationLanguages } from 'stream-chat';
+import React, {ElementRef, useMemo, useRef} from 'react';
+import type {TranslationLanguages} from 'stream-chat';
 import {
-  areMessageUIPropsEqual,
   Avatar,
   EditMessageForm,
   isOnlyEmojis,
   MESSAGE_ACTIONS,
   MessageActions,
-  MessageContextValue,
   MessageDeleted,
   MessageInput,
   MessageRepliesCountButton,
   MessageStatus,
   MessageTimestamp,
-  MessageUIComponentProps,
-  ReactEventHandler,
   ReactionIcon,
+  ReactionsList,
   ReactionSelector,
   renderText as defaultRenderText,
   showMessageActionsBox,
   ThreadIcon,
   useComponentContext,
   useMessageContext,
-  useReactionClick,
-  useTranslationContext,
-  ReactionsList,
+  useTranslationContext, DialogAnchor, useDialog, useDialogIsOpen,
 } from 'stream-chat-react';
 
-import { PinIndicator } from './PinIndicator';
+import {PinIndicator} from './PinIndicator';
 
-import { useWorkspaceController } from '../../context/WorkspaceController';
+import {useWorkspaceController} from '../../context/WorkspaceController';
 
-import type { StreamChatType } from '../../types';
+import type {StreamChatType} from '../../types';
 import {ErrorIcon} from "./icons";
 
-
-type MessageTeamWithContextProps = MessageContextValue<StreamChatType> & {
-  isReactionEnabled: boolean;
-  messageWrapperRef: React.MutableRefObject<HTMLDivElement | null>;
-  onReactionListClick: ReactEventHandler;
-  reactionSelectorRef: React.MutableRefObject<HTMLDivElement | null>;
-  showDetailedReactions: boolean;
-};
-
-const MessageTeamWithContext = (
-  props: MessageTeamWithContextProps,
-) => {
+export const TeamMessage = () => {
   const {
     clearEditingState,
     editing,
     getMessageActions,
     groupStyles,
     handleAction,
-    handleOpenThread,
+    handleOpenThread: handleOpenThreadContext,
     handleRetry,
     initialMessage,
-    isReactionEnabled,
     message,
-    messageWrapperRef,
     onMentionsClickMessage,
     onMentionsHoverMessage,
-    onReactionListClick,
     onUserClick,
     onUserHover,
-    reactionSelectorRef,
     renderText = defaultRenderText,
-    showDetailedReactions,
     threadList,
-  } = props;
-
+  } = useMessageContext<StreamChatType>('MessageTeam');
   const { Attachment } = useComponentContext<StreamChatType>('MessageTeam');
 
   const { t, userLanguage } = useTranslationContext('MessageTeam');
@@ -78,6 +56,7 @@ const MessageTeamWithContext = (
   const showActionsBox = showMessageActionsBox(messageActions);
 
   const shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && !threadList;
+  const canReact =  messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
 
   const messageTextToRender =
     message.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] || message.text;
@@ -90,8 +69,20 @@ const MessageTeamWithContext = (
     renderText,
   ]);
 
+  const { closePinnedMessageListOpen } = useWorkspaceController();
+  const handleOpenThread = (event: React.BaseSyntheticEvent) => {
+    closePinnedMessageListOpen();
+    handleOpenThreadContext(event);
+  };
+
   const firstGroupStyle = groupStyles ? groupStyles[0] : 'single';
 
+  const buttonRef = useRef<ElementRef<'button'>>(null);
+  const reactionSelectorDialogId = `reaction-selector--${message.id}`;
+  const reactionSelectorDialog = useDialog({ id: reactionSelectorDialogId });
+  const reactionSelectorDialogIsOpen = useDialogIsOpen(reactionSelectorDialogId);
+  const messageActionsDialogIsOpen = useDialogIsOpen(`message-actions--${message.id}`);
+
   if (message.deleted_at) {
     return <MessageDeleted message={message} />;
   }
@@ -134,12 +125,11 @@ const MessageTeamWithContext = (
   );
 
   return (
-    <>
-      {message.pinned && <PinIndicator message={message} />}
+    <div className={message.pinned ? 'pinned-message' : 'unpinned-message'}>
+      {message.pinned && <PinIndicator message={message}/>}
       <div
         className={rootClass}
         data-testid='message-team'
-        ref={messageWrapperRef}
       >
         <div className='avatar-host'>
           {firstGroupStyle === 'top' || firstGroupStyle === 'single' || initialMessage ? (
@@ -150,7 +140,7 @@ const MessageTeamWithContext = (
               onMouseOver={onUserHover}
             />
           ) : (
-            <div data-testid='team-meta-spacer' style={{ marginRight: 0, width: 34 }} />
+            <div data-testid='team-meta-spacer' style={{marginRight: 0, width: 34}}/>
           )}
         </div>
         <div className='str-chat__message-team-group'>
@@ -185,30 +175,42 @@ const MessageTeamWithContext = (
               message.type !== 'ephemeral' &&
               message.type !== 'error' && (
                 <div
-                  className={`str-chat__message-team-actions`}
+                  className={clsx(`str-chat__message-team-actions`, {'str-chat__message-team-actions--active': reactionSelectorDialogIsOpen || messageActionsDialogIsOpen})}
                   data-testid='message-team-actions'
                 >
-                  {showDetailedReactions && <ReactionSelector ref={reactionSelectorRef} />}
-                  {isReactionEnabled && (
-                    <span
-                      data-testid='message-team-reaction-icon'
-                      onClick={onReactionListClick}
-                      title='Reactions'
-                    >
-                      <ReactionIcon />
-                    </span>
-                  )}
+                  {canReact && (
+                    <>
+                      <DialogAnchor
+                        id={reactionSelectorDialogId}
+                        placement='top-end'
+                        referenceElement={buttonRef.current}
+                        trapFocus
+                      >
+                        <ReactionSelector />
+                      </DialogAnchor>
+                      <button
+                        aria-expanded={reactionSelectorDialogIsOpen}
+                        aria-label={t('aria/Open Reaction Selector')}
+                        className='str-chat__message-reactions-button'
+                        data-testid='message-reaction-action'
+                        onClick={() => reactionSelectorDialog?.toggle()}
+                        ref={buttonRef}
+                      >
+                        <ReactionIcon className='str-chat__message-action-icon' />
+                      </button>
+                    </>
+                    )}
                   {shouldShowReplies && (
                     <span
                       data-testid='message-team-thread-icon'
                       onClick={handleOpenThread}
                       title='Start a thread'
                     >
-                      <ThreadIcon />
+                      <ThreadIcon/>
                     </span>
                   )}
                   {showActionsBox && (
-                    <MessageActions inline messageWrapperRef={messageWrapperRef} />
+                    <MessageActions inline/>
                   )}
                 </div>
               )}
@@ -221,33 +223,33 @@ const MessageTeamWithContext = (
                 {messageText}
               </div>
             )}
-            {!message.text && message.attachments?.length ? (
-              <Attachment actionHandler={handleAction} attachments={message.attachments} />
+            {!message.text && message.attachments?.length && Attachment ? (
+              <Attachment actionHandler={handleAction} attachments={message.attachments}/>
             ) : null}
-            {message.latest_reactions?.length !== 0 && message.text !== '' && isReactionEnabled && (
-              <ReactionsList />
+            {message.latest_reactions?.length !== 0 && message.text !== '' && canReact && (
+              <ReactionsList/>
             )}
             {message.status === 'failed' && (
               <button
                 className='str-chat__message-team-failed'
                 data-testid='message-team-failed'
                 onClick={message.errorStatusCode !== 403 ? () => handleRetry(message) : undefined}
               >
-                <ErrorIcon />
+                <ErrorIcon/>
                 {message.errorStatusCode !== 403
                   ? t<string>('Message Failed · Click to try again')
                   : t<string>('Message Failed · Unauthorized')}
               </button>
             )}
           </div>
-          <MessageStatus messageType='team' />
-          {message.text && message.attachments?.length ? (
-            <Attachment actionHandler={handleAction} attachments={message.attachments} />
+          <MessageStatus messageType='team'/>
+          {message.text && message.attachments?.length && Attachment ? (
+            <Attachment actionHandler={handleAction} attachments={message.attachments}/>
           ) : null}
           {message.latest_reactions &&
             message.latest_reactions.length !== 0 &&
             message.text === '' &&
-            isReactionEnabled && <ReactionsList />}
+            canReact && <ReactionsList/>}
           {!threadList && (
             <MessageRepliesCountButton
               onClick={handleOpenThread}
@@ -256,50 +258,6 @@ const MessageTeamWithContext = (
           )}
         </div>
       </div>
-    </>
-  );
-};
-
-const MemoizedMessageTeam = React.memo(
-  MessageTeamWithContext,
-  areMessageUIPropsEqual,
-) as typeof MessageTeamWithContext;
-
-
-export const TeamMessage = (
-  props: MessageUIComponentProps<StreamChatType>,
-) => {
-  const messageContext = useMessageContext<StreamChatType>('MessageTeam');
-  const { closePinnedMessageListOpen } = useWorkspaceController();
-
-  const reactionSelectorRef = useRef<HTMLDivElement | null>(null);
-  const messageWrapperRef = useRef<HTMLDivElement | null>(null);
-
-  const message = props.message || messageContext.message;
-
-  const { isReactionEnabled, onReactionListClick, showDetailedReactions } = useReactionClick(
-    message,
-    reactionSelectorRef,
-    messageWrapperRef,
-  );
-
-  const handleOpenThreadOverride = (event: React.BaseSyntheticEvent) => {
-    closePinnedMessageListOpen();
-    messageContext.handleOpenThread(event);
-  };
-
-  return (
-    <div className={message.pinned ? 'pinned-message' : 'unpinned-message'}>
-    <MemoizedMessageTeam
-      {...messageContext}
-      isReactionEnabled={isReactionEnabled}
-      messageWrapperRef={messageWrapperRef}
-      onReactionListClick={onReactionListClick}
-      reactionSelectorRef={reactionSelectorRef}
-      showDetailedReactions={showDetailedReactions}
-      handleOpenThread={handleOpenThreadOverride}
-      {...props}
-    />
     </div>
   );
 };