Revert "Revert "Feat/RocketChat#274 replace message components with c…

…ustom components (RocketChat#277)" (RocketChat#278)" This reverts commit 9c68954.
umangutkarsh · Oct 18, 2023 · 4e9c0cc · 4e9c0cc
1 parent 9c68954
commit 4e9c0cc
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,7 +11,9 @@ node_modules
 !.yarn/sdks
 !.yarn/versions
 
+
 .babelrc
 
 .vscode
 
+
diff --git a/packages/react/src/components/Message/MessageDivider.js b/packages/react/src/components/Message/MessageDivider.js
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { appendClassNames } from '../../lib/appendClassNames';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 
@@ -73,3 +74,10 @@ export const MessageDivider = ({
     </div>
   );
 };
+
+MessageDivider.propTypes = {
+  children: PropTypes.node,
+  unreadLabel: PropTypes.string,
+};
+
+export default MessageDivider;
diff --git a/packages/react/src/components/Message/MessageReactions.js b/packages/react/src/components/Message/MessageReactions.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/react';
+import PropTypes from 'prop-types';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { Box } from '../Box';
 import { appendClassNames } from '../../lib/appendClassNames';
@@ -83,3 +84,11 @@ export const MessageReactions = ({
     </Box>
   );
 };
+
+MessageReactions.propTypes = {
+  message: PropTypes.object,
+  authenticatedUserUsername: PropTypes.string,
+  handleEmojiClick: PropTypes.func,
+};
+
+export default MessageReactions;
diff --git a/packages/react/src/components/Message/index.js b/packages/react/src/components/Message/index.js
@@ -1 +1,3 @@
 export { default as Message } from './Message';
+export { default as MessageReactions } from './MessageReactions';
+export { default as MessageDivider } from './MessageDivider';
diff --git a/packages/react/src/components/SearchMessage/SearchMessage.js b/packages/react/src/components/SearchMessage/SearchMessage.js
@@ -1,19 +1,14 @@
 import React, { useState, useContext } from 'react';
 import { isSameDay, format } from 'date-fns';
-import {
-  Message,
-  MessageReactions,
-  MessageDivider,
-} from '@rocket.chat/fuselage';
 import RCContext from '../../context/RCInstance';
 import classes from './SearchMessage.module.css';
 import { Markdown } from '../Markdown/index';
 import { useUserStore, useSearchMessageStore } from '../../store';
-import { isSameUser, serializeReactions } from '../../lib/reaction';
 import { Button } from '../Button';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
+import { Message, MessageReactions, MessageDivider } from '../Message';
 
 const Search = () => {
   const { RCInstance } = useContext(RCContext);
@@ -77,38 +72,23 @@ const Search = () => {
           const prev = arr[index + 1];
           const newDay = isMessageNewDay(msg, prev);
           return (
-            <Message key={msg._id}>
-              <Message.Container>
-                {newDay && (
-                  <MessageDivider>
-                    {format(new Date(msg.ts), 'MMMM d, yyyy')}
-                  </MessageDivider>
-                )}
-                <Message.Header>
-                  <Message.Name>{msg.u.username}</Message.Name>
-                  <Message.Timestamp>
-                    {format(new Date(msg.ts), 'h:mm a')}
-                  </Message.Timestamp>
-                  {msg.editedAt && (
-                    <Icon style={{ opacity: 0.5 }} name="edit" />
-                  )}
-                </Message.Header>
-                <Message.Body>
-                  <Markdown body={msg} />
-                </Message.Body>
-                <MessageReactions>
-                  {msg.reactions &&
-                    serializeReactions(msg.reactions).map((reaction) => (
-                      <MessageReactions.Reaction
-                        key={reaction.name}
-                        mine={isSameUser(reaction, authenticatedUserUsername)}
-                      >
-                        <Markdown body={reaction.name} />
-                        <p>{reaction.count}</p>
-                      </MessageReactions.Reaction>
-                    ))}
-                </MessageReactions>
-              </Message.Container>
+            <Message
+              key={msg._id}
+              message={msg}
+              variant="default"
+              showAvatar={true}
+            >
+              {newDay && (
+                <MessageDivider>
+                  {format(new Date(msg.ts), 'MMMM d, yyyy')}
+                </MessageDivider>
+              )}
+
+              <MessageReactions
+                authenticatedUserUsername={authenticatedUserUsername}
+                message={msg}
+                handleEmojiClick={handleEmojiClick}
+              />
             </Message>
           );
         })}