message list ui bug fixes (#303)

Signed-off-by: Abhinav Kumar <[email protected]>
RocketChat · Nov 16, 2023 · b3c9ae8 · b3c9ae8
1 parent 6009fe8
commit b3c9ae8
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 141 deletions.
diff --git a/packages/react/src/components/Markup/blocks/ParagraphBlock.js b/packages/react/src/components/Markup/blocks/ParagraphBlock.js
@@ -1,9 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { css } from '@emotion/react';
 import InlineElements from '../elements/InlineElements';
 
+const ParagraphBlockCss = css`
+  margin: 0;
+`;
+
 const ParagraphBlock = ({ contents }) => (
-  <p>
+  <p css={ParagraphBlockCss}>
     <InlineElements contents={contents} />
   </p>
 );

diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js
@@ -7,21 +7,21 @@ import { Attachments } from '../Attachments';
 import { Markdown } from '../Markdown';
 import MessageHeader from './MessageHeader';
 import classes from './Message.module.css';
-import { useMessageStore, useToastStore, useUserStore } from '../../store';
+import { useMessageStore, useUserStore } from '../../store';
 import RCContext from '../../context/RCInstance';
 import { RC_USER_ID_COOKIE } from '../../lib/constant';
 import { Box } from '../Box';
 import { UiKitComponent, kitContext, UiKitMessage } from '../uiKit';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { appendClassNames } from '../../lib/appendClassNames';
-import { MessageContainer } from './MessageContainer';
 import { MessageBody } from './MessageBody';
 import { MessageReactions } from './MessageReactions';
 import { MessageMetrics } from './MessageMetrics';
 import { MessageToolbox } from './MessageToolbox';
-import { Avatar } from '../Avatar';
 import { MessageDivider } from './MessageDivider';
 import { useToastBarDispatch } from '../../hooks/useToastBarDispatch';
+import MessageAvatarContainer from './MessageAvatarContainer';
+import MessageBodyContainer from './MessageBodyContainer';
 
 const MessageCss = css`
   display: flex;
@@ -62,7 +62,6 @@ const Message = ({
     (state) => [state.setMessageToReport, state.toggleShowReportMessage]
   );
   const dispatchToastMessage = useToastBarDispatch();
-  const toastPosition = useToastStore((state) => state.position);
   const { editMessage, setEditMessage } = useMessageStore((state) => ({
     editMessage: state.editMessage,
     setEditMessage: state.setEditMessage,
@@ -129,11 +128,6 @@ const Message = ({
     openThread(msg);
   };
 
-  const getUserAvatarUrl = (username) => {
-    const host = RCInstance.getHost();
-    const URL = `${host}/avatar/${username}`;
-    return URL;
-  };
   const context = useMemo(
     () => ({
       action: async ({ actionId, value, blockId, appId }) => {
@@ -153,141 +147,102 @@ const Message = ({
       appId: message.blocks && message.blocks[0] && message.blocks[0].appId,
       rid: RCInstance.rid,
     }),
-    []
+    [RCInstance, message._id, message.blocks]
   );
 
+  const isStarred = message.starred?.find((u) => u._id === authenticatedUserId);
+  const shouldShowHeader = !sequential || (!showAvatar && isStarred);
   return (
     <>
-      {newDay ? (
-        <MessageDivider>
-          {format(new Date(message.ts), 'MMMM d, yyyy')}
-        </MessageDivider>
-      ) : null}
       <Box
         className={appendClassNames('ec-message', classNames)}
         css={MessageCss}
         isEditing={editMessage.id === message._id}
         isPending={message.isPending}
         style={styleOverrides}
       >
-        <MessageContainer>
-          <Box
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'flex-start',
-              width: '100%',
-            }}
-          >
-            {!sequential && showAvatar ? (
-              <Box style={{ margin: '3px' }}>
-                <Avatar
-                  url={getUserAvatarUrl(message.u.username)}
-                  alt="avatar"
-                />
-              </Box>
-            ) : message.starred &&
-              message.starred.find((u) => u._id === authenticatedUserId) ? (
-              <Box
-                style={{
-                  margin: '3px',
-                  marginTop: '15px',
-                  marginLeft: '20px',
-                }}
+        {showAvatar && (
+          <MessageAvatarContainer
+            message={message}
+            sequential={sequential}
+            isStarred={isStarred}
+          />
+        )}
+        <MessageBodyContainer>
+          {shouldShowHeader && <MessageHeader message={message} />}
+          {!message.t ? (
+            <>
+              <MessageBody
+                className={message.isPending ? classes.PendingMessageBody : ''}
               >
-                <Icon
-                  style={{ opacity: 0.5 }}
-                  name="star-filled"
-                  size="1.2em"
-                />
-              </Box>
-            ) : (
-              <Box
-                style={{
-                  marginLeft: '42px',
-                }}
-              ></Box>
-            )}
-            <Box
-              style={{
-                marginLeft: '5px',
-                position: 'relative',
-                width: '100%',
-              }}
-            >
-              {!sequential && <MessageHeader message={message} />}
-              {!message.t ? (
-                <>
-                  <MessageBody
-                    className={
-                      message.isPending ? classes.PendingMessageBody : ''
-                    }
-                  >
-                    {message.attachments && message.attachments.length > 0 ? (
-                      <>
-                        <Markdown body={message} isReaction={false} />
-                        <Attachments attachments={message.attachments} />
-                      </>
-                    ) : (
-                      <Markdown body={message} isReaction={false} />
-                    )}
-                    {message.blocks && (
-                      <kitContext.Provider value={context} mid={message.mid}>
-                        <UiKitComponent
-                          render={UiKitMessage}
-                          blocks={message.blocks}
-                        />
-                      </kitContext.Provider>
-                    )}
-                  </MessageBody>
-
-                  <MessageReactions
-                    authenticatedUserUsername={authenticatedUserUsername}
-                    message={message}
-                    handleEmojiClick={handleEmojiClick}
-                  />
-                </>
-              ) : (
-                <>
-                  {message.attachments && (
+                {message.attachments && message.attachments.length > 0 ? (
+                  <>
+                    <Markdown body={message} isReaction={false} />
                     <Attachments attachments={message.attachments} />
-                  )}
-                </>
-              )}
-              {message.tcount && variant !== 'thread' ? (
-                <MessageMetrics
-                  message={message}
-                  handleOpenThread={handleOpenThread}
-                />
-              ) : null}
-              {!message.t ? (
-                <MessageToolbox
-                  message={message}
-                  authenticatedUserId={authenticatedUserId}
-                  handleDeleteMessage={handleDeleteMessage}
-                  handleOpenThread={handleOpenThread}
-                  handleStarMessage={handleStarMessage}
-                  handlePinMessage={handlePinMessage}
-                  handleEditMessage={() => {
-                    setEditMessage({
-                      message: message.message,
-                      id: message._id,
-                    });
-                  }}
-                  handleEmojiClick={handleEmojiClick}
-                  handlerReportMessage={() => {
-                    setMessageToReport(message._id);
-                    toggletoggleShowReportMessage();
-                  }}
-                  isThreadMessage={variant === 'thread'}
-                />
-              ) : (
-                <></>
+                  </>
+                ) : (
+                  <Markdown body={message} isReaction={false} />
+                )}
+                {message.blocks && (
+                  <kitContext.Provider value={context} mid={message.mid}>
+                    <UiKitComponent
+                      render={UiKitMessage}
+                      blocks={message.blocks}
+                    />
+                  </kitContext.Provider>
+                )}
+              </MessageBody>
+
+              <MessageReactions
+                authenticatedUserUsername={authenticatedUserUsername}
+                message={message}
+                handleEmojiClick={handleEmojiClick}
+              />
+            </>
+          ) : (
+            <>
+              {message.attachments && (
+                <Attachments attachments={message.attachments} />
               )}
-            </Box>
-          </Box>
-        </MessageContainer>
+            </>
+          )}
+          {message.tcount && variant !== 'thread' ? (
+            <MessageMetrics
+              message={message}
+              handleOpenThread={handleOpenThread}
+            />
+          ) : null}
+          {!message.t ? (
+            <MessageToolbox
+              message={message}
+              authenticatedUserId={authenticatedUserId}
+              handleDeleteMessage={handleDeleteMessage}
+              handleOpenThread={handleOpenThread}
+              handleStarMessage={handleStarMessage}
+              handlePinMessage={handlePinMessage}
+              handleEditMessage={() => {
+                setEditMessage({
+                  message: message.message,
+                  id: message._id,
+                });
+              }}
+              handleEmojiClick={handleEmojiClick}
+              handlerReportMessage={() => {
+                setMessageToReport(message._id);
+                toggletoggleShowReportMessage();
+              }}
+              isThreadMessage={variant === 'thread'}
+            />
+          ) : (
+            <></>
+          )}
+        </MessageBodyContainer>
       </Box>
+      {newDay ? (
+        <MessageDivider>
+          {format(new Date(message.ts), 'MMMM d, yyyy')}
+        </MessageDivider>
+      ) : null}
     </>
   );
 };

diff --git a/packages/react/src/components/Message/MessageAvatarContainer.js b/packages/react/src/components/Message/MessageAvatarContainer.js
@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { css } from '@emotion/react';
+import { Avatar } from '../Avatar';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import RCContext from '../../context/RCInstance';
+
+const MessageAvatarContainer = ({ message, sequential, isStarred }) => {
+  const { RCInstance } = useContext(RCContext);
+  const getUserAvatarUrl = (username) => {
+    const host = RCInstance.getHost();
+    const URL = `${host}/avatar/${username}`;
+    return URL;
+  };
+  const MessageAvatarContainerCss = css`
+    margin: 3px;
+    width: 2.25em;
+    max-height: 2.25em;
+    display: flex;
+    justify-content: flex-end;
+  `;
+  return (
+    <Box css={MessageAvatarContainerCss}>
+      {!sequential ? (
+        <Avatar
+          url={getUserAvatarUrl(message.u.username)}
+          alt="avatar"
+          size={message.t ? '1.2em' : '2.25em'}
+        />
+      ) : isStarred ? (
+        <Icon style={{ opacity: 0.5 }} name="star-filled" size="1.2em" />
+      ) : null}
+    </Box>
+  );
+};
+
+export default MessageAvatarContainer;
diff --git a/packages/react/src/components/Message/MessageBody.js b/packages/react/src/components/Message/MessageBody.js
@@ -37,7 +37,7 @@ export const MessageBody = ({
       style={styleOverrides}
       {...props}
     >
-      <p>{children}</p>
+      {children}
     </Box>
   );
 };
diff --git a/packages/react/src/components/Message/MessageBodyContainer.js b/packages/react/src/components/Message/MessageBodyContainer.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+import { Box } from '../Box';
+import { appendClassNames } from '../../lib/appendClassNames';
+
+const MessageBodyContainer = ({ children }) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageBodyContainer'
+  );
+  const classNameMBC = css`
+    margin-left: 5px;
+    position: relative;
+    width: 100%;
+  `;
+  return (
+    <Box
+      css={classNameMBC}
+      className={appendClassNames('ec-message-body-container', classNames)}
+      style={styleOverrides}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default MessageBodyContainer;
diff --git a/packages/react/src/components/Message/MessageContainer.js b/packages/react/src/components/Message/MessageContainer.js
@@ -6,7 +6,9 @@ import { appendClassNames } from '../../lib/appendClassNames';
 
 const MessageContainerCss = css`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
   flex-grow: 1;
   flex-shrink: 1;
   min-width: 1px;