From 78c03f267f2105757a6f1cfbfc9f9ede697c2824 Mon Sep 17 00:00:00 2001
From: Frank Waalkens <f.waalkens@tfe.nl>
Date: Mon, 16 Oct 2023 14:47:57 +0200
Subject: [PATCH] Refactored components, abstracted enums, uniform title for
 device helper and more.

---
 .../components/boxes/Charger/Charger.tsx      | 188 ++++++++----------
 .../boxes/DevicesOverview/DevicesOverview.tsx |  16 +-
 .../components/boxes/Inverter/Inverter.tsx    |  78 +++-----
 .../boxes/InverterCharger/InverterCharger.tsx |  27 +--
 .../utils/helpers/devices/short-title-for.ts  |   1 -
 .../utils/helpers/devices/title-for.ts        |   1 +
 6 files changed, 141 insertions(+), 170 deletions(-)
 delete mode 100644 src/app/Marine2/utils/helpers/devices/short-title-for.ts
 create mode 100644 src/app/Marine2/utils/helpers/devices/title-for.ts

diff --git a/src/app/Marine2/components/boxes/Charger/Charger.tsx b/src/app/Marine2/components/boxes/Charger/Charger.tsx
index 58f577bde..b08b6b995 100644
--- a/src/app/Marine2/components/boxes/Charger/Charger.tsx
+++ b/src/app/Marine2/components/boxes/Charger/Charger.tsx
@@ -1,17 +1,16 @@
-import { ChargerInstanceId, useCharger } from "@victronenergy/mfd-modules"
-import { observer } from "mobx-react-lite"
-import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
+import { useEffect, useState } from "react"
+import { observer } from "mobx-react"
+import classNames from "classnames"
 import { translate } from "react-i18nify"
+import { ChargerInstanceId, useCharger } from "@victronenergy/mfd-modules"
 import { CHARGER_MODE } from "../../../utils/constants"
-import { formatStateForTranslation } from "../../../utils/format"
+import { CURRENT_LIMIT_STEP } from "../../../utils/constants/generic"
 import Button from "../../ui/Button"
 import GeneratorIcon from "../../../images/icons/generator.svg"
-import classnames from "classnames"
+import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
 import ValueBar from "../../ui/ValueBar"
 import Box from "../../ui/Box"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
-import { useEffect, useState } from "react"
-import classNames from "classnames"
 import RadioButton from "../../ui/RadioButton"
 import DeviceSettingModal from "../../ui/DeviceSettingModal/DeviceSettingModal"
 import ValueOverview from "../../ui/ValueOverview"
@@ -23,21 +22,18 @@ import {
   currentStepIncrementFor,
   isCurrentStepDividable,
 } from "../../../utils/helpers/current-limit-adjuster"
-import { CURRENT_LIMIT_STEP } from "../../../utils/constants/generic"
 import { ISize } from "@m2Types/generic/size"
+import { titleFor } from "../../../utils/helpers/devices/title-for"
+import { translatedStateFor } from "../../../utils/helpers/devices/translated-state-for"
+import { formatModeFor } from "../../../utils/formatters/devices/charger/format-mode-for"
 
