Merge pull request #11 from theonej203/main

grouping messages
ChatKitty · Jun 8, 2022 · 1b2d29d · 1b2d29d
2 parents 44fd03c + b2c038f
commit 1b2d29d
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 76 deletions.
diff --git a/src/fragments/ChatMessages.tsx b/src/fragments/ChatMessages.tsx
@@ -104,10 +104,11 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
         flexDirection="column-reverse"
       >
         <div ref={messagesEndRef} />
-        {messages.map((message) => (
+        {messages.map((message, index) => (
           <div key={message.id} id={String(message.id)}>
             <MessageListItem
               message={message}
+              previousMessage={ (index < messages.length - 1) ? messages[index+1] : undefined}
               avatar={
                 isUserMessage(message) ? (
                   <UserAvatar

diff --git a/src/fragments/MessageListItem.tsx b/src/fragments/MessageListItem.tsx
@@ -1,4 +1,9 @@
-import { Message as ChatKittyMessage, isFileMessage, isTextMessage, isUserMessage } from 'chatkitty';
+import {
+  Message as ChatKittyMessage,
+  isFileMessage,
+  isTextMessage,
+  isUserMessage,
+} from 'chatkitty';
 import moment from 'moment';
 import { ChatAppContext } from 'providers/ChatAppProvider';
 import React, { ReactElement, useContext, useEffect, useState } from 'react';
@@ -14,118 +19,151 @@ import { useHover } from 'react-chat-ui-kit';
 
 import replyIcon from '../assets/images/reply-icon.png';
 
-
 import Message from './Message';
 import PopupEmojiWindow from './PopupEmojiWindow';
 import Reactions from './Reactions';
 
 interface MessageListItemProps {
   message: ChatKittyMessage;
   avatar: ReactElement;
+  previousMessage?: ChatKittyMessage;
 }
 
-
-
 const MessageListItem: React.FC<MessageListItemProps> = ({
   message,
   avatar,
+  previousMessage,
 }: MessageListItemProps) => {
   const sender: { displayName: string } = isUserMessage(message)
     ? message.user
     : {
         displayName: 'ChatKitty',
       };
-  
+
   const [isHovering, hoverProps] = useHover({ mouseEnterDelayMS: 0 });
-  const {changeReply, getMessageParent} = useContext(ChatAppContext);
-  const [messageParent, setMessageParent] = useState<ChatKittyMessage | null>(null);
+  const { changeReply, getMessageParent } = useContext(ChatAppContext);
+  const [messageParent, setMessageParent] = useState<ChatKittyMessage | null>(
+    null
+  );
 
+  const [sameUser, setSameUser] = useState<boolean | null>(true);
 
   useEffect(() => {
     getMessageParent(message).then((message) => {
-      setMessageParent(message)
+      setMessageParent(message);
     });
-  },[])
 
+    if (previousMessage) {
+      const time = moment(message.createdTime);
+      const previousTime = moment(previousMessage.createdTime);
+      const ellapsedTime = time.diff(previousTime, 'minute');
+
+      setSameUser(
+        isUserMessage(previousMessage) &&
+          previousMessage.user.displayName === sender.displayName &&
+          ellapsedTime < 1
+      );
+    }
+  }, []);
 
   const changeReplyMessage = () => {
     changeReply(message);
-  }
-  
+  };
+
   const scrollToElement = () => {
-    const element = document.getElementById(String(messageParent?.id))
-    
-    if(element){
+    const element = document.getElementById(String(messageParent?.id));
+
+    if (element) {
       element.scrollIntoView(false);
     }
-  }
-
+  };
 
-
-  return (<>
-    {messageParent && isUserMessage(messageParent) &&
-      <FlexRow 
-        style={{marginLeft:'20px', cursor:'pointer'}}
+  return (
+    <div style={{ position: 'relative' }}>
+      {messageParent && isUserMessage(messageParent) && (
+        <FlexRow
+          style={{ marginLeft: '20px', cursor: 'pointer' }}
+          alignItems="flex-start"
+          bg={isHovering ? 'backgrounds.contentHover' : ''}
+          {...hoverProps}
+          onClick={scrollToElement}
+        >
+          <strong>@{messageParent.user.displayName}</strong>
+          {isTextMessage(messageParent) && <p>: {messageParent.body}</p>}
+          {isFileMessage(messageParent) && <p>: {messageParent.file.name}</p>}
+        </FlexRow>
+      )}
+      <FlexRow
+        py="1"
+        px={[5, 6]}
         alignItems="flex-start"
         bg={isHovering ? 'backgrounds.contentHover' : ''}
         {...hoverProps}
-        onClick={scrollToElement}
       >
-        <strong>@{messageParent.user.displayName}</strong>
-        {isTextMessage(messageParent) && <p>: {messageParent.body}</p>}
-        {isFileMessage(messageParent) && <p>: {messageParent.file.name}</p>}
-      </FlexRow>
-    }
-    <FlexRow
-      py="1"
-      px={[5, 6]}
-      alignItems="flex-start"
-      bg={isHovering ? 'backgrounds.contentHover' : ''}
-      {...hoverProps}
-    >
-      {avatar}
-      <FlexColumn marginLeft="5" flexGrow={1}>
-        <FlexRow marginBottom="1">
-          <StyledBox marginRight="3">
-            <Heading>{sender.displayName}</Heading>
-          </StyledBox>
-          <Label size={LabelSizes.SMALL}>
-            {moment(message.createdTime).fromNow()}
-          </Label>
-          {isHovering && (
-            <FlexRow>
-              <StyledBox
-                style={{
-                  position: 'relative',
-                  left: '100px',
-                  borderRadius: '20%',
-                  marginLeft:'5px',
-                  height: '17px',
-                  width: '15px',
-                }}
+        {(!sameUser || messageParent || !previousMessage) && avatar}
+        <FlexColumn marginLeft="5" flexGrow={1}>
+          <FlexRow marginBottom="1">
+            {(!sameUser || messageParent || !previousMessage) && (
+              <StyledBox marginRight="3">
+                <Heading>{sender.displayName}</Heading>
+              </StyledBox>
+            )}
+            {(!sameUser || messageParent || !previousMessage) && (
+              <Label size={LabelSizes.SMALL}>
+                {moment(message.createdTime).fromNow()}
+              </Label>
+            )}
+          </FlexRow>
+
+          <FlexRow>
+            <div
+              style={{
+                position: 'relative',
+                left:
+                  sameUser && !messageParent && previousMessage
+                    ? '30px'
+                    : '0px',
+              }}
+            >
+              <Message message={message} />
+            </div>
+            {isHovering && (
+              <FlexRow
+                style={{ position: 'absolute', top: '10px', right: '50px' }}
               >
                 <PopupEmojiWindow message={message} />
-
-              </StyledBox>
-              <div style={{
-                  position: 'relative',
-                  left: '100px',
-                  borderRadius: '20%',
-                  marginLeft:'5px',
-                  height: '17px',
-                  width: '15px',
-                }}>
-                  <img src={replyIcon} style={{width:'20px', cursor:'pointer'}} onClick={changeReplyMessage}/> 
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: '0px',
+                    right: '30px',
+                    borderRadius: '20%',
+                    height: '17px',
+                    width: '15px',
+                  }}
+                >
+                  <img
+                    src={replyIcon}
+                    style={{ width: '20px', cursor: 'pointer' }}
+                    onClick={changeReplyMessage}
+                  />
                 </div>
-            </FlexRow>
-          )}
-        </FlexRow>
+              </FlexRow>
+            )}
+          </FlexRow>
 
-        <Message message={message} />
-        <Reactions message={message} />
-      </FlexColumn>
-    </FlexRow>
-    </> 
+          <div
+            style={{
+              position: 'relative',
+              marginLeft:
+                sameUser && !messageParent && previousMessage ? '30px' : '0px',
+            }}
+          >
+            <Reactions message={message} />
+          </div>
+        </FlexColumn>
+      </FlexRow>
+    </div>
   );
 };
 

diff --git a/src/fragments/PopupEmojiWindow.tsx b/src/fragments/PopupEmojiWindow.tsx
@@ -43,7 +43,7 @@ const PopupEmojiWindow: React.FC<popupProp> = ({ message }: popupProp) => {
   };
 
   return (
-    <StyledBox style={{ marginRight: '50px', marginBottom: '170px' }}>
+    <StyledBox >
       <EmojiInput value="" onSelection={emojiClickListener} />
     </StyledBox>
   );

diff --git a/src/providers/ChatAppProvider.tsx b/src/providers/ChatAppProvider.tsx
@@ -164,7 +164,11 @@ const ChatAppContextProvider: React.FC<ChatAppContextProviderProps> = ({
   const views: Set<View> = new Set();
 
   const demoUsers = [
-    '910746e1-d6e1-4df1-80b6-88ad90d7d2ad'
+    'b2a6da08-88bf-4778-b993-7234e6d8a3ff',
+    'c6f75947-af48-4893-a78e-0e0b9bd68580',
+    'abc4264d-f1b1-41c0-b4cc-1e9daadfc893',
+    '2989c53a-d0c5-4222-af8d-fbf7b0c74ec6',
+    '8fadc920-f3e6-49ff-9398-1e58b3dc44dd',
   ];
 
   const getLayout = (): LayoutState => {