From ef322328eb301bd22aec4f196da8ed03e7c4830b Mon Sep 17 00:00:00 2001 From: Luc <8822552+luc-github@users.noreply.github.com> Date: Sat, 3 Aug 2024 17:28:42 +0800 Subject: [PATCH] Fix duplicate call for unmount --- .../ExtraContent/extraContentItem.js | 8 ++- src/components/ExtraContent/index.js | 2 +- src/components/Panels/ExtraPanel.js | 2 + src/contexts/UiContext.js | 65 ++++++++++--------- src/pages/extrapages/index.js | 1 + 5 files changed, 45 insertions(+), 33 deletions(-) diff --git a/src/components/ExtraContent/extraContentItem.js b/src/components/ExtraContent/extraContentItem.js index 4bc4244c..cf828892 100644 --- 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 index 10af0ab4..5a2a3d99 100644 --- 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 index d07a7125..85d100b4 100644 --- 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 ( { id, content: ( 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 index f6b5c3ff..ec5d94fb 100644 --- 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 (