From f957aa76cf10e1ca12a35926a94bf36860832ad7 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Tue, 26 Oct 2021 09:16:07 +0200
Subject: [PATCH] Fix loading messages (#97)

---
 packages/react-chat/src/components/Chat.tsx              | 2 +-
 packages/react-chat/src/components/Chat/ChatMessages.tsx | 9 +++++----
 packages/react-chat/src/utils/equalDate.ts               | 7 +++++++
 packages/react-chat/src/utils/index.ts                   | 1 +
 4 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-chat/src/utils/equalDate.ts

diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 9656057d..3ee414ef 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -129,7 +129,7 @@ export function Chat({
         showMembers={showMembers}
         community={communityData}
         showCommunity={!showChannels}
-        loadPrevDay={() => loadPrevDay(activeChannel.name)}
+        loadPrevDay={() => loadPrevDay(activeChannel.id)}
         onCommunityClick={showModal}
         fetchMetadata={fetchMetadata}
         loadingMessages={loadingMessages}
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index 40f84d9d..872ad548 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import { ChatMessage } from "../../models/ChatMessage";
 import { Metadata } from "../../models/Metadata";
+import { equalDate } from "../../utils";
 import { LoadingIcon } from "../Icons/LoadingIcon";
 import { UserIcon } from "../Icons/UserIcon";
 import { LinkModal } from "../Modals/LinkModal";
@@ -26,7 +27,7 @@ export function ChatMessages({
 }: ChatMessagesProps) {
   const [scrollOnBot, setScrollOnBot] = useState(true);
   const ref = useRef<HTMLHeadingElement>(null);
-  const today = useMemo(() => new Date().getDay(), []);
+  const today = useMemo(() => new Date(), []);
   useEffect(() => {
     if (ref && ref.current && scrollOnBot) {
       ref.current.scrollTop = ref.current.scrollHeight;
@@ -38,6 +39,7 @@ export function ChatMessages({
       if (
         (ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0)
       ) {
+        setScrollOnBot(true);
         loadPrevDay();
       }
     }
@@ -84,10 +86,9 @@ export function ChatMessages({
         return (
           <MessageOuterWrapper key={message.date.getTime()}>
             {(idx === 0 ||
-              messages[idx - 1].date.getDay() !=
-                messages[idx].date.getDay()) && (
+              !equalDate(messages[idx - 1].date, message.date)) && (
               <DateSeparator>
-                {message.date.getDay() === today
+                {equalDate(message.date, today)
                   ? "Today"
                   : message.date.toLocaleDateString()}
               </DateSeparator>
diff --git a/packages/react-chat/src/utils/equalDate.ts b/packages/react-chat/src/utils/equalDate.ts
new file mode 100644
index 00000000..02ac9824
--- /dev/null
+++ b/packages/react-chat/src/utils/equalDate.ts
@@ -0,0 +1,7 @@
+export function equalDate(a: Date, b: Date) {
+  return (
+    a.getDate() === b.getDate() &&
+    a.getMonth() === b.getMonth() &&
+    a.getFullYear() === b.getFullYear()
+  );
+}
diff --git a/packages/react-chat/src/utils/index.ts b/packages/react-chat/src/utils/index.ts
index 096eb09f..9b50e9aa 100644
--- a/packages/react-chat/src/utils/index.ts
+++ b/packages/react-chat/src/utils/index.ts
@@ -9,3 +9,4 @@ export {
 } from "./identityStorage";
 export { reduceString } from "./reduceString";
 export { uintToImgUrl } from "./uintToImgUrl";
+export { equalDate } from "./equalDate";