From e9dfba7d3159d81a9ef350bc5a25e4c411188c88 Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Tue, 26 Nov 2024 08:39:21 -0800
Subject: [PATCH] feature/IO-3000-messaging-sockets-migration2 - Extra checks
 on scroll to index to prevent console warns when no messages exist in the
 conversation.

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 .../chat-message-list.component.jsx           | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/components/chat-messages-list/chat-message-list.component.jsx b/client/src/components/chat-messages-list/chat-message-list.component.jsx
index 81d3296fc..00b9204cc 100644
--- a/client/src/components/chat-messages-list/chat-message-list.component.jsx
+++ b/client/src/components/chat-messages-list/chat-message-list.component.jsx
@@ -3,33 +3,41 @@ import { Virtuoso } from "react-virtuoso";
 import { renderMessage } from "./renderMessage";
 import "./chat-message-list.styles.scss";
 
+const SCROLL_DELAY_MS = 50;
+const INITIAL_SCROLL_DELAY_MS = 100;
+
 export default function ChatMessageListComponent({ messages }) {
   const virtuosoRef = useRef(null);
 
   // Scroll to the bottom after a short delay when the component mounts
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (virtuosoRef.current) {
+      if (virtuosoRef?.current?.scrollToIndex && messages?.length) {
         virtuosoRef.current.scrollToIndex({
           index: messages.length - 1,
           behavior: "auto" // Instantly scroll to the bottom
         });
       }
-    }, 100); // Delay of 100ms to allow rendering
+    }, INITIAL_SCROLL_DELAY_MS);
+
+    // Cleanup the timeout on unmount
     return () => clearTimeout(timer);
-  }, [messages.length]); // Run only once on component mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // ESLint is disabled for this line because we only want this to load once (valid exception)
 
   // Scroll to the bottom after the new messages are rendered
   useEffect(() => {
-    if (virtuosoRef.current) {
-      // Allow the DOM and Virtuoso to fully render the new data
-      setTimeout(() => {
+    if (virtuosoRef?.current?.scrollToIndex && messages?.length) {
+      const timeout = setTimeout(() => {
         virtuosoRef.current.scrollToIndex({
           index: messages.length - 1,
           align: "end", // Ensure the last message is fully visible
           behavior: "smooth" // Smooth scrolling
         });
-      }, 50); // Slight delay to ensure layout recalculates
+      }, SCROLL_DELAY_MS); // Slight delay to ensure layout recalculates
+
+      // Cleanup timeout on dependency changes
+      return () => clearTimeout(timeout);
     }
   }, [messages]); // Triggered when new messages are added