Toggling the temperature unit in ThermostatCard should also affect ClimateSettingStatus

Author: phpnode

src/lib/seam/components/DeviceDetails/ThermostatDeviceDetails.tsx

@@ -24,7 +24,10 @@ import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
 import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
-import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
+import {
+  type TemperatureUnit,
+  ThermostatCard,
+} from 'lib/ui/thermostat/ThermostatCard.js'
 
 interface ThermostatDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
@@ -38,6 +41,10 @@ export function ThermostatDeviceDetails({
   onBack,
   className,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
+  const [temperatureUnit, setTemperatureUnit] = useState<
+    'fahrenheit' | 'celsius'
+  >('fahrenheit')
+
   if (device == null) {
     return null
   }
@@ -47,15 +54,22 @@ export function ThermostatDeviceDetails({
       <ContentHeader title={t.thermostat} onBack={onBack} />
 
       <div className='seam-body'>
-        <ThermostatCard device={device} />
+        <ThermostatCard
+          device={device}
+          temperatureUnit={temperatureUnit}
+          onChangeTemperatureUnit={setTemperatureUnit}
+        />
 
         <div className='seam-thermostat-device-details'>
           <DetailSectionGroup>
             <DetailSection
               label={t.currentSettings}
               tooltipContent={t.currentSettingsTooltip}
             >
-              <ClimateSettingRow device={device} />
+              <ClimateSettingRow
+                device={device}
+                temperatureUnit={temperatureUnit}
+              />
               <FanModeRow device={device} />
             </DetailSection>
 
@@ -112,8 +126,10 @@ function FanModeRow({ device }: { device: ThermostatDevice }): JSX.Element {
 
 function ClimateSettingRow({
   device,
+  temperatureUnit,
 }: {
   device: ThermostatDevice
+  temperatureUnit: TemperatureUnit
 }): JSX.Element {
   const deviceHeatValue =
     device.properties.current_climate_setting.heating_set_point_fahrenheit
@@ -257,7 +273,7 @@ function ClimateSettingRow({
         rightCollapsedContent={
           <ClimateSettingStatus
             climateSetting={device.properties.current_climate_setting}
-            temperatureUnit='fahrenheit'
+            temperatureUnit={temperatureUnit}
             iconPlacement='right'
           />
         }

src/lib/ui/thermostat/ClimateSettingStatus.tsx

@@ -4,10 +4,11 @@ import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { ThermostatOffIcon } from 'lib/icons/ThermostatOff.js'
 import type { ClimateSetting } from 'lib/seam/thermostats/thermostat-device.js'
 import { Temperature } from 'lib/ui/thermostat/Temperature.js'
+import type { TemperatureUnit } from 'lib/ui/thermostat/ThermostatCard.js'
 
 interface ClimateSettingStatusProps {
   climateSetting: ClimateSetting
-  temperatureUnit?: 'fahrenheit' | 'celsius'
+  temperatureUnit?: TemperatureUnit
   iconPlacement?: 'left' | 'right'
 }
 

src/lib/ui/thermostat/ThermostatCard.tsx

@@ -8,27 +8,45 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { Temperature } from 'lib/ui/thermostat/Temperature.js'
 
+export type TemperatureUnit = 'fahrenheit' | 'celsius'
+
 interface ThermostatCardProps {
   device: ThermostatDevice
+  temperatureUnit?: TemperatureUnit
+  onChangeTemperatureUnit?: (temperatureUnit: TemperatureUnit) => void
 }
 
-export function ThermostatCard({ device }: ThermostatCardProps): JSX.Element {
+export function ThermostatCard({
+  device,
+  temperatureUnit: externallySpecifiedTemperatureUnit,
+  onChangeTemperatureUnit: onExternalChangeTemperatureUnit,
+}: ThermostatCardProps): JSX.Element {
+  const [internalTemperatureUnit, setInternalTemperatureUnit] =
+    useState<TemperatureUnit>('fahrenheit')
   return (
     <div className='seam-thermostat-card'>
-      <Content device={device} />
+      <Content
+        device={device}
+        temperatureUnit={
+          externallySpecifiedTemperatureUnit ?? internalTemperatureUnit
+        }
+        onChangeTemperatureUnit={
+          onExternalChangeTemperatureUnit ?? setInternalTemperatureUnit
+        }
+      />
     </div>
   )
 }
 
-function Content(props: { device: ThermostatDevice }): JSX.Element | null {
-  const { device } = props
-
-  const [temperatureUnit, setTemperatureUnit] = useState<
-    'fahrenheit' | 'celsius'
-  >('fahrenheit')
+function Content(props: {
+  device: ThermostatDevice
+  temperatureUnit: TemperatureUnit
+  onChangeTemperatureUnit: (temperatureUnit: TemperatureUnit) => void
+}): JSX.Element | null {
+  const { device, temperatureUnit, onChangeTemperatureUnit } = props
 
   const toggleTemperatureUnit = (): void => {
-    setTemperatureUnit(
+    onChangeTemperatureUnit(
       temperatureUnit === 'fahrenheit' ? 'celsius' : 'fahrenheit'
     )
   }