Optimize code readability

muke1908 · Aug 10, 2024 · 37120b3 · 37120b3
1 parent 8b7b762
commit 37120b3
Showing 1 changed file with 11 additions and 15 deletions.
diff --git 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 (