From 2180342ace6bd5cd202aabd34f6db675969edb50 Mon Sep 17 00:00:00 2001 From: Swetha-Baskaran Date: Sat, 16 Dec 2023 23:06:21 +0530 Subject: [PATCH 1/5] fix: date separation on community chat --- src/components/CommunityChat/index.css | 11 ++ src/components/CommunityChat/index.jsx | 141 ++++++++++++++++++++++++- 2 files changed, 149 insertions(+), 3 deletions(-) diff --git a/src/components/CommunityChat/index.css b/src/components/CommunityChat/index.css index 6449131de..694255529 100644 --- 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; +} + + .current-user-msg { flex-direction: row-reverse; margin-left: auto; @@ -277,6 +284,10 @@ } @media screen and (max-width: 600px) { + .date-separator{ + font-size: 10px; + } + .chat-msg-text { padding: 6px 9px; } diff --git a/src/components/CommunityChat/index.jsx b/src/components/CommunityChat/index.jsx index eccf8921a..e2ba036e7 100644 --- a/src/components/CommunityChat/index.jsx +++ b/src/components/CommunityChat/index.jsx @@ -1,10 +1,11 @@ +import React from "react"; import "./index.css"; import { auth, db } from "../../lib/firebase"; import { playErrorSound, playSuccessSound } from "../../js/sounds"; import { useEffect, useRef, useState } from "react"; -import { ClickAwayListener } from "@mui/material"; +import { Chip, ClickAwayListener, Divider } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import DeleteIcon from "@mui/icons-material/DeleteOutlineOutlined"; import EditIcon from "@mui/icons-material/EditOutlined"; @@ -264,6 +265,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 ( <>
@@ -278,7 +317,103 @@ const ChatBox = () => { ) : (
    - {messages.map((message) => ( + {Object.keys(groupedMessages).map((date) => ( + +
  • + + {date} + +
    • + {groupedMessages[date].map((message) => ( +
  • + {message.displayName} goToUserProfile(message.uid)} + /> +
    + +
    goToUserProfile(message.uid)} + > + {user?.uid === message?.uid + ? "You" + : message.displayName} +
    + +
    + {getTime(message?.createdAt?.seconds)} +
    + + {user.uid === message.uid && ( + + { + setOpenOptions(true); + handleOpenOptions(message.id); + }} + /> + {openOptions && openOptions === message.id && ( + setOpenOptions(false)} + > +
    + + handleDeletMsg(message.id) + } + > + + Delete + + + handleEditMsg(message.id) + } + > + + Edit + +
    +     + )} +     + )} +     +     +

    {message.text}

    + {message.edited && ( +
    + Edited +
    + )} + {message.reaction && ( +
      + {getReaction(message.reaction)} +
    + )} +
    +
    • + ))} +     + ))} + + {/* correct code */} + {console.log("msgs", messages)} + {/* {messages.map((message) => (
  • { )}
- ))} + ))} */}
)} From baa0c67ad1bf0c226b2a187277119616ae1d02c0 Mon Sep 17 00:00:00 2001 From: Swetha-Baskaran Date: Sat, 16 Dec 2023 23:10:02 +0530 Subject: [PATCH 2/5] removed commented code --- src/components/CommunityChat/index.jsx | 83 -------------------------- 1 file changed, 83 deletions(-) diff --git a/src/components/CommunityChat/index.jsx b/src/components/CommunityChat/index.jsx index e2ba036e7..e9539e4ee 100644 --- a/src/components/CommunityChat/index.jsx +++ b/src/components/CommunityChat/index.jsx @@ -410,89 +410,6 @@ const ChatBox = () => { ))} ))} - - {/* correct code */} - {console.log("msgs", messages)} - {/* {messages.map((message) => ( -
  • - {message.displayName} goToUserProfile(message.uid)} - /> -
    - -
    goToUserProfile(message.uid)} - > - {user?.uid === message?.uid - ? "You" - : message.displayName} -
    - -
    - {getTime(message?.createdAt?.seconds)} -
    - - {user.uid === message.uid && ( - - { - setOpenOptions(true); - handleOpenOptions(message.id); - }} - /> - {openOptions && openOptions === message.id && ( - setOpenOptions(false)} - > -
    - handleDeletMsg(message.id)} - > - - Delete - - handleEditMsg(message.id)} - > - - Edit - -
    -     - )} -     - )} -     -     -

    {message.text}

    - {message.edited && ( -
    - Edited -
    - )} - {message.reaction && ( -
      - {getReaction(message.reaction)} -
    - )} -
    -
    • - ))} */} )} From 8f592424a3baa863590572425242c4341de19017 Mon Sep 17 00:00:00 2001 From: Swetha-Baskaran Date: Sat, 16 Dec 2023 23:24:13 +0530 Subject: [PATCH 3/5] date text correction on dark mode --- src/components/CommunityChat/index.css | 3 ++- src/components/CommunityChat/index.jsx | 14 ++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/CommunityChat/index.css b/src/components/CommunityChat/index.css index 694255529..9e007f1bd 100644 --- a/src/components/CommunityChat/index.css +++ b/src/components/CommunityChat/index.css @@ -113,6 +113,7 @@ padding: 1.5rem 0; list-style-type: none; font-size: 15px; + color: var(--darkmode-white); } @@ -285,7 +286,7 @@ @media screen and (max-width: 600px) { .date-separator{ - font-size: 10px; + font-size: 9px; } .chat-msg-text { diff --git a/src/components/CommunityChat/index.jsx b/src/components/CommunityChat/index.jsx index e9539e4ee..6a6f2d57d 100644 --- a/src/components/CommunityChat/index.jsx +++ b/src/components/CommunityChat/index.jsx @@ -271,9 +271,9 @@ const ChatBox = () => { const today = new Date(); const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1); - - const options = { day: '2-digit', month: '2-digit', year: 'numeric' }; - + + const options = { day: "2-digit", month: "2-digit", year: "numeric" }; + if (messageDate.toDateString() === today.toDateString()) { return "Today"; } else if (messageDate.toDateString() === yesterday.toDateString()) { @@ -320,7 +320,13 @@ const ChatBox = () => { {Object.keys(groupedMessages).map((date) => (
  • - + {date}
    • From 0879705b6ef9b11ac464c736ae066cbd4332c9e7 Mon Sep 17 00:00:00 2001 From: Narayan soni Date: Sun, 17 Dec 2023 14:59:38 +0530 Subject: [PATCH 4/5] style: formatting --- src/components/CommunityChat/index.css | 7 +++---- src/components/CommunityChat/index.jsx | 9 ++++----- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/CommunityChat/index.css b/src/components/CommunityChat/index.css index 9e007f1bd..d3dd4828a 100644 --- a/src/components/CommunityChat/index.css +++ b/src/components/CommunityChat/index.css @@ -109,14 +109,13 @@ color: var(--profile-color); } -.date-separator{ +.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; @@ -285,8 +284,8 @@ } @media screen and (max-width: 600px) { - .date-separator{ - font-size: 9px; + .date-separator { + font-size: 9px; } .chat-msg-text { diff --git a/src/components/CommunityChat/index.jsx b/src/components/CommunityChat/index.jsx index 6a6f2d57d..23d045345 100644 --- a/src/components/CommunityChat/index.jsx +++ b/src/components/CommunityChat/index.jsx @@ -1,11 +1,10 @@ -import React from "react"; 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 { Chip, ClickAwayListener, Divider } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import DeleteIcon from "@mui/icons-material/DeleteOutlineOutlined"; import EditIcon from "@mui/icons-material/EditOutlined"; @@ -318,7 +317,7 @@ const ChatBox = () => {
      {Object.keys(groupedMessages).map((date) => ( - +
    • {
    ))} -     + ))} From 15e686b1678ec11045950133925bffc6dae85c1a Mon Sep 17 00:00:00 2001 From: Narayan soni Date: Sun, 17 Dec 2023 15:57:40 +0530 Subject: [PATCH 5/5] fix: scroll fix with new bug --- src/components/CommunityChat/index.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CommunityChat/index.jsx b/src/components/CommunityChat/index.jsx index 23d045345..c881f9ba6 100644 --- a/src/components/CommunityChat/index.jsx +++ b/src/components/CommunityChat/index.jsx @@ -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); }