-const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Props) => {
-  const chargerModeFormatter = (value: number) => {
-    switch (value) {
-      case CHARGER_MODE.OFF:
-        return translate("common.off")
-      case CHARGER_MODE.ON:
-        return translate("common.on")
-      default:
-        return translate("common.emptyBar")
-    }
-  }
+interface Props {
+  instanceId: ChargerInstanceId
+  componentMode?: ComponentMode
+  compactBoxSize?: ISize
+}
 
+const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Props) => {
   let {
     nrOfOutputs = 3,
     productName,
@@ -52,11 +48,11 @@ const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Prop
   // When a topic is invalid, it returns undefined -> no value means topic is not supported
   const chargerSupportsMode = mode !== undefined
   const chargerSupportsInputLimit = currentLimit !== undefined
-  const chargerMode = chargerModeFormatter(Number(mode))
+  const chargerMode = formatModeFor(mode)
   const currentValue = !!current && (!!current[0] || current[0] === 0) ? current[0] : undefined
-  const subTitle = !!state || state === 0 ? translate(formatStateForTranslation(Number(state))) : undefined
 
-  const productNameShort = customName || (productName && productName.split(" ")[0])
+  const title = titleFor(customName, productName)
+  const subTitle = translatedStateFor(state)
 
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
   const activeStyles = applyStyles(boxSize, defaultBoxStyles)
@@ -117,7 +113,7 @@ const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Prop
         /* todo: fix types for svg */
         /* @ts-ignore */
         Icon={InverterChargerIcon}
-        title={productNameShort}
+        title={title}
         subtitle={subTitle}
         value={currentValue}
         unit="A"
@@ -129,94 +125,84 @@ const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Prop
   return (
     <Box
       icon={
-        <GeneratorIcon
-          /* todo: fix types for svg */
-          /* @ts-ignore */
-          className="w-7"
-        ></GeneratorIcon>
+        /* todo: fix types for svg */
+        /* @ts-ignore */
+        <GeneratorIcon className="w-7" />
       }
-      title={productNameShort}
+      title={title}
       getBoxSizeCallback={setBoxSize}
     >
       <div className="w-full h-full flex flex-col justify-between">
-        <div className={classNames("text-victron-darkGray dark:text-white", activeStyles?.mainValue)}>
-          {subTitle}
-        </div>
+        <div className={classNames("text-victron-darkGray dark:text-white", activeStyles?.mainValue)}>{subTitle}</div>
         <div className="w-full h-full min-h-0 shrink flex flex-col justify-end mt-2">
-          <div className={classnames("", activeStyles?.secondaryValue)}>
-            <ValueBar values={current.slice(0, nrOfOutputs).map((v) => ({ value: v, unit: "A" }))} />
-          </div>
-          <div className="flex mt-3">
-            {chargerSupportsInputLimit && (
-              <Button className="w-full mr-4" size="md" onClick={() => setIsLimitModalOpen(!isLimitModalOpen)}>
-                {!!currentLimit ? formatValue(Number(currentLimit)) + "A" : 0 + "A"}
-              </Button>
-            )}
-            {chargerSupportsMode && (
-              <Button className="w-full" size="md" onClick={() => setIsModeModalOpen(!isModeModalOpen)}>
-                {chargerMode}
-              </Button>
-            )}
+          <div className={classNames("", activeStyles?.secondaryValue)}>
+            <div className={classNames("", activeStyles?.secondaryValue)}>
+              <ValueBar values={current.slice(0, nrOfOutputs).map((v) => ({ value: v, unit: "A" }))} />
+            </div>
+            <div className="flex mt-3">
+              {chargerSupportsInputLimit && (
+                <Button className="w-full mr-4" size="md" onClick={() => setIsLimitModalOpen(!isLimitModalOpen)}>
+                  {!!currentLimit ? formatValue(Number(currentLimit)) + "A" : 0 + "A"}
+                </Button>
+              )}
+              {chargerSupportsMode && (
+                <Button className="w-full" size="md" onClick={() => setIsModeModalOpen(!isModeModalOpen)}>
+                  {chargerMode}
+                </Button>
+              )}
+            </div>
           </div>
+          {/* TODO refactor modal to seperate file like inverter/charger. */}
+          {chargerSupportsMode && (
+            <DeviceSettingModal
+              title={title}
+              subtitle={translate("common.mode")}
+              open={isModeModalOpen}
+              onClose={closeModeModal}
+              onSet={submitMode}
+            >
+              {/* TODO Refactor to list-item or label component, too much duplicate code. */}
+              <div className="divide-y divide-victron-darkGray-200 text-base">
+                <label
+                  className="w-full flex justify-between items-center pb-4"
+                  onClick={() => setModeForSubmission(CHARGER_MODE.ON)}
+                >
+                  <span>{translate("common.on")}</span>
+                  <RadioButton
+                    onChange={() => setModeForSubmission(CHARGER_MODE.ON)}
+                    selected={modeForSubmission === CHARGER_MODE.ON}
+                    responsive={false}
+                  />
+                </label>
+                <label
+                  className="w-full flex justify-between items-center pt-4"
+                  onClick={() => setModeForSubmission(CHARGER_MODE.OFF)}
+                >
+                  <span>{translate("common.off")}</span>
+                  <RadioButton
+                    onChange={() => setModeForSubmission(CHARGER_MODE.OFF)}
+                    selected={modeForSubmission === CHARGER_MODE.OFF}
+                    responsive={false}
+                  />
+                </label>
+              </div>
+            </DeviceSettingModal>
+          )}
+          {chargerSupportsInputLimit && (
+            <DeviceSettingModal
+              title={title}
+              subtitle={translate("common.inputCurrentLimit")}
+              open={isLimitModalOpen}
+              onClose={closeLimitModal}
+              onSet={submitLimit}
+            >
+              <LimitAdjuster decreaseLimit={decreaseLimit} increaseLimit={increaseLimit} value={limitForSubmission} />
+            </DeviceSettingModal>
+          )}
         </div>
-        {chargerSupportsMode && (
-          <DeviceSettingModal
-            title={productNameShort}
-            subtitle={translate("common.mode")}
-            open={isModeModalOpen}
-            onClose={closeModeModal}
-            onSet={submitMode}
-          >
-            {/* TODO Refactor to list-item or label component, too much duplicate code. */}
-            <div className="divide-y divide-victron-darkGray-200 text-base">
-              <label
-                className="w-full flex justify-between items-center pb-4"
-                onClick={() => setModeForSubmission(CHARGER_MODE.ON)}
-              >
-                <span>{translate("common.on")}</span>
-                <RadioButton
-                  onChange={() => setModeForSubmission(CHARGER_MODE.ON)}
-                  selected={modeForSubmission === CHARGER_MODE.ON}
-                  responsive={false}
-                />
-              </label>
-              <label
-                className="w-full flex justify-between items-center pt-4"
-                onClick={() => setModeForSubmission(CHARGER_MODE.OFF)}
-              >
-                <span>{translate("common.off")}</span>
-                <RadioButton
-                  onChange={() => setModeForSubmission(CHARGER_MODE.OFF)}
-                  selected={modeForSubmission === CHARGER_MODE.OFF}
-                  responsive={false}
-                />
-              </label>
-            </div>
-          </DeviceSettingModal>
-        )}
-        {chargerSupportsInputLimit && (
-          <DeviceSettingModal
-            title={productNameShort}
-            subtitle={translate("common.inputCurrentLimit")}
-            open={isLimitModalOpen}
-            onClose={closeLimitModal}
-            onSet={submitLimit}
-          >
-            <LimitAdjuster decreaseLimit={decreaseLimit} increaseLimit={increaseLimit} value={limitForSubmission} />
-          </DeviceSettingModal>
-        )}
       </div>
     </Box>
   )
 }
 
-interface Props {
-  instanceId: ChargerInstanceId
-  componentMode?: ComponentMode
-  compactBoxSize?: {
-    width: number
-    height: number
-  }
-}
-
 export default observer(Charger)
diff --git a/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx b/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx
index 7744c661e..470df959c 100644
--- a/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx
+++ b/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx
@@ -16,7 +16,7 @@ import {
   useGeneratorRelay,
   useInverters,
   useVebus,
-  VebusInverters,
+  VebusInverters
 } from "@victronenergy/mfd-modules"
 import Charger from "../Charger"
 import Inverter from "../Inverter"
@@ -32,7 +32,7 @@ import { ComponentMode } from "@m2Types/generic/component-mode"
 
 const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { inverters } = useInverters()
-  const { instanceId, vebusInverters } = useVebus()
+  const { instanceId: vebusInstanceId, vebusInverters } = useVebus()
   const { chargers } = useChargers()
   const generatorFp = useGeneratorFp()
   const generatorRelay = useGeneratorRelay()
@@ -42,7 +42,7 @@ const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Pr
     chargers,
     inverters,
     vebusInverters,
-    instanceId,
+    vebusInstanceId,
     generatorFp,
     generatorRelay,
     compactBoxSize,
@@ -90,11 +90,11 @@ const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Pr
   )
 }
 
