Refactored string to typescript type ComponentMode.

#327
victronenergy · Sep 19, 2023 · 4a71ef5 · 4a71ef5
1 parent f4c0ef6
commit 4a71ef5
Show file tree

Hide file tree

Showing 26 changed files with 149 additions and 100 deletions.
diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.test.js b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.test.js
@@ -5,7 +5,7 @@ import { AppViews } from "../../../modules/AppViews"
 
 describe("BatteriesOverview element", () => {
   describe("compact mode", () => {
-    const wrapper = mount(<BatteriesOverview mode={"compact"} />)
+    const wrapper = mount(<BatteriesOverview componentMode="compact" />)
 
     it("should show content", () => {
       expect(wrapper.find(BatteriesOverview).exists()).toBe(true)

diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
@@ -1,28 +1,29 @@
+import classNames from "classnames"
+import { translate } from "react-i18nify"
 import { observer } from "mobx-react-lite"
+import range from "lodash-es/range"
 import { Battery as BatteryType, useBattery } from "@victronenergy/mfd-modules"
 import Box from "../../ui/Box"
 import { BATTERY, BoxTypes } from "../../../utils/constants"
 import Battery from "../Battery"
 import BatteriesIcon from "../../../images/icons/batteries.svg"
 import BatterySummary from "../../ui/BatterySummary"
 import { AppViews } from "../../../modules/AppViews"
-import { translate } from "react-i18nify"
 import { useVisibilityNotifier } from "../../../modules"
 import GridPaginator from "../../ui/GridPaginator"
 import { useEffect, useState, useRef } from "react"
 import { PageSelectorProps } from "../../ui/PageSelector"
 import { boxBreakpoints } from "../../../utils/media"
 import PageFlipper from "../../ui/PageFlipper"
-import range from "lodash-es/range"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
-import classNames from "classnames"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 interface Props {
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void
 }
 
-const BatteriesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
+const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { batteries } = useBattery()
   const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
 
@@ -57,7 +58,7 @@ const BatteriesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) =>
     setPages(Math.ceil(overviewBatteries.length / batteriesPerPage))
   }, [boxSize, overviewBatteries])
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <Box
         /* todo: fix types for svg */

diff --git a/src/app/Marine2/components/boxes/Charger/Charger.tsx b/src/app/Marine2/components/boxes/Charger/Charger.tsx
@@ -16,6 +16,7 @@ import RadioButton from "../../ui/RadioButton"
 import DeviceSettingModal from "../../ui/DeviceSettingModal/DeviceSettingModal"
 import ValueOverview from "../../ui/ValueOverview"
 import { formatValue } from "../../../utils/formatters"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Props) => {
   const chargerModeFormatter = (value: number) => {
@@ -205,7 +206,7 @@ const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Prop
 
 interface Props {
   instanceId: ChargerInstanceId
-  componentMode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 

diff --git a/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx b/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx
@@ -28,8 +28,9 @@ import React from "react"
 import GeneratorRelay from "../GeneratorRelay/GeneratorRelay"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import classNames from "classnames"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
+const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { inverters } = useInverters()
   const { instanceId, vebusInverters } = useVebus()
   const { chargers } = useChargers()
@@ -38,14 +39,14 @@ const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
   const [compactBoxSize, setCompactBoxSize] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 })
 
   const boxes = getAvailableDeviceBoxes(
-    mode,
     chargers,
     inverters,
     vebusInverters,
     instanceId,
     generatorFp,
     generatorRelay,
-    compactBoxSize
+    compactBoxSize,
+    componentMode
   )
 
   useVisibilityNotifier({ widgetName: BoxTypes.DEVICES, visible: !!boxes.length })
@@ -55,7 +56,7 @@ const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
   }
 
   const activeStyles = applyStyles(compactBoxSize, defaultBoxStyles)
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <Box
         title={translate("boxes.devices")}
@@ -90,20 +91,22 @@ const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
 }
 
 const getAvailableDeviceBoxes = function (
-  mode: "compact" | "full" | undefined,
   chargers: ChargerInstanceId[],
   inverters: InverterInstanceId[],
   vebusInverters: VebusInverters,
   instanceId: InstanceId,
   generatorFp: GeneratorFpProvider,
   generatorRelay: GeneratorRelayProvider,
-  compactBoxSize: { width: number; height: number }
+  compactBoxSize: { width: number; height: number },
+  componentMode?: ComponentMode
 ) {
   let devices = []
 
   if (!!chargers) {
     chargers.forEach((charger) => {
-      devices.push(<Charger key={charger} instanceId={charger} componentMode={mode} compactBoxSize={compactBoxSize} />)
+      devices.push(
+        <Charger key={charger} instanceId={charger} componentMode={componentMode} compactBoxSize={compactBoxSize} />
+      )
     })
   }
 
@@ -114,7 +117,7 @@ const getAvailableDeviceBoxes = function (
           key={id}
           instanceId={id}
           isVebusInverter={false}
-          componentMode={mode}
+          componentMode={componentMode}
           compactBoxSize={compactBoxSize}
         />
       )
@@ -128,20 +131,25 @@ const getAvailableDeviceBoxes = function (
           key={id}
           instanceId={id}
           isVebusInverter={true}
-          componentMode={mode}
+          componentMode={componentMode}
           compactBoxSize={compactBoxSize}
         />
       )
     })
   }
 
   if (!!instanceId) {
-    devices.push(<InverterCharger key={instanceId} componentMode={mode} compactBoxSize={compactBoxSize} />)
+    devices.push(<InverterCharger key={instanceId} componentMode={componentMode} compactBoxSize={compactBoxSize} />)
   }
 
   if (!!generatorFp.phases)
     devices.push(
-      <GeneratorFp key={"generatorFp"} generatorFp={generatorFp} mode={mode} compactBoxSize={compactBoxSize} />
+      <GeneratorFp
+        key={"generatorFp"}
+        generatorFp={generatorFp}
+        componentMode={componentMode}
+        compactBoxSize={compactBoxSize}
+      />
     )
   if (!!generatorRelay.settings) {
     if (generatorRelay.settings.includes(AC_SOURCE.GENERATOR)) {
@@ -152,7 +160,7 @@ const getAvailableDeviceBoxes = function (
               key={"generator_relay" + i}
               {...generatorRelay}
               active={generatorRelay.activeInput === i}
-              mode={mode}
+              componentMode={componentMode}
               compactBoxSize={compactBoxSize}
             />
           )
@@ -162,15 +170,20 @@ const getAvailableDeviceBoxes = function (
       generatorRelay.statusCode !== undefined
     ) {
       devices.push(
-        <GeneratorRelay key={"generator_relay"} {...generatorRelay} mode={mode} compactBoxSize={compactBoxSize} />
+        <GeneratorRelay
+          key={"generator_relay"}
+          {...generatorRelay}
+          componentMode={componentMode}
+          compactBoxSize={compactBoxSize}
+        />
       )
     }
   }
   return devices
 }
 
 interface Props {
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void
 }
 

