Give unit via props to force rerender.

victronenergy · Feb 22, 2024 · 2d91dbf · 2d91dbf
1 parent 77a5e4b
commit 2d91dbf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
@@ -2,7 +2,7 @@ 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 { Battery as BatteryType, useAppStore, useBattery } from "@victronenergy/mfd-modules"
 import Box from "../../ui/Box"
 import Battery from "../Battery"
 import BatteriesIcon from "../../../images/icons/batteries.svg"
@@ -29,6 +29,8 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }:
   const { batteries } = useBattery()
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
 
+  const { temperatureUnitToHumanReadable } = useAppStore()
+
   useVisibilityNotifier({ widgetName: BOX_TYPES.BATTERIES, visible: !!(batteries && batteries.length) })
 
   const sortedBatteries = sortBatteries(batteries ?? [])
@@ -135,7 +137,7 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }:
       flow={window.innerWidth > window.innerHeight ? "row" : "col"}
     >
       {sortedBatteries.map((b) => (
-        <Battery key={b.id} battery={b} />
+        <Battery key={b.id} battery={b} unit={temperatureUnitToHumanReadable} />
       ))}
     </GridPaginator>
   )

diff --git a/src/app/Marine2/components/boxes/Battery/Battery.tsx b/src/app/Marine2/components/boxes/Battery/Battery.tsx
@@ -14,15 +14,17 @@ import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box
 import { colorFor } from "../../../utils/formatters/generic"
 import BatteryIcon from "../../../images/icons/battery.svg"
 import { temperatureValueFor } from "../../../utils/formatters/temperature/temperature-value-for"
+import { TemperatureUnit } from "@victronenergy/mfd-modules/dist/src/Modules/App/App.store"
 
 interface Props {
   battery: BatteryType
+  unit: TemperatureUnit
 }
 
-const Battery = ({ battery }: Props) => {
+const Battery = ({ battery, unit }: Props) => {
   const isSimpleBattery = !(battery.state || battery.state === 0)
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
-  const { temperatureUnitToHumanReadable, temperatureUnit } = useAppStore()
+  const { temperatureUnit } = useAppStore()
 
   if (isSimpleBattery) {
     return (
@@ -66,9 +68,7 @@ const Battery = ({ battery }: Props) => {
             {battery.temperature && (
               <p>
                 {temperatureValueFor(battery.temperature, temperatureUnit)}
-                <span className="text-victron-gray-300 dark:text-victron-gray-400">
-                  {temperatureUnitToHumanReadable}
-                </span>
+                <span className="text-victron-gray-300 dark:text-victron-gray-400">{unit}</span>
               </p>
             )}
           </div>