Refactors.

victronenergy · Jan 17, 2024 · 33251e1 · 33251e1
1 parent cb47f33
commit 33251e1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 21 deletions.
diff --git a/src/app/Marine2/components/boxes/EnvironmentOverview/HumidityData.tsx b/src/app/Marine2/components/boxes/EnvironmentOverview/HumidityData.tsx
@@ -7,6 +7,7 @@ import { translate } from "react-i18nify"
 import { useContext, useEffect, useCallback } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
+import { AdditionalInformation } from "../GeneratorFp/AdditionalInformation/AdditionalInformation"
 
 interface Props {
   dataId: number
@@ -52,14 +53,13 @@ const HumidityData = ({ dataId, componentMode, boxSize }: Props) => {
 
   return (
     <ValueBox
-      title={translate("boxes.humidity") + " " + customName}
+      title={`${translate("boxes.humidity")} ${customName}`}
       icon={<HumidityIcon className="w-5" />}
       value={humidity}
       bottomValues={[]}
       unit="%"
     >
-      <div className="text-base">{humidity! > 80 ? translate("common.high") : ""}</div>
-      <div className="text-base">{humidity! > 80 ? translate("common.high") : ""}</div>
+      {humidity > 80 && <AdditionalInformation values={[{ label: translate("common.high") }]} />}
     </ValueBox>
   )
 }

diff --git a/src/app/Marine2/components/boxes/GeneratorFp/AdditionalInformation/AdditionalInformation.tsx b/src/app/Marine2/components/boxes/GeneratorFp/AdditionalInformation/AdditionalInformation.tsx
@@ -1,19 +1,20 @@
 import { FC } from "react"
-import { translate } from "react-i18nify"
 
 interface Props {
-  values: {
-    key: "coolant" | "winding" | "exhaust"
-    value: number
-  }[]
+  values: IValue[]
+}
+
+interface IValue {
+  label: string
+  value?: string
 }
 
 export const AdditionalInformation: FC<Props> = ({ values }) => (
   <div className="flex flex-row mr-4 justify-start text-victron-gray min-w-0">
-    {values.map(({ key, value }) => (
-      <div key={key} className="flex flex-none flex-col mr-3 w-1/3 truncate">
-        <span>{translate(`generator.temperature.${key}`)}</span>
-        <div className="text-victron-darkGray dark:text-white">{value}°</div>
+    {values.map(({ label, value }) => (
+      <div key={label} className="flex flex-none flex-col mr-3 w-1/3 truncate">
+        <span className="text-xs">{label}</span>
+        {value && <div className="text-victron-darkGray dark:text-white">{value}</div>}
       </div>
     ))}
   </div>

diff --git a/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx b/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx
@@ -90,19 +90,13 @@ const GeneratorFp = ({ componentMode = "compact", generatorFp, compactBoxSize }:
     >
       <AdditionalInformation
         values={[
-          { key: "coolant", value: coolant },
-          { key: "winding", value: winding },
-          { key: "exhaust", value: exhaust },
+          { label: translate("generator.temperature.coolant"), value: `${coolant}°` },
+          { label: translate("generator.temperature.winding"), value: `${winding}°` },
+          { label: translate("generator.temperature.exhaust"), value: `${exhaust}°` },
         ]}
       />
     </ValueBox>
   )
 }
 
-interface Props {
-  componentMode?: ComponentMode
-  generatorFp: GeneratorFpProvider
-  compactBoxSize?: ISize
-}
-
 export default observer(GeneratorFp)