rendaring all messages

IT18021080/Telemedicine-Chat-App/frontend/src/components/ScrollableChat.js

+import { Avatar, Tooltip } from "@chakra-ui/react";
+import React from "react";
+import { isLastMessage, isSameSender, isSameSenderMargin, isSameUser } from "../config/ChatLogics";
+import { ChatState } from "../Context/ChatProvider";
+
+
+const ScrollableChat = ({ messages }) => {
+    
+    const { user } = ChatState();
+
+   return (
+        <>
+            {messages && messages.map((m, i) => (
+                <div style={{display:"flex"}} key={m._id}>
+                    {(isSameSender(messages, m, i, user._id) ||
+                        isLastMessage(messages, i, user._id)) && (
+                        <Tooltip label={m.sender.name} placement="bottom-start" hasArrow>
+                            <Avatar
+                                mt="7px"
+                                mr={1}
+                                size="sm"
+                                cursor="pointer"
+                                name={m.sender.name}
+                                src={m.sender.pic}
+                            />
+                        </Tooltip>
+                        )}
+                    
+                    <span
+                        style={{
+                            backgroundColor: `${
+                                m.sender._id === user._id ? "#BEE3F8" : "#B9F5D0"
+                                }`,
+                            borderRadius: "20px",
+                            padding: "5px 15px",
+                            maxWidth: "75%",
+                            marginLeft: isSameSenderMargin(messages, m, i, user._id),
+                            marginTop:isSameUser(messages, m, i, user._id) ? 3: 10,
+                    }}
+                    >
+                        {m.content}
+                    </span>
+        </div>
+        ))}
+  </>
+   );
+};
+
+export default ScrollableChat;
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/components/SingleChat.js

@@ -7,6 +7,7 @@ import ProfileModal from "./miscellaneous/ProfileModal";
 import UpdateGroupChatModal from "./miscellaneous/UpdateGroupChatModal";
 import axios from "axios";
 import "./styles.css";
+import ScrollableChat from "./ScrollableChat";
 
 
 const SingleChat = ({ fetchAgain, setFetchAgain }) => {
@@ -154,7 +155,9 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
                                 margin="auto"
                             />
                         ) : (
-                                <div className="messages">{/* Messages */ }</div>
+                                <div className="messages">
+                                    <ScrollableChat messages={ messages}/>
+                                </div>
                         )}
 
                         <FormControl onKeyDown={sendMessage} isRequired mt={3}>

IT18021080/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js

@@ -6,4 +6,44 @@ export const getSender = (loggedUser, users) => {
 export const getSenderFull = (loggedUser, users) => {
     return users[0]._id === loggedUser._id ? users[1] : users[0];
 
+};
+
+export const isSameSender = (messages, m, i, userId) => {
+    return (
+        i < messages.length - 1 &&
+        (messages[i + 1].sender._id !== m.sender._id ||
+            messages[i + 1].sender._id === undefined) &&
+        messages[i].sender._id !== userId
+        
+    );
+};
+
+export const isLastMessage = (messages, i, userId) => {
+    return (
+        i === messages.length - 1 &&
+        messages[messages.length - 1].sender._id !== userId &&
+        messages[messages.length - 1].sender._id
+
+    );
+};
+
+export const isSameSenderMargin = (messages, m, i, userId) => {
+    if (
+        i < messages.length - 1 &&
+        messages[i + 1].sender._id === m.sender._id &&
+        messages[i].sender._id !== userId
+    )
+        return 33;
+    else if (
+        (i < messages.length - 1 &&
+            messages[i + 1].sender._id !== m.sender._id &&
+            messages[i].sender._id !== userId) ||
+        (i === messages.length - 1 && messages[i].sender._id !== userId)
+    )
+        return 0;
+    else return "auto";
+};
+
+export const isSameUser = (messages, m, i) => {
+    return i > 0 && messages[i - 1].sender._id === m.sender._id;
 };
\ No newline at end of file