diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx index 47fb3b94..a3f67684 100644 --- a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx +++ b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx @@ -32,7 +32,9 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: const { temperatureUnitToHumanReadable } = useAppStore() - useVisibilityNotifier({ widgetName: BOX_TYPES.BATTERIES, visible: !!(batteries && batteries.length) }) + const hasValidData = !!(batteries && batteries.length) + + useVisibilityNotifier({ widgetName: BOX_TYPES.BATTERIES, isVisible: hasValidData }) const sortedBatteries = sortBatteries(batteries ?? []) const overviewBatteries = batteriesForOverview(sortedBatteries) diff --git a/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx b/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx index 34b47397..47632ce6 100644 --- a/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx +++ b/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx @@ -32,6 +32,11 @@ import { ISize } from "@m2Types/generic/size" import { AC_SOURCE, BOX_TYPES } from "../../../utils/constants/generic" import { RELAY_FUNCTION } from "../../../utils/constants/devices/generators" +interface Props { + componentMode?: ComponentMode + pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void +} + const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => { const { inverters } = useInverters() const { instanceId: vebusInstanceId, vebusInverters } = useVebus() @@ -51,7 +56,9 @@ const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Pr componentMode ) - useVisibilityNotifier({ widgetName: BOX_TYPES.DEVICES, visible: !!boxes.length }) + const hasValidData = !!boxes.length + + useVisibilityNotifier({ widgetName: BOX_TYPES.DEVICES, isVisible: hasValidData }) if (!boxes.length) { return null @@ -186,9 +193,4 @@ const getAvailableDeviceBoxes = function ( return devices } -interface Props { - componentMode?: ComponentMode - pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void -} - export default observer(DevicesOverview) diff --git a/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx b/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx index e8e0ad0b..ffa7d7dc 100644 --- a/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx +++ b/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx @@ -27,8 +27,9 @@ const EnergyOverview: FC = ({ componentMode = "full", pageSelectorPropsSe const boxes = useAvailableEnergyBoxes(compactBoxSize, componentMode) const activeStyles = applyStyles(compactBoxSize, defaultBoxStyles) - // TODO: it seems that visibility logic can be improved since the energy component always has an overview box - useVisibilityNotifier({ widgetName: BOX_TYPES.ENERGY, visible: boxes.length > 0 }) + const hasValidData = boxes.length > 0 + + useVisibilityNotifier({ widgetName: BOX_TYPES.ENERGY, isVisible: hasValidData }) if (!boxes.length) { return null diff --git a/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx b/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx index 95fbb45a..6c704a93 100644 --- a/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx +++ b/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx @@ -72,7 +72,9 @@ const EnvironmentOverview = ({ componentMode = "full", pageSelectorPropsSetter } (sensor: any) => sensor.temperature || sensor.humidity || sensor.pressure ) - useVisibilityNotifier({ widgetName: BOX_TYPES.ENVIRONMENT, visible: sensorHasData }) + const hasValidData = sensorHasData + + useVisibilityNotifier({ widgetName: BOX_TYPES.ENVIRONMENT, isVisible: hasValidData }) if (componentMode === "compact") { return ( diff --git a/src/app/Marine2/components/boxes/Tanks/Tanks.tsx b/src/app/Marine2/components/boxes/Tanks/Tanks.tsx index ba69b6a6..3d65faf7 100644 --- a/src/app/Marine2/components/boxes/Tanks/Tanks.tsx +++ b/src/app/Marine2/components/boxes/Tanks/Tanks.tsx @@ -27,7 +27,9 @@ const Tanks = ({ componentMode = "full", className }: Props) => { const [boxSize, setBoxSize] = useState({ width: 0, height: 0 }) - useVisibilityNotifier({ widgetName: BOX_TYPES.TANKS, visible: !!filteredTanks.length }) + const hasValidData = !!filteredTanks.length + + useVisibilityNotifier({ widgetName: BOX_TYPES.TANKS, isVisible: hasValidData }) const gridRef = useRef(null) const [orientation, setOrientation] = useState("vertical") diff --git a/src/app/Marine2/components/views/RootView.tsx b/src/app/Marine2/components/views/RootView.tsx index 4dd7e333..85e92c4c 100644 --- a/src/app/Marine2/components/views/RootView.tsx +++ b/src/app/Marine2/components/views/RootView.tsx @@ -21,10 +21,12 @@ const RootView = () => { const visibleBoxes: JSX.Element[] = [] const hiddenBoxes: JSX.Element[] = [] for (const type of Object.values(BOX_TYPES)) { + const isVisible = visibleWidgetsStore.visibleElements.has(type) + const elem = getBoxByType(type) if (!elem) continue - if (visibleWidgetsStore.visibleElements.has(type)) { + if (isVisible) { visibleBoxes.push(elem) } else { hiddenBoxes.push(elem) diff --git a/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.provider.ts b/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.provider.ts index 24ad841b..60416ec0 100644 --- a/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.provider.ts +++ b/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.provider.ts @@ -1,13 +1,12 @@ import { useEffect } from "react" -import { notifyParams, useVisibleWidgetsStore } from "./VisibleWidgets.store" +import { VisibilityParams, useVisibleWidgetsStore } from "./VisibleWidgets.store" -export const useVisibilityNotifier = ({ widgetName, visible }: notifyParams) => { +export const useVisibilityNotifier = ({ widgetName, isVisible }: VisibilityParams) => { const visibleWidgetsStore = useVisibleWidgetsStore() useEffect(() => { - visibleWidgetsStore.notifyVisibility({ widgetName, visible }) + visibleWidgetsStore.changeVisibility({ widgetName, isVisible }) - return () => visibleWidgetsStore.notifyVisibility({ widgetName, visible: false }) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [visible, widgetName]) + }, [widgetName, isVisible]) } diff --git a/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts b/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts index 256cdbb4..e870da71 100644 --- a/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts +++ b/src/app/Marine2/modules/MetricsWidgets/VisibleWidgets.store.ts @@ -2,25 +2,24 @@ import { makeAutoObservable } from "mobx" import { useMemo } from "react" import { BOX_TYPES } from "../../utils/constants/generic" -export type notifyParams = { +export type VisibilityParams = { widgetName: BOX_TYPES - visible: boolean + isVisible: boolean } export class VisibleWidgets { - // TODO: add order prop to have a consistent order of boxes visibleElements: Set = new Set() constructor() { makeAutoObservable(this) } - notifyVisibility(element: notifyParams) { + changeVisibility(element: VisibilityParams) { let isDirty = false - if (element.visible && !this.visibleElements.has(element.widgetName)) { + if (element.isVisible && !this.visibleElements.has(element.widgetName)) { this.visibleElements.add(element.widgetName) isDirty = true - } else if (this.visibleElements.has(element.widgetName)) { + } else if (!element.isVisible && this.visibleElements.has(element.widgetName)) { this.visibleElements.delete(element.widgetName) isDirty = true } @@ -38,7 +37,7 @@ export class VisibleWidgets { } clearVisibleElements() { - this.visibleElements.clear() + this.visibleElements = new Set() } }