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

…mponents (RocketChat#277)" (RocketChat#278) This reverts commit 49a8bd5.
anjy7 · Nov 7, 2023 · fb74e2e · fb74e2e
1 parent 5a257c6
commit fb74e2e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 39 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,9 +11,7 @@ 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,6 +1,5 @@
 import { css } from '@emotion/react';
 import React from 'react';
-import PropTypes from 'prop-types';
 import { appendClassNames } from '../../lib/appendClassNames';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 
@@ -74,10 +73,3 @@ 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,6 +1,5 @@
 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';
@@ -84,11 +83,3 @@ 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,3 +1 @@
 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,14 +1,19 @@
 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);
@@ -72,23 +77,38 @@ const Search = () => {
           const prev = arr[index + 1];
           const newDay = isMessageNewDay(msg, prev);
           return (
-            <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 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>
           );
         })}