@seamapi/react 2.0.2 → 2.1.1

package/src/lib/seam/access-codes/use-access-codes.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import type {
   AccessCode,
   AccessCodesListRequest,
@@ -19,6 +19,8 @@ export function useAccessCodes(
     typeof params === 'string' ? { device_id: params } : params
 
   const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
   const { data, ...rest } = useQuery<
     AccessCodesListResponse['access_codes'],
     SeamError
@@ -29,6 +31,18 @@ export function useAccessCodes(
       if (client == null) return []
       return await client.accessCodes.list(normalizedParams)
     },
+    onSuccess: (accessCodes) => {
+      for (const accessCode of accessCodes) {
+        queryClient.setQueryData(
+          [
+            'access_codes',
+            'get',
+            { access_code_id: accessCode.access_code_id },
+          ],
+          accessCode
+        )
+      }
+    },
   })
 
   return { ...rest, accessCodes: data }

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.ts

@@ -0,0 +1,9 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { SupportedDeviceTableManufacturerKeysProps } from './SupportedDeviceTableManufacturerKeys.js'
+
+export const name = 'seam-supported-device-table-manufacturer-keys'
+
+export const props: ElementProps<SupportedDeviceTableManufacturerKeysProps> = {}
+
+export { SupportedDeviceTableManufacturerKeys as Component } from './SupportedDeviceTableManufacturerKeys.js'

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.tsx

