From 48e09b51dc0d3c697aa4df5ae1fe382c4ce48adc Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Fri, 1 Sep 2023 21:55:35 +0200
Subject: [PATCH] fix(web): autoscrolling for Logs page (#1069)

* fix(web): autoscrolling for Logs page

* replace setTimeout with useEffect and dep
prevent duplicate log entries when toggling settings.scrollOnNewLog through clearing logs once
---
 web/src/screens/Logs.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/screens/Logs.tsx b/web/src/screens/Logs.tsx
index 98df86b..6aec8b5 100644
--- a/web/src/screens/Logs.tsx
+++ b/web/src/screens/Logs.tsx
@@ -52,9 +52,20 @@ export const Logs = () => {
   const [filteredLogs, setFilteredLogs] = useState<LogEvent[]>([]);
   const [isInvalidRegex, setIsInvalidRegex] = useState(false);
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" });
-  };
+  useEffect(() => {
+    const scrollToBottom = () => {
+      if (messagesEndRef.current) {
+        messagesEndRef.current.scrollTop = messagesEndRef.current.scrollHeight;
+      }
+    };
+    if (settings.scrollOnNewLog)
+      scrollToBottom();
+  }, [filteredLogs]);
+
+  // Add a useEffect to clear logs div when settings.scrollOnNewLog changes to prevent duplicate entries.
+  useEffect(() => {
+    setLogs([]);
+  }, [settings.scrollOnNewLog]);
 
   useEffect(() => {
     const es = APIClient.events.logs();
@@ -62,9 +73,6 @@ export const Logs = () => {
     es.onmessage = (event) => {
       const newData = JSON.parse(event.data) as LogEvent;
       setLogs((prevState) => [...prevState, newData]);
-
-      if (settings.scrollOnNewLog)
-        scrollToBottom();
     };
 
     return () => es.close();
@@ -122,7 +130,7 @@ export const Logs = () => {
             <LogsDropdown />
           </div>
 
-          <div className="overflow-y-auto px-2 rounded-lg h-[60vh] min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto">
+          <div className="overflow-y-auto px-2 rounded-lg h-[60vh] min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto" ref={messagesEndRef}>
             {filteredLogs.map((entry, idx) => (
               <div
                 key={idx}
@@ -153,7 +161,6 @@ export const Logs = () => {
                 </span>
               </div>
             ))}
-            <div className="mt-6" ref={messagesEndRef} />
           </div>
         </div>
       </div>