Fix duplicate call for unmount

luc-github · Aug 3, 2024 · ef32232 · ef32232
1 parent f577d34
commit ef32232
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 33 deletions.
diff --git a/src/components/ExtraContent/extraContentItem.js b/src/components/ExtraContent/extraContentItem.js
@@ -49,7 +49,7 @@ const ExtraContentItem = ({
     const refreshIntervalRef = useRef(null)
     console.log(`Rendering ExtraContentItem ${id} at ${Date.now()}`);
     if (visibilityState[id] === undefined) {
-        visibilityState[id] = isVisibleOnStart;
+        visibilityState[id] = target=="panel" ? isVisibleOnStart : true;
     }
     if (isLoadedState[id] === undefined) {
         isLoadedState[id] = false;
@@ -84,7 +84,11 @@ const ExtraContentItem = ({
     }, [id])
 
     const loadContent = useCallback(() => {
-        //console.log("Loading content for " + id)
+        if (target=="page"){
+            console.log("Loading content for page " + id)
+            console.log(useUiContextFn.panels.isVisible(elementsCache.getRootfromId(id)))
+        }
+
         if (isPaused || !visibilityState[id] || !useUiContextFn.panels.isVisible(elementsCache.getRootfromId(id))) return
         setIsLoading(true)
         if (source.startsWith("http")) {

diff --git a/src/components/ExtraContent/index.js b/src/components/ExtraContent/index.js
@@ -76,7 +76,7 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
 
             updateContentPosition()
     }
-    }, [panels.visibles])
+    }, [panels.updateTrigger])
 
     useEffect(() => {
         console.log("Mount element " + id)

diff --git a/src/components/Panels/ExtraPanel.js b/src/components/Panels/ExtraPanel.js
@@ -26,6 +26,7 @@ import {ExtraContent} from "../ExtraContent"
 const ExtraPanel = ({ id, source, refreshtime, label, type, icon }) => {
     return (
         <ExtraContent
+            key={id}
             label={label}
             icon={icon}
             id={id}
@@ -43,6 +44,7 @@ const ExtraPanelElement = (element, id) => {
         id,
         content: (
             <ExtraPanel
+                key={id}
                 label={element.name}
                 icon={element.icon}
                 id={id}

diff --git a/src/contexts/UiContext.js b/src/contexts/UiContext.js
@@ -17,7 +17,7 @@
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 import { h, createContext } from "preact"
-import { useContext, useState, useRef, useEffect } from "preact/hooks"
+import { useContext, useState, useRef, useEffect, useCallback } from "preact/hooks"
 import {
     generateUID,
     removeEntriesByIDs,
@@ -35,7 +35,8 @@ const useUiContext = () => useContext(UiContext)
 const UiContextProvider = ({ children }) => {
     const [panelsList, setPanelsList] = useState([])
     const [panelsOrder, setPanelsOrder] = useState([])
-    const [visiblePanelsList, setVisiblePanelsList] = useState([])
+    const visiblePanelsListRef = useRef([]);
+    const [updateTrigger, setUpdateTrigger] = useState(0);
     const uiRefreshPaused = useRef({})
     const timersList = useRef({})
     const [initPanelsVisibles, setInitPanelsVisibles] = useState(false)
@@ -59,36 +60,38 @@ const UiContextProvider = ({ children }) => {
     const notificationsRef = useRef(notifications)
     notificationsRef.current = notifications
 
-    const removeFromVisibles = (id) => {
-        const newlist = visiblePanelsList.filter((element) => element.id != id)
-        console.log("Removing element " + id + " from visible panels list")
-        console.log(visiblePanelsList)
-        setVisiblePanelsList(newlist)
-    }
+    const removeFromVisibles = useCallback((id) => {
+        visiblePanelsListRef.current = visiblePanelsListRef.current.filter(
+            (element) => element.id != id
+        );
+        setUpdateTrigger(prev => prev + 1);
+    }, []);
 
-    const addToVisibles = (id, fixed) => {
+    const addToVisibles = useCallback((id, fixed) => {
         if (fixed && panelsOrder.length > 0) {
             const unSortedVisiblePanelsList = [
-                ...visiblePanelsList.filter((element) => element.id != id),
+                ...visiblePanelsListRef.current.filter((element) => element.id != id),
                 ...panelsList.filter((element) => element.id == id),
-            ]
-            const sortedVisiblePanelsList = [
-                ...panelsOrder.reduce((acc, panel) => {
-                    const paneldesc = unSortedVisiblePanelsList.filter(
-                        (p) => p.settingid == panel.id
-                    )
-                    if (paneldesc.length > 0) acc.push(...paneldesc)
-                    return acc
-                }, []),
-            ]
-            setVisiblePanelsList([...sortedVisiblePanelsList])
+            ];
+            visiblePanelsListRef.current = panelsOrder.reduce((acc, panel) => {
+                const paneldesc = unSortedVisiblePanelsList.filter(
+                    (p) => p.settingid == panel.id
+                );
+                if (paneldesc.length > 0) acc.push(...paneldesc);
+                return acc;
+            }, []);
         } else {
-            setVisiblePanelsList([
+            visiblePanelsListRef.current = [
                 ...panelsList.filter((element) => element.id == id),
-                ...visiblePanelsList.filter((element) => element.id != id),
-            ])
+                ...visiblePanelsListRef.current.filter((element) => element.id != id),
+            ];
         }
-    }
+        setUpdateTrigger(prev => prev + 1);
+    }, [panelsList, panelsOrder]);
+
+    const isPanelVisible = useCallback((id) => {
+        return visiblePanelsListRef.current.some((element) => element.id == id);
+    }, []);
 
     const addToast = (newToast) => {
         const id = generateUID()
@@ -328,9 +331,6 @@ const UiContextProvider = ({ children }) => {
         play(seq)
     }
 
-    const isPanelVisible = (id) => {
-        return visiblePanelsList.findIndex((element) => element.id == id) > -1
-    }
 
     useUiContextFn.toasts = { addToast, removeToast, toastList: toasts }
     useUiContextFn.panels = { hide: removeFromVisibles,isVisible: isPanelVisible }
@@ -345,13 +345,18 @@ const UiContextProvider = ({ children }) => {
         panels: {
             list: panelsList,
             set: setPanelsList,
-            visibles: visiblePanelsList,
-            setVisibles: setVisiblePanelsList,
+            visibles: visiblePanelsListRef.current,
+            setVisibles: (newList) => {
+                visiblePanelsListRef.current = newList;
+                setUpdateTrigger(prev => prev + 1);
+            },
             hide: removeFromVisibles,
             show: addToVisibles,
+            isVisible: isPanelVisible,
             initDone: initPanelsVisibles,
             setInitDone: setInitPanelsVisibles,
             setPanelsOrder: setPanelsOrder,
+            updateTrigger: updateTrigger,
         },
         shortcuts: {
             enabled: isKeyboardEnabled,

diff --git a/src/pages/extrapages/index.js b/src/pages/extrapages/index.js
@@ -23,6 +23,7 @@ import {ExtraContent} from "../../components/ExtraContent"
 const ExtraPage = ({ id, source, refreshtime, label, type }) => {
     return (
         <ExtraContent
+            key={id}
             id={id}
             label={label}
             source={source}