diff --git a/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx b/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx
@@ -7,11 +7,12 @@ import ValueOverview from "../../ui/ValueOverview"
 import { phaseUnitFor } from "../../../utils/formatters/phase-unit-for"
 import { phaseValueFor } from "../../../utils/formatters/phase-value-for"
 import { ValueWithUnit } from "@m2Types/generic/value-with-units"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyAC = ({ mode = "compact", acLoads, compactBoxSize }: Props) => {
+const EnergyAC = ({ componentMode = "compact", acLoads, compactBoxSize }: Props) => {
   const { current, power, phases, voltage } = acLoads
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -49,7 +50,7 @@ const EnergyAC = ({ mode = "compact", acLoads, compactBoxSize }: Props) => {
 
 interface Props {
   acLoads: AcLoadsState
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 

diff --git a/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx b/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx
@@ -4,13 +4,14 @@ import { useAlternator } from "@victronenergy/mfd-modules"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyAlternator = ({ mode = "compact", alternator, showInstance, compactBoxSize }: Props) => {
+const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance, compactBoxSize }: Props) => {
   const { current, voltage } = useAlternator(alternator)
   const instance = showInstance ? ` [${alternator}]` : ""
   const power = current * voltage
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -40,7 +41,7 @@ const EnergyAlternator = ({ mode = "compact", alternator, showInstance, compactB
 interface Props {
   alternator: number
   showInstance: boolean
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 

diff --git a/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx b/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx
@@ -3,23 +3,24 @@ import DCIcon from "../../../images/icons/dc.svg"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyDC = ({ mode = "compact", dcLoads, compactBoxSize }: Props) => {
+const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props) => {
   const { power, voltage, current } = dcLoads
 
   if (isNaN(power) || isNaN(voltage)) {
     return <></>
   }
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
         /* @ts-ignore */
         Icon={DCIcon}
         title={translate("boxes.dcLoads")}
         value={current}
-        unit={"A"}
+        unit="A"
         boxSize={compactBoxSize}
       />
     )
@@ -40,7 +41,7 @@ const EnergyDC = ({ mode = "compact", dcLoads, compactBoxSize }: Props) => {
 
 interface Props {
   dcLoads: DcLoadsState
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 

diff --git a/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.test.js b/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.test.js
@@ -5,7 +5,7 @@ import { AppViews } from "../../../modules/AppViews"
 
 describe("EnergyOverview element", () => {
   describe("compact mode", () => {
-    const wrapper = mount(<EnergyOverview mode={"compact"} />)
+    const wrapper = mount(<EnergyOverview componentMode="compact" />)
 
     it("should show content", () => {
       expect(wrapper.find(EnergyOverview).exists()).toBe(true)