Enhancement Request - Date Indication in Messaging Section #1314 (#1315)

* fix: date separation on community chat * removed commented code * date text correction on dark mode * style: formatting * fix: scroll fix with new bug --------- Co-authored-by: Narayan soni <[email protected]>
narayan954 · Dec 17, 2023 · abf4fc7 · abf4fc7
1 parent 165ce39
commit abf4fc7
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 79 deletions.
diff --git a/src/components/CommunityChat/index.css b/src/components/CommunityChat/index.css
@@ -109,6 +109,13 @@
   color: var(--profile-color);
 }
 
+.date-separator {
+  padding: 1.5rem 0;
+  list-style-type: none;
+  font-size: 15px;
+  color: var(--darkmode-white);
+}
+
 .current-user-msg {
   flex-direction: row-reverse;
   margin-left: auto;
@@ -277,6 +284,10 @@
 }
 
 @media screen and (max-width: 600px) {
+  .date-separator {
+    font-size: 9px;
+  }
+
   .chat-msg-text {
     padding: 6px 9px;
   }

diff --git a/src/components/CommunityChat/index.jsx b/src/components/CommunityChat/index.jsx
@@ -1,10 +1,10 @@
 import "./index.css";
 
+import { ClickAwayListener, Divider } from "@mui/material";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { auth, db } from "../../lib/firebase";
 import { playErrorSound, playSuccessSound } from "../../js/sounds";
-import { useEffect, useRef, useState } from "react";
 
-import { ClickAwayListener } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import DeleteIcon from "@mui/icons-material/DeleteOutlineOutlined";
 import EditIcon from "@mui/icons-material/EditOutlined";
@@ -196,11 +196,12 @@ const ChatBox = () => {
 
   useEffect(() => {
     const scrollTop = () => {
-      window.scrollTo({ top: window.innerHeight + 800 });
+      window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
+      // Scroll to the bottom of the page
+      // TODO: Fix this
+      // chatMsgContainerRef.current.scrollTop = chatMsgContainerRef.current.scrollHeight
     };
-    if (!isLastMsgRecieved) {
-      scrollTop();
-    }
+    scrollTop();
   }, [messages]);
 
   //Load messages for the first time
@@ -250,7 +251,6 @@ const ChatBox = () => {
                 ...loadedMsgs,
               ];
             });
-
             if (querySnapshot.empty) {
               setIsLastMsgRecieved(true);
             }
@@ -264,6 +264,44 @@ const ChatBox = () => {
     };
   }, [loadMoreMsgs]);
 