-const getAvailableDeviceBoxes = function (
+const getAvailableDeviceBoxes = function(
   chargers: ChargerInstanceId[],
   inverters: InverterInstanceId[],
   vebusInverters: VebusInverters,
-  instanceId: InstanceId,
+  vebusInstanceId: InstanceId,
   generatorFp: GeneratorFpProvider,
   generatorRelay: GeneratorRelayProvider,
   compactBoxSize: { width: number; height: number },
@@ -138,8 +138,10 @@ const getAvailableDeviceBoxes = function (
     })
   }
 
-  if (!!instanceId) {
-    devices.push(<InverterCharger key={instanceId} componentMode={componentMode} compactBoxSize={compactBoxSize} />)
+  if (!!vebusInstanceId && !vebusInverters.includes(vebusInstanceId)) {
+    devices.push(
+      <InverterCharger key={vebusInstanceId} componentMode={componentMode} compactBoxSize={compactBoxSize} />
+    )
   }
 
   if (!!generatorFp.phases)
diff --git a/src/app/Marine2/components/boxes/Inverter/Inverter.tsx b/src/app/Marine2/components/boxes/Inverter/Inverter.tsx
index 5de2d5373..c07193e61 100644
--- a/src/app/Marine2/components/boxes/Inverter/Inverter.tsx
+++ b/src/app/Marine2/components/boxes/Inverter/Inverter.tsx
@@ -1,50 +1,47 @@
-import { InverterInstanceId, useAppStore, useInverter } from "@victronenergy/mfd-modules"
+import { useEffect, useState } from "react"
 import { observer } from "mobx-react-lite"
-import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
 import { translate } from "react-i18nify"
-import { INVERTER_MODE } from "../../../utils/constants"
-import { formatStateForTranslation } from "../../../utils/format"
+import { ComponentMode } from "@m2Types/generic/component-mode"
+import { ISize } from "@m2Types/generic/size"
+import { InverterInstanceId, useAppStore, useInverter } from "@victronenergy/mfd-modules"
+import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
 import GeneratorIcon from "../../../images/icons/generator.svg"
+import { INVERTER_MODE } from "../../../utils/constants"
 import classNames from "classnames"
-import classnames from "classnames"
 import ValueBar from "../../ui/ValueBar"
 import Button from "../../ui/Button"
 import DeviceSettingModal from "../../ui/DeviceSettingModal/DeviceSettingModal"
 import RadioButton from "../../ui/RadioButton"
 import Box from "../../ui/Box"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
-import { useEffect, useState } from "react"
 import ValueOverview from "../../ui/ValueOverview"
-import { ComponentMode } from "@m2Types/generic/component-mode"
+import { formatModeFor } from "../../../utils/formatters/devices/inverter/format-mode-for"
+import { translatedStateFor } from "../../../utils/helpers/devices/translated-state-for"
+import { titleFor } from "../../../utils/helpers/devices/title-for"
+
+interface Props {
+  instanceId: InverterInstanceId
+  isVebusInverter: boolean
+  componentMode?: ComponentMode
+  compactBoxSize?: ISize
+}
 
 const Inverter = ({ instanceId, isVebusInverter, componentMode = "compact", compactBoxSize }: Props) => {
   const { locked } = useAppStore() // lock from theme settings
-  const inverterModeFormatter = (value: number) => {
-    switch (value) {
-      case INVERTER_MODE.OFF:
-        return translate("common.off")
-      case INVERTER_MODE.VEBUS_ON:
-      case INVERTER_MODE.ON:
-        return translate("common.on")
-      case INVERTER_MODE.ECO:
-        return translate("common.eco")
-      default:
-        return translate("common.emptyBar")
-    }
-  }
 
   const source = isVebusInverter ? "vebus" : "inverter"
-  let { state, mode, voltage, current, power, productName, customName, updateMode } = useInverter(instanceId, source)
+  const { state, mode, voltage, current, power, productName, customName, updateMode } = useInverter(instanceId, source)
 
   // Vebus inverters use mode 3 instead of 2 for ON.
   const onMode = isVebusInverter ? INVERTER_MODE.VEBUS_ON : INVERTER_MODE.ON
 
-  const productNameShort = customName || (productName && productName.split(" ")[0])
+  const title = titleFor(customName, productName)
+  const subTitle = translatedStateFor(state)
+  const inverterMode = formatModeFor(mode)
+
   const currentValue = !!current || current === 0 ? current : undefined
-  const subTitle = !!state || state === 0 ? translate(formatStateForTranslation(Number(state))) : undefined
-  const inverterMode = inverterModeFormatter(Number(mode))
 
-  const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
+  const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
   const activeStyles = applyStyles(boxSize, defaultBoxStyles)
 
   const [isModeModalOpen, setIsModeModalOpen] = useState(false)
@@ -63,16 +60,17 @@ const Inverter = ({ instanceId, isVebusInverter, componentMode = "compact", comp
     updateMode(modeForSubmission)
     closeModeModal()
   }
+
   if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
         /* @ts-ignore */
         Icon={InverterChargerIcon}
-        title={productNameShort}
+        title={title}
         subtitle={subTitle}
         value={currentValue}
-        unit={"A"}
+        unit="A"
         boxSize={compactBoxSize}
       />
     )
@@ -81,21 +79,17 @@ const Inverter = ({ instanceId, isVebusInverter, componentMode = "compact", comp
   return (
     <Box
       icon={
-        <GeneratorIcon
-          /* todo: fix types for svg */
-          /* @ts-ignore */
-          className={"w-7"}
-        ></GeneratorIcon>
+        /* todo: fix types for svg */
+        /* @ts-ignore */
+        <GeneratorIcon className="w-7" />
       }
-      title={productNameShort}
+      title={title}
       getBoxSizeCallback={setBoxSize}
     >
       <div className="w-full h-full flex flex-col justify-between">
-        <div className={classNames("text-victron-darkGray dark:text-white", activeStyles?.mainValue)}>
-          {subTitle}
-        </div>
+        <div className={classNames("text-victron-darkGray dark:text-white", activeStyles?.mainValue)}>{subTitle}</div>
         <div className="w-full h-full min-h-0 shrink flex flex-col justify-end mt-2">
-          <div className={classnames("", activeStyles?.secondaryValue)}>
+          <div className={classNames("", activeStyles?.secondaryValue)}>
             <ValueBar
               values={[
                 { value: voltage, unit: "V", hideDecimal: true },
@@ -113,8 +107,9 @@ const Inverter = ({ instanceId, isVebusInverter, componentMode = "compact", comp
             {inverterMode}
           </Button>
         </div>
+        {/* TODO Refactor to seperate modal file. */}
         <DeviceSettingModal
-          title={productNameShort}
+          title={title}
           subtitle={translate("common.mode")}
           open={isModeModalOpen}
           onClose={closeModeModal}
@@ -164,11 +159,4 @@ const Inverter = ({ instanceId, isVebusInverter, componentMode = "compact", comp
   )
 }
 
-interface Props {
-  instanceId: InverterInstanceId
-  isVebusInverter: boolean
-  componentMode?: ComponentMode
-  compactBoxSize?: { width: number; height: number }
-}
-
 export default observer(Inverter)
diff --git a/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx b/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx
index 443a637c7..bf90aa68c 100644
--- a/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx
+++ b/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx
@@ -1,9 +1,7 @@
 import { useState } from "react"
 import { observer } from "mobx-react-lite"
-import { translate } from "react-i18nify"
 import { useAppStore, useInverterCharger, useShorePowerInput } from "@victronenergy/mfd-modules"
 import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
-import { formatStateForTranslation } from "../../../utils/format"
 import Button from "../../ui/Button"
 import InputLimitSelector from "../../ui/InputLimitSelector"
 import ValueBox from "../../ui/ValueBox"
@@ -11,7 +9,9 @@ import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { ISize } from "@m2Types/generic/size"
 import { Modal } from "./Modal/Modal"
-import { formatModeFor } from "../../../utils/helpers/inverter-charger/format-mode-for"
+import { formatModeFor } from "../../../utils/formatters/devices/inverter-charger/format-mode-for"
+import { titleFor } from "../../../utils/helpers/devices/title-for"
+import { translatedStateFor } from "../../../utils/helpers/devices/translated-state-for"
 
 interface Props {
   componentMode?: ComponentMode
@@ -25,39 +25,34 @@ const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) =
   const { state, mode, customName, productName, modeIsAdjustable } = useInverterCharger()
   const [openModal, setOpenModal] = useState(false)
 
-  const productNameShort = customName || (productName && productName.split(" ")[0])
-  const subTitle = !!state || parseInt(state) === 0 ? translate(formatStateForTranslation(Number(state))) : ""
-
-    const title = shortTitleFor(customName, productName, "Charger Fallback Name")
-  const translatedState = translatedStateFor(state)
-
+  const title = titleFor(customName, productName)
+  const subTitle = translatedStateFor(state)
+  const inverterChargerMode = formatModeFor(parseInt(mode))
 
   const getButtons = () => {
     const buttons = []
 
     if (!!inputId) {
-      buttons.push(<InputLimitSelector inputId={inputId} title={productNameShort} />)
+      buttons.push(<InputLimitSelector inputId={inputId} title={title} />)
     }
 
     if (modeIsAdjustable === 1) {
       buttons.push(
         <Button disabled={locked} className="w-full" size="md" onClick={() => setOpenModal(!openModal)}>
-          {formatModeFor(parseInt(mode))}
+          {inverterChargerMode}
         </Button>
       )
     }
     return buttons
   }
 
-  console.log(state, mode)
-
   if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
         /* @ts-ignore */
         Icon={InverterChargerIcon}
-        title={productNameShort}
+        title={title}
         subtitle={subTitle}
         boxSize={compactBoxSize}
       />
@@ -66,7 +61,7 @@ const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) =
 
   return (
     <ValueBox
-      title={productNameShort}
+      title={title}
       subtitle={subTitle}
       icon={
         /* todo: fix types for svg */
@@ -76,7 +71,7 @@ const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) =
       buttons={getButtons()}
       bottomValues={[]}
     >
-      <Modal title={productNameShort} open={openModal} onClose={setOpenModal} />
+      <Modal title={title} open={openModal} onClose={setOpenModal} />
     </ValueBox>
   )
 }
diff --git a/src/app/Marine2/utils/helpers/devices/short-title-for.ts b/src/app/Marine2/utils/helpers/devices/short-title-for.ts
deleted file mode 100644
index 7a0cd8c3a..000000000
--- a/src/app/Marine2/utils/helpers/devices/short-title-for.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const shortTitleFor = (customName: string, productName: string) => customName || productName
diff --git a/src/app/Marine2/utils/helpers/devices/title-for.ts b/src/app/Marine2/utils/helpers/devices/title-for.ts
new file mode 100644
index 000000000..6dbbea0f5
--- /dev/null
+++ b/src/app/Marine2/utils/helpers/devices/title-for.ts
@@ -0,0 +1 @@
+export const titleFor = (customName: string, productName: string) => customName || productName