@@ -0,0 +1,65 @@
+import type { Manufacturer } from '@seamapi/types/devicedb'
+import classNames from 'classnames'
+
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
+
+import { CopyIcon } from 'lib/icons/Copy.js'
+import {
+  type CommonProps,
+  withRequiredCommonProps,
+} from 'lib/seam/components/common-props.js'
+import { copyToClipboard } from 'lib/ui/clipboard.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+import { useManufacturers } from './use-manufacturers.js'
+
+export interface SupportedDeviceTableManufacturerKeysProps
+  extends CommonProps {}
+
+export const NestedSupportedDeviceTableManufacturerKeys =
+  withRequiredCommonProps(SupportedDeviceTableManufacturerKeys)
+
+export function SupportedDeviceTableManufacturerKeys({
+  className,
+}: SupportedDeviceTableManufacturerKeysProps = {}): JSX.Element {
+  useComponentTelemetry('SupportedDeviceTableManufacturerKeys')
+
+  const { manufacturers } = useManufacturers()
+
+  return (
+    <div
+      className={classNames(
+        'supported-device-table-manufacturer-keys',
+        className
+      )}
+    >
+      {manufacturers?.map((manufacturer) => (
+        <ManufacturerKey
+          key={manufacturer.manufacturer_id}
+          manufacturer={manufacturer}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ManufacturerKey({
+  manufacturer,
+}: {
+  manufacturer: Manufacturer
+}): JSX.Element {
+  const key = manufacturer.display_name
+  return (
+    <div className='seam-manufacturer-key'>
+      <div className='seam-manufacturer-key-value'>{key}</div>
+      <MenuItem
+        className='seam-copy-button'
+        onClick={() => {
+          void copyToClipboard(key)
+        }}
+      >
+        <CopyIcon />
+      </MenuItem>
+    </div>
+  )
+}

package/src/lib/seam/components/SupportedDeviceTable/use-device-models.ts

@@ -3,7 +3,7 @@ import type {
   RouteRequestParams,
   RouteResponse,
 } from '@seamapi/types/devicedb'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import type { SeamError } from 'seamapi'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
@@ -16,6 +16,7 @@ export function useDeviceModels(
   params?: UseDeviceModelsParams
 ): UseSeamQueryResult<'deviceModels', UseDeviceModelsData> {
   const { client: seam } = useSeamClient()
+  const queryClient = useQueryClient()
 
   const { data, ...rest } = useQuery<
     DeviceModelsListResponse['device_models'],
@@ -33,6 +34,19 @@ export function useDeviceModels(
       )
       return deviceModels
     },
+    onSuccess: (deviceModels) => {
+      for (const deviceModel of deviceModels) {
+        queryClient.setQueryData(
+          [
+            'internal',
+            'device_models',
+            'get',
+            { device_model_id: deviceModel.device_model_id },
+          ],
+          deviceModel
+        )
+      }
+    },
   })
 
   return { ...rest, deviceModels: data }

package/src/lib/seam/components/SupportedDeviceTable/use-manufacturers.ts

@@ -3,7 +3,7 @@ import type {
   RouteRequestParams,
   RouteResponse,
 } from '@seamapi/types/devicedb'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import type { SeamError } from 'seamapi'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
@@ -16,6 +16,7 @@ export function useManufacturers(
   params?: UseManufacturersParams
 ): UseSeamQueryResult<'manufacturers', UseManufacturersData> {
   const { client: seam } = useSeamClient()
+  const queryClient = useQueryClient()
 
   const { data, ...rest } = useQuery<
     ManufacturersListResponse['manufacturers'],
@@ -33,6 +34,19 @@ export function useManufacturers(
       )
       return manufacturers
     },
+    onSuccess: (manufacturers) => {
+      for (const manufacturer of manufacturers) {
+        queryClient.setQueryData(
+          [
+            'internal',
+            'manufacturers',
+            'get',
+            { manufacturer_id: manufacturer.manufacturer_id },
+          ],
+          manufacturer
+        )
+      }
+    },
   })
 
   return { ...rest, manufacturers: data }

package/src/lib/seam/components/elements.ts

@@ -8,3 +8,4 @@ export * as DeviceDetails from './DeviceDetails/DeviceDetails.element.js'
 export * as DeviceTable from './DeviceTable/DeviceTable.element.js'
 export * as EditAccessCodeForm from './EditAccessCodeForm/EditAccessCodeForm.element.js'
 export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js'
+export * as SupportedDeviceTableManufacturerKeys from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.js'

package/src/lib/seam/components/index.ts

@@ -9,3 +9,4 @@ export * from './DeviceDetails/DeviceDetails.js'
 export * from './DeviceTable/DeviceTable.js'
 export * from './EditAccessCodeForm/EditAccessCodeForm.js'
 export * from './SupportedDeviceTable/SupportedDeviceTable.js'
+export * from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.js'

package/src/lib/seam/devices/use-devices.ts

@@ -27,7 +27,6 @@ export function useDevices(
         return await client.devices.list(params)
       },
       onSuccess: (devices) => {
-        // Prime cache for each device.
         for (const device of devices) {
           queryClient.setQueryData(
             ['devices', 'get', { device_id: device.device_id }],

package/src/lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.ts

@@ -33,7 +33,6 @@ export function useClimateSettingSchedules(
       return await client.thermostats.climateSettingSchedules.list(params)
     },
     onSuccess: (schedules) => {
-      // Prime cache for each schedule.
       for (const schedule of schedules) {
         queryClient.setQueryData(
           [

package/src/lib/seam/thermostats/use-update-fan-mode.ts

@@ -0,0 +1,81 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatDevice,
+  ThermostatSetFanModeRequest,
+  ThermostatsListResponse,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatSetFanModeResponse in seamapi.
+type UseUpdateFanModeData = Record<string, unknown>
+type UseUpdateFanModeMutationParams = ThermostatSetFanModeRequest
+
+export function useUpdateFanMode(): UseMutationResult<
+  UseUpdateFanModeData,
+  SeamError,
+  UseUpdateFanModeMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateFanModeData,
+    SeamError,
+    UseUpdateFanModeMutationParams
+  >({
+    mutationFn: async (mutationParams: UseUpdateFanModeMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.setFanMode(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['thermostats', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['thermostats', 'list', { device_id: variables.device_id }],
+        (thermostats): ThermostatDevice[] => {
+          if (thermostats == null) {
+            return []
+          }
+
+          return thermostats.map((thermostat) => {
+            if (thermostat.device_id === variables.device_id) {
+              return getUpdatedThermostat(thermostat, variables)
+            }
+
+            return thermostat
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedThermostat(
+  thermostat: ThermostatDevice,
+  variables: UseUpdateFanModeMutationParams
+): ThermostatDevice {
+  return {
+    ...thermostat,
+    properties: {
+      ...thermostat.properties,
+      fan_mode_setting:
+        variables.fan_mode_setting ?? thermostat.properties.fan_mode_setting,
+    },
+  }
+}

package/src/lib/seam/thermostats/use-update-thermostat.ts

@@ -0,0 +1,92 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatDevice,
+  ThermostatsListResponse,
+  ThermostatUpdateRequest,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatUpdateResponse in seamapi.
+type UseUpdateThermostatData = Record<string, unknown>
+type UseUpdateThermostatMutationParams = ThermostatUpdateRequest
+
+export function useUpdateThermostat(): UseMutationResult<
+  UseUpdateThermostatData,
+  SeamError,
+  UseUpdateThermostatMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateThermostatData,
+    SeamError,
+    UseUpdateThermostatMutationParams
+  >({
+    mutationFn: async (mutationParams: UseUpdateThermostatMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.update(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['thermostats', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['thermostats', 'list', { device_id: variables.device_id }],
+        (thermostats): ThermostatDevice[] => {
+          if (thermostats == null) {
+            return []
+          }
+
+          return thermostats.map((thermostat) => {
+            if (thermostat.device_id === variables.device_id) {
+              return getUpdatedThermostat(thermostat, variables)
+            }
+
+            return thermostat
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedThermostat(
+  thermostat: ThermostatDevice,
+  variables: UseUpdateThermostatMutationParams
+): ThermostatDevice {
+  return {
+    ...thermostat,
+
+    properties: {
+      ...thermostat.properties,
+
+      default_climate_setting: {
+        ...thermostat.properties.default_climate_setting,
+        manual_override_allowed:
+          thermostat.properties?.default_climate_setting
+            ?.manual_override_allowed != null
+            ? thermostat.properties.default_climate_setting
+                .manual_override_allowed
+            : true,
+
+        ...variables.default_climate_setting,
+      },
+    },
+  }
+}

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx

@@ -1,9 +1,17 @@
 import classNames from 'classnames'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import type { ClimateSetting } from 'seamapi'
+import {
+  type ClimateSetting,
+  type HvacModeSetting,
+  isThermostatDevice,
+} from 'seamapi'
+
+import { useDevice } from 'lib/index.js'
 
 import { getSystemTimeZone } from 'lib/dates.js'
+import { ClimateSettingScheduleFormClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js'
+import { ClimateSettingScheduleFormDefaultClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDefaultClimateSetting.js'
 import { ClimateSettingScheduleFormDeviceSelect } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js'
 import { ClimateSettingScheduleFormNameAndSchedule } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormNameAndSchedule.js'
 import { ClimateSettingScheduleFormTimeZonePicker } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormTimeZonePicker.js'
@@ -30,6 +38,12 @@ export interface ClimateSettingScheduleFormFields {
   startDate: string
   endDate: string
   timeZone: string
+  climateSetting: {
+    hvacModeSetting: HvacModeSetting
+    // may have to ignore one or the other fields here on submit
+    heatingSetPoint: number
+    coolingSetPoint: number
+  }
 }
 
 export function ClimateSettingScheduleForm({
@@ -48,19 +62,29 @@ export function ClimateSettingScheduleForm({
 function Content({
   onBack,
 }: Omit<ClimateSettingScheduleFormProps, 'className'>): JSX.Element {
-  const { control, watch } = useForm({
-    defaultValues: {
-      deviceId: '',
-      name: '',
-      startDate: '',
-      endDate: '',
-      timeZone: getSystemTimeZone(),
-    },
-  })
+  const { control, watch, resetField } =
+    useForm<ClimateSettingScheduleFormFields>({
+      defaultValues: {
+        deviceId: '',
+        name: '',
+        startDate: '',
+        endDate: '',
+        timeZone: getSystemTimeZone(),
+        climateSetting: {
+          hvacModeSetting: 'heat_cool',
+          heatingSetPoint: 70,
+          coolingSetPoint: 75,
+        },
+      },
+    })
 
   const deviceId = watch('deviceId')
   const timeZone = watch('timeZone')
 
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
   const [page, setPage] = useState<
     | 'device_select'
     | 'default_setting'
@@ -69,13 +93,38 @@ function Content({
     | 'climate_setting'
   >('device_select')
 
+  const returnToDeviceSelect = (): void => {
+    resetField('deviceId')
+    setPage('device_select')
+  }
+
+  useEffect(() => {
+    if (page === 'device_select' && device != null) {
+      if (!isThermostatDevice(device)) return
+      const defaultSetting = device.properties.default_climate_setting
+      if (defaultSetting != null) setPage('name_and_schedule')
+      else setPage('default_setting')
+    }
+  }, [device, page, setPage])
+
   if (page === 'device_select') {
     return (
       <ClimateSettingScheduleFormDeviceSelect
         title={t.addNewClimateSettingSchedule}
         control={control}
         onBack={onBack}
-        onSelect={() => {
+      />
+    )
+  }
+
+  if (page === 'default_setting') {
+    return (
+      <ClimateSettingScheduleFormDefaultClimateSetting
+        title={t.addNewClimateSettingSchedule}
+        deviceId={deviceId}
+        onBack={returnToDeviceSelect}
+        onCancel={onBack}
+        onSave={() => {
           setPage('name_and_schedule')
         }}
       />
@@ -88,9 +137,7 @@ function Content({
         title={t.addNewClimateSettingSchedule}
         control={control}
         deviceId={deviceId}
-        onBack={() => {
-          setPage('device_select')
-        }}
+        onBack={returnToDeviceSelect}
         onCancel={onBack}
         onNext={() => {
           setPage('climate_setting')
@@ -114,6 +161,21 @@ function Content({
     )
   }
 
+  if (page === 'climate_setting') {
+    return (
+      <ClimateSettingScheduleFormClimateSetting
+        title={t.addNewClimateSettingSchedule}
+        control={control}
+        deviceId={deviceId}
+        onBack={() => {
+          setPage('name_and_schedule')
+        }}
+        onCancel={onBack}
+        onSave={() => {}}
+      />
+    )
+  }
+
   return <></>
 }
 

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.tsx

@@ -0,0 +1,103 @@
+import { type Control, Controller } from 'react-hook-form'
+
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import { Button } from 'lib/ui/Button.js'
+import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
+import { FormField } from 'lib/ui/FormField.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { ClimateSettingControlGroup } from 'lib/ui/thermostat/ClimateSettingControlGroup.js'
+
+interface ClimateSettingScheduleFormClimateSettingProps {
+  title: string
+  control: Control<ClimateSettingScheduleFormFields>
+  deviceId: string
+  onBack: () => void
+  onCancel: (() => void) | undefined
+  onSave: () => void
+}
+
+export function ClimateSettingScheduleFormClimateSetting({
+  title,
+  control,
+  deviceId,
+  onBack,
+  onCancel,
+  onSave,
+}: ClimateSettingScheduleFormClimateSettingProps): JSX.Element {
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
+  return (
+    <>
+      <ContentHeader
+        title={title}
+        onBack={onBack}
+        subheading={device?.properties.name}
+      />
+      <div className='seam-main'>
+        <div className='seam-climate-setting-schedule-form-climate-setting'>
+          <div className='seam-content'>
+            <div>
+              <InputLabel>{t.climateSetting}</InputLabel>
+              <span className='seam-label'>{t.climateSettingSubHeading}</span>
+            </div>
+            <FormContent control={control} />
+          </div>
+        </div>
+        <div className='seam-actions'>
+          <Button onClick={onCancel}>{t.cancel}</Button>
+          <Button variant='solid' onClick={onSave}>
+            {t.save}
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+interface FormContentProps {
+  control: Control<ClimateSettingScheduleFormFields>
+}
+
+function FormContent({ control }: FormContentProps): JSX.Element {
+  return (
+    <FormField>
+      <Controller
+        name='climateSetting'
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <ClimateSettingControlGroup
+            mode={value.hvacModeSetting}
+            onModeChange={(mode) => {
+              onChange({ ...value, hvacModeSetting: mode })
+            }}
+            coolValue={value.coolingSetPoint}
+            heatValue={value.heatingSetPoint}
+            onCoolValueChange={(coolingSetPoint) => {
+              onChange({
+                ...value,
+                coolingSetPoint,
+              })
+            }}
+            onHeatValueChange={(heatingSetPoint) => {
+              onChange({
+                ...value,
+                heatingSetPoint,
+              })
+            }}
+          />
+        )}
+      />
+    </FormField>
+  )
+}
+
+const t = {
+  climateSetting: 'Climate setting',
+  climateSettingSubHeading: 'Choose mode and adjust the climate',
+  cancel: 'Cancel',
+  save: 'Save',
+  next: 'Next',
+}