Move DeviceInfo to component

Author: razor-x

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

@@ -0,0 +1,54 @@
+import type { CommonDevice } from 'seamapi'
+
+import { BeeIcon } from 'lib/icons/Bee.js'
+import type { CommonProps } from 'lib/seam/components/common-props.js'
+import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
+import { DetailRow } from 'lib/ui/layout/DetailRow.js'
+import { DetailSection } from 'lib/ui/layout/DetailSection.js'
+
+interface DeviceInfoProps
+  extends Required<
+    Pick<
+      CommonProps,
+      'disableConnectedAccountInformation' | 'disableResourceIds'
+    >
+  > {
+  device: CommonDevice
+}
+
+export function DeviceInfo({
+  device,
+  disableConnectedAccountInformation,
+  disableResourceIds,
+}: DeviceInfoProps): JSX.Element | null {
+  const { connectedAccount } = useConnectedAccount(device.connected_account_id)
+  return (
+    <DetailSection label={t.deviceInfo}>
+      <DetailRow label={t.manufacturer}>
+        <div className='seam-detail-row-hstack'>
+          {device.properties.model.manufacturer_display_name}
+          {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
+        </div>
+      </DetailRow>
+      {!disableConnectedAccountInformation && (
+        <DetailRow
+          label={t.linkedAccount}
+          sublabel={
+            connectedAccount?.user_identifier?.email ??
+            device.connected_account_id
+          }
+        />
+      )}
+      {!disableResourceIds && (
+        <DetailRow label={t.deviceId} sublabel={device.device_id} />
+      )}
+    </DetailSection>
+  )
+}
+
+const t = {
+  deviceInfo: 'Device info',
+  manufacturer: 'Manufacturer',
+  linkedAccount: 'Linked account',
+  deviceId: 'Device ID',
+}

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

@@ -3,12 +3,11 @@ import { useEffect, useState } from 'react'
 import type { HvacModeSetting, ThermostatDevice } from 'seamapi'
 
 import { debounce } from 'lib/debounce.js'
-import { BeeIcon } from 'lib/icons/Bee.js'
 import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { NestedClimateSettingScheduleTable } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js'
 import type { CommonProps } from 'lib/seam/components/common-props.js'
-import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
+import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
 import { useCoolThermostat } from 'lib/seam/thermostats/use-cool-thermostat.js'
 import { useHeatCoolThermostat } from 'lib/seam/thermostats/use-heat-cool-thermostat.js'
@@ -50,8 +49,6 @@ export function ThermostatDeviceDetails({
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
   const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)
 
-  const { connectedAccount } = useConnectedAccount(device.connected_account_id)
-
   const { climateSettingSchedules } = useClimateSettingSchedules({
     device_id: device.device_id,
   })
@@ -145,27 +142,13 @@ export function ThermostatDeviceDetails({
                 <ManualOverrideRow device={device} />
               </DetailSection>
             )}
-
-            <DetailSection label={t.deviceDetails}>
-              <DetailRow label={t.manufacturer}>
-                <div className='seam-detail-row-hstack'>
-                  {device.properties.model.manufacturer_display_name}
-                  {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
-                </div>
-              </DetailRow>
-              {!disableConnectedAccountInformation && (
-                <DetailRow
-                  label={t.linkedAccount}
-                  sublabel={
-                    connectedAccount?.user_identifier?.email ??
-                    device.connected_account_id
-                  }
-                />
-              )}
-              {!disableResourceIds && (
-                <DetailRow label={t.deviceId} sublabel={device.device_id} />
-              )}
-            </DetailSection>
+            <DeviceInfo
+              device={device}
+              disableConnectedAccountInformation={
+                disableConnectedAccountInformation
+              }
+              disableResourceIds={disableResourceIds}
+            />
           </DetailSectionGroup>
         </div>
       </div>
@@ -459,10 +442,6 @@ const t = {
     'When a scheduled climate reaches its end time, the default settings will kick in.',
   defaultClimate: 'Default climate',
   allowManualOverride: 'Allow manual override',
-  deviceDetails: 'Device details',
-  manufacturer: 'Manufacturer',
-  linkedAccount: 'Linked account',
-  deviceId: 'Device ID',
   none: 'None',
   fanModeSuccess: 'Successfully updated fan mode!',
   fanModeError: 'Error updating fan mode. Please try again.',