fix(visibleWidgets): fix visibleWidget tracking bug, cleanup

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)

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)

src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx

@@ -27,8 +27,9 @@ const EnergyOverview: FC<Props> = ({ 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

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 (

src/app/Marine2/components/boxes/Tanks/Tanks.tsx

@@ -27,7 +27,9 @@ const Tanks = ({ componentMode = "full", className }: Props) => {
 
   const [boxSize, setBoxSize] = useState<ISize>({ 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<HTMLDivElement>(null)
   const [orientation, setOrientation] = useState<ScreenOrientation>("vertical")

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)

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])
 }

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<BOX_TYPES> = 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()
   }
 }