From 8b7b762d5e2112406c92665a2783c92b7a6d342d Mon Sep 17 00:00:00 2001
From: hfdem <yang.ruipeng@outlook.com>
Date: Sat, 10 Aug 2024 06:05:51 +0800
Subject: [PATCH 1/3] fix: pointer always pops up when sending and receiving
 messages

The "New Messages" pointer pops up both when sending messages continuously and receiving messages.
https://github.com/muke1908/chat-e2ee/issues/77#issuecomment-2277770989
---
 .../components/Messaging/ScrollWrapper.tsx    | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Messaging/ScrollWrapper.tsx b/client/src/components/Messaging/ScrollWrapper.tsx
index 0d8a8d8..e97f4c4 100644
--- a/client/src/components/Messaging/ScrollWrapper.tsx
+++ b/client/src/components/Messaging/ScrollWrapper.tsx
@@ -8,48 +8,52 @@ type ScrollWrapperProps = {
 
 export const ScrollWrapper = ({ children, messageCount }: ScrollWrapperProps) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
   const [showPopup, setShowPopup] = useState(false);
-  const [scrollAtBottom, setScrollAtBottom] = useState(true);
 
   useEffect(() => {
-    if (wrapperRef.current) {
+    const handleScroll = () => {
       const wrapper = wrapperRef.current;
-      const isScrolledToBottom = wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
-      setScrollAtBottom(isScrolledToBottom);
-      if (isScrolledToBottom) {
-        wrapper.scrollTop = wrapper.scrollHeight;
-      } else {
-        setShowPopup(true);
+      if (!wrapper) return;
+      setIsAtBottom(wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight);
+    };
+
+ const wrapperElement = wrapperRef.current;
+    if (wrapperElement) {
+      wrapperElement.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      if (wrapperElement) {
+        wrapperElement.removeEventListener('scroll', handleScroll);
       }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isAtBottom && messageCount > 0) {
+      scrollToBottom();
     }
-  }, [messageCount]);
+  }, [messageCount, isAtBottom]);
 
   useEffect(() => {
-    if (scrollAtBottom && wrapperRef.current) {
-      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    if (!isAtBottom && messageCount > 0) {
+      setShowPopup(true);
     }
-  }, [scrollAtBottom, messageCount]);
+// eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messageCount]);
 
   const scrollToBottom = () => {
     if (wrapperRef.current) {
       wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
-      setShowPopup(false);
-    }
-  };
-
-  const handleScroll = () => {
-    if (wrapperRef.current) {
-      const wrapper = wrapperRef.current;
-      const isScrolledToBottom = wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
-      setScrollAtBottom(isScrolledToBottom);
-      setShowPopup(false);
     }
+    setShowPopup(false);
   };
 
   return (
-    <div className={styles.scrollWrapper} ref={wrapperRef} onScroll={handleScroll}>
+    <div className={styles.scrollWrapper} ref={wrapperRef}>
       {children}
-      {showPopup && !scrollAtBottom && (
+      {showPopup && (
         <div className={styles.popup} onClick={scrollToBottom}>
           New Messages
         </div>

From 37120b362a7b0ce528716d1fcb6980bc83a88cda Mon Sep 17 00:00:00 2001
From: hfdem <yang.ruipeng@outlook.com>
Date: Sat, 10 Aug 2024 17:57:12 +0800
Subject: [PATCH 2/3] Optimize code readability

---
 .../components/Messaging/ScrollWrapper.tsx    | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Messaging/ScrollWrapper.tsx b/client/src/components/Messaging/ScrollWrapper.tsx
index e97f4c4..deb474a 100644
--- a/client/src/components/Messaging/ScrollWrapper.tsx
+++ b/client/src/components/Messaging/ScrollWrapper.tsx
@@ -12,42 +12,38 @@ export const ScrollWrapper = ({ children, messageCount }: ScrollWrapperProps) =>
   const [showPopup, setShowPopup] = useState(false);
 
   useEffect(() => {
+    const wrapper = wrapperRef.current;
     const handleScroll = () => {
-      const wrapper = wrapperRef.current;
       if (!wrapper) return;
       setIsAtBottom(wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight);
     };
 
- const wrapperElement = wrapperRef.current;
-    if (wrapperElement) {
-      wrapperElement.addEventListener('scroll', handleScroll);
+    if (wrapper) {
+      wrapper.addEventListener('scroll', handleScroll);
     }
 
     return () => {
-      if (wrapperElement) {
-        wrapperElement.removeEventListener('scroll', handleScroll);
+      if (wrapper) {
+        wrapper.removeEventListener('scroll', handleScroll);
       }
     };
   }, []);
 
   useEffect(() => {
-    if (isAtBottom && messageCount > 0) {
+    if (isAtBottom) {
       scrollToBottom();
-    }
-  }, [messageCount, isAtBottom]);
-
-  useEffect(() => {
-    if (!isAtBottom && messageCount > 0) {
+    } else {
       setShowPopup(true);
     }
 // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageCount]);
 
   const scrollToBottom = () => {
-    if (wrapperRef.current) {
-      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    const wrapper = wrapperRef.current;
+    if (wrapper) {
+      setShowPopup(false);
+      wrapper.scrollTop = wrapper.scrollHeight;
     }
-    setShowPopup(false);
   };
 
   return (

From 0a8b569d57aeff2f76720072426e46db4168f1a1 Mon Sep 17 00:00:00 2001
From: hfdem <yang.ruipeng@outlook.com>
Date: Mon, 12 Aug 2024 04:33:09 +0800
Subject: [PATCH 3/3] hide popup if manually scroll to bottom

---
 client/src/components/Messaging/ScrollWrapper.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Messaging/ScrollWrapper.tsx b/client/src/components/Messaging/ScrollWrapper.tsx
index deb474a..6a2c64a 100644
--- a/client/src/components/Messaging/ScrollWrapper.tsx
+++ b/client/src/components/Messaging/ScrollWrapper.tsx
@@ -15,7 +15,13 @@ export const ScrollWrapper = ({ children, messageCount }: ScrollWrapperProps) =>
     const wrapper = wrapperRef.current;
     const handleScroll = () => {
       if (!wrapper) return;
-      setIsAtBottom(wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight);
+      const atBottom = wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight - 1;
+      setIsAtBottom(atBottom);
+
+      // Hide popup if scrolled to bottom
+      if (atBottom) {
+        setShowPopup(false);
+      }
     };
 
     if (wrapper) {