+  // Function to format the message creation date
+  const formatDate = (timestamp) => {
+    const messageDate = new Date(timestamp * 1000); // Convert seconds to milliseconds
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+
+    const options = { day: "2-digit", month: "2-digit", year: "numeric" };
+
+    if (messageDate.toDateString() === today.toDateString()) {
+      return "Today";
+    } else if (messageDate.toDateString() === yesterday.toDateString()) {
+      return "Yesterday";
+    } else {
+      // Format the actual date as 'dd/mm/yyyy'
+      return messageDate.toLocaleDateString("en-IN", options);
+    }
+  };
+
+  // Function to group messages by date
+  const groupMessagesByDate = (messages) => {
+    const groupedMessages = {};
+    messages.forEach((message) => {
+      const formattedDate = formatDate(message?.createdAt?.seconds);
+      if (!groupedMessages[formattedDate]) {
+        groupedMessages[formattedDate] = [];
+      }
+      groupedMessages[formattedDate].push(message);
+    });
+    return groupedMessages;
+  };
+
+  const [groupedMessages, setGroupedMessages] = useState({});
+
+  useEffect(() => {
+    setGroupedMessages(groupMessagesByDate(messages));
+  }, [messages]);
+
   return (
     <>
       <div className="chat-main-container">
@@ -278,85 +316,104 @@ const ChatBox = () => {
         ) : (
           <div className="all-chat-msg-container" ref={chatMsgContainerRef}>
             <ul className="chat-msg-container">
-              {messages.map((message) => (
-                <li
-                  key={message.id}
-                  className={`chat-message ${
-                    user?.uid == message.uid ? "current-user-msg" : ""
-                  }`}
-                >
-                  <img
-                    src={message.photoURL || profileAvatar}
-                    alt={message.displayName}
-                    className={"chat-user-img"}
-                    onClick={() => goToUserProfile(message.uid)}
-                  />
-                  <div className="chat-msg-text">
-                    <span className="name-and-date-container">
-                      <h5
-                        className="chat-msg-sender-name"
+              {Object.keys(groupedMessages).map((date) => (
+                <Fragment key={date}>
+                  <li className="date-separator">
+                    <Divider
+                      sx={{
+                        "&::before, &::after": {
+                          borderColor: "var(--text-light)",
+                        },
+                      }}
+                    >
+                      {date}
+                    </Divider>
+                  </li>
+                  {groupedMessages[date].map((message) => (
+                    <li
+                      key={message.id}
+                      className={`chat-message ${
+                        user?.uid == message.uid ? "current-user-msg" : ""
+                      }`}
+                    >
+                      <img
+                        src={message.photoURL || profileAvatar}
+                        alt={message.displayName}
+                        className={"chat-user-img"}
                         onClick={() => goToUserProfile(message.uid)}
-                      >
-                        {user?.uid === message?.uid
-                          ? "You"
-                          : message.displayName}
-                      </h5>
-                      <span className="time-reaction-container">
-                        <h6 className="message-time">
-                          {getTime(message?.createdAt?.seconds)}
-                        </h6>
-                        <Reaction
-                          message={message}
-                          userUid={message.uid}
-                          currentUid={user.uid}
-                        />
-                        {user.uid === message.uid && (
-                          <span className="flex-center message-options">
-                            <OptionIcon
-                              onClick={() => {
-                                setOpenOptions(true);
-                                handleOpenOptions(message.id);
-                              }}
+                      />
+                      <div className="chat-msg-text">
+                        <span className="name-and-date-container">
+                          <h5
+                            className="chat-msg-sender-name"
+                            onClick={() => goToUserProfile(message.uid)}
+                          >
+                            {user?.uid === message?.uid
+                              ? "You"
+                              : message.displayName}
+                          </h5>
+                          <span className="time-reaction-container">
+                            <h6 className="message-time">
+                              {getTime(message?.createdAt?.seconds)}
+                            </h6>
+                            <Reaction
+                              message={message}
+                              userUid={message.uid}
+                              currentUid={user.uid}
                             />
-                            {openOptions && openOptions === message.id && (
-                              <ClickAwayListener
-                                onClickAway={() => setOpenOptions(false)}
-                              >
-                                <div className="delete-message-container">
-                                  <span
-                                    className="delete-option"
-                                    onClick={() => handleDeletMsg(message.id)}
+                            {user.uid === message.uid && (
+                              <span className="flex-center message-options">
+                                <OptionIcon
+                                  onClick={() => {
+                                    setOpenOptions(true);
+                                    handleOpenOptions(message.id);
+                                  }}
+                                />
+                                {openOptions && openOptions === message.id && (
+                                  <ClickAwayListener
+                                    onClickAway={() => setOpenOptions(false)}
                                   >
-                                    <DeleteIcon />
-                                    Delete
-                                  </span>
-                                  <span
-                                    className="edit-option"
-                                    onClick={() => handleEditMsg(message.id)}
-                                  >
-                                    <EditIcon />
-                                    Edit
-                                  </span>
-                                </div>
-                              </ClickAwayListener>
+                                    <div className="delete-message-container">
+                                      <span
+                                        className="delete-option"
+                                        onClick={() =>
+                                          handleDeletMsg(message.id)
+                                        }
+                                      >
+                                        <DeleteIcon />
+                                        Delete
+                                      </span>
+                                      <span
+                                        className="edit-option"
+                                        onClick={() =>
+                                          handleEditMsg(message.id)
+                                        }
+                                      >
+                                        <EditIcon />
+                                        Edit
+                                      </span>
+                                    </div>
+                                  </ClickAwayListener>
+                                )}
+                              </span>
                             )}
                           </span>
+                        </span>
+                        <p>{message.text}</p>
+                        {message.edited && (
+                          <div className="edit-state">
+                            <span>Edited</span>
+                          </div>
+                        )}
+                        {message.reaction && (
+                          <ul className="rxn-main-container">
+                            {getReaction(message.reaction)}
+                          </ul>
                         )}
-                      </span>
-                    </span>
-                    <p>{message.text}</p>
-                    {message.edited && (
-                      <div className="edit-state">
-                        <span>Edited</span>
                       </div>
-                    )}
-                    {message.reaction && (
-                      <ul className="rxn-main-container">
-                        {getReaction(message.reaction)}
-                      </ul>
-                    )}
-                  </div>
-                </li>
+                    </li>
+                  ))}
+                </Fragment>
               ))}
             </ul>
           </div>