Merge branch 'develop' into fix-quoting-issues

RocketChat · Nov 3, 2024 · 962e332 · 962e332
2 parents a105615 + faf9fb7
commit 962e332
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 23 deletions.
diff --git a/packages/react/src/hooks/useSetMessageList.js b/packages/react/src/hooks/useSetMessageList.js
@@ -1,16 +1,14 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 
 export const useSetMessageList = (messages, shouldRender) => {
   const [loading, setLoading] = useState(true);
-  const [messageList, setMessageList] = useState([]);
 
-  useEffect(() => {
-    setLoading(true);
-    const filteredMessages = messages.filter((message) =>
-      shouldRender(message)
-    );
+  const messageList = useMemo(
+    () => messages.filter(shouldRender),
+    [messages, shouldRender]
+  );
 
-    setMessageList(filteredMessages);
+  useEffect(() => {
     setLoading(false);
   }, [messages, shouldRender]);
 

diff --git a/packages/react/src/views/MessageAggregators/StarredMessages.js b/packages/react/src/views/MessageAggregators/StarredMessages.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useComponentOverrides } from '@embeddedchat/ui-elements';
 import { useUserStore } from '../../store';
 import { MessageAggregator } from './common/MessageAggregator';
@@ -7,15 +7,18 @@ const StarredMessages = () => {
   const authenticatedUserId = useUserStore((state) => state.userId);
   const { variantOverrides } = useComponentOverrides('StarredMessages');
   const viewType = variantOverrides.viewType || 'Sidebar';
+  const shouldRender = useCallback(
+    (msg) =>
+      msg.starred &&
+      msg.starred.some((star) => star._id === authenticatedUserId),
+    [authenticatedUserId]
+  );
   return (
     <MessageAggregator
       title="Starred Messages"
       iconName="star"
       noMessageInfo="No Starred Messages"
-      shouldRender={(msg) =>
-        msg.starred &&
-        msg.starred.some((star) => star._id === authenticatedUserId)
-      }
+      shouldRender={shouldRender}
       viewType={viewType}
     />
   );

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { isSameDay, format } from 'date-fns';
 import { Box, Sidebar, Popup, useTheme } from '@embeddedchat/ui-elements';
 import { MessageDivider } from '../../Message/MessageDivider';
@@ -27,7 +27,10 @@ export const MessageAggregator = ({
   const setExclusiveState = useSetExclusiveState();
   const messages = useMessageStore((state) => state.messages);
   const threadMessages = useMessageStore((state) => state.threadMessages) || [];
-  const allMessages = [...messages, ...threadMessages];
+  const allMessages = useMemo(
+    () => [...messages, ...threadMessages],
+    [messages, threadMessages]
+  );
   const [messageRendered, setMessageRendered] = useState(false);
   const { loading, messageList } = useSetMessageList(
     searchFiltered || allMessages,

diff --git a/packages/react/src/views/ReportMessage/MessageReportWindow.js b/packages/react/src/views/ReportMessage/MessageReportWindow.js
@@ -2,17 +2,10 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Input } from '@embeddedchat/ui-elements';
 import ReportWindowButtons from './ReportWindowButtons';
-import { useMessageStore } from '../../store';
 import styles from './ReportMessage.styles';
 
 const MessageReportWindow = ({ messageId }) => {
   const [reportDescription, setDescription] = useState('');
-  const messages = useMessageStore((state) => state.messages) || [];
-  const threadMessages = useMessageStore((state) => state.threadMessages) || [];
-  const allMessages = [...messages, ...threadMessages];
-  const messageText = allMessages.filter(
-    (message) => message._id === messageId
-  )[0]?.msg;
   return (
     <ReportWindowButtons
       variant="danger"
@@ -22,7 +15,6 @@ const MessageReportWindow = ({ messageId }) => {
       reportDescription={reportDescription}
       messageId={messageId}
     >
-      <Box>{JSON.stringify(messageText)}</Box>
       <Box css={styles.conatiner}>
         <Input
           textArea