@seamapi/react 3.1.2 → 4.0.0

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

@@ -1,90 +0,0 @@
-import type {
-  SeamHttpApiError,
-  ThermostatsUpdateBody,
-} from '@seamapi/http/connect'
-import type { Device } from '@seamapi/types/connect'
-import {
-  useMutation,
-  type UseMutationResult,
-  useQueryClient,
-} from '@tanstack/react-query'
-
-import { shake } from 'lib/object.js'
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
-
-export type UseUpdateThermostatParams = never
-
-export type UseUpdateThermostatData = undefined
-
-export type UseUpdateThermostatMutationVariables = ThermostatsUpdateBody
-
-export function useUpdateThermostat(): UseMutationResult<
-  UseUpdateThermostatData,
-  SeamHttpApiError,
-  UseUpdateThermostatMutationVariables
-> {
-  const { client } = useSeamClient()
-  const queryClient = useQueryClient()
-
-  return useMutation<
-    UseUpdateThermostatData,
-    SeamHttpApiError,
-    UseUpdateThermostatMutationVariables
-  >({
-    mutationFn: async (variables) => {
-      if (client === null) throw new NullSeamClientError()
-      await client.thermostats.update(variables)
-    },
-    onSuccess: (_data, variables) => {
-      queryClient.setQueryData<Device | null>(
-        ['devices', 'get', { device_id: variables.device_id }],
-        (device) => {
-          if (device == null) {
-            return
-          }
-          return getUpdatedDevice(device, variables)
-        }
-      )
-
-      queryClient.setQueryData<Device[]>(
-        ['devices', 'list', { device_id: variables.device_id }],
-        (devices): Device[] => {
-          if (devices == null) {
-            return []
-          }
-
-          return devices.map((device) => {
-            if (device.device_id === variables.device_id) {
-              return getUpdatedDevice(device, variables)
-            }
-
-            return device
-          })
-        }
-      )
-    },
-  })
-}
-
-const getUpdatedDevice = (
-  device: Device,
-  variables: UseUpdateThermostatMutationVariables
-): Device => {
-  const { properties } = device
-  if (
-    'default_climate_setting' in properties &&
-    properties.default_climate_setting != null
-  ) {
-    return {
-      ...device,
-      properties: {
-        ...properties,
-        default_climate_setting: {
-          ...properties.default_climate_setting,
-          ...shake(variables.default_climate_setting),
-        },
-      },
-    }
-  }
-  return device
-}

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

@@ -1,189 +0,0 @@
-import classNames from 'classnames'
-import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-
-import { getSystemTimeZone } from 'lib/dates.js'
-import { useSeamClient } from 'lib/index.js'
-import {
-  type ClimateSetting,
-  type HvacModeSetting,
-  isThermostatDevice,
-} from 'lib/seam/thermostats/thermostat-device.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'
-
-export interface ClimateSettingScheduleFormSubmitData {
-  name: string
-  deviceId: string
-  startDate: string
-  endDate: string
-  timeZone: string
-  climateSetting: ClimateSetting
-}
-
-export interface ClimateSettingScheduleFormProps {
-  className?: string
-  onBack?: () => void
-  isSubmitting: boolean
-  onSubmit: (data: ClimateSettingScheduleFormSubmitData) => void
-}
-
-export interface ClimateSettingScheduleFormFields {
-  name: string
-  deviceId: string
-  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({
-  className,
-  ...props
-}: ClimateSettingScheduleFormProps): JSX.Element | null {
-  return (
-    <div
-      className={classNames('seam-climate-setting-schedule-form', className)}
-    >
-      <Content {...props} />
-    </div>
-  )
-}
-
-function Content({
-  onBack,
-}: Omit<ClimateSettingScheduleFormProps, 'className'>): JSX.Element {
-  const { client } = useSeamClient()
-  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 [page, setPage] = useState<
-    | 'device_select'
-    | 'default_setting'
-    | 'name_and_schedule'
-    | 'time_zone_select'
-    | 'climate_setting'
-  >('device_select')
-
-  const returnToDeviceSelect = (): void => {
-    resetField('deviceId')
-    setPage('device_select')
-  }
-
-  useEffect(() => {
-    if (page === 'device_select' && deviceId !== '' && client != null) {
-      client.devices
-        .get({ device_id: deviceId })
-        .then((device) => {
-          if (!isThermostatDevice(device)) return
-
-          if (device.properties.default_climate_setting != null) {
-            setPage('name_and_schedule')
-            return
-          }
-
-          setPage('default_setting')
-        })
-        .catch(() => {})
-    }
-  }, [client, deviceId, page, setPage])
-
-  if (page === 'device_select') {
-    return (
-      <ClimateSettingScheduleFormDeviceSelect
-        title={t.addNewClimateSettingSchedule}
-        control={control}
-        onBack={onBack}
-      />
-    )
-  }
-
-  if (page === 'default_setting') {
-    return (
-      <ClimateSettingScheduleFormDefaultClimateSetting
-        title={t.addNewClimateSettingSchedule}
-        deviceId={deviceId}
-        onBack={returnToDeviceSelect}
-        onCancel={onBack}
-        onSave={() => {
-          setPage('name_and_schedule')
-        }}
-      />
-    )
-  }
-
-  if (page === 'name_and_schedule') {
-    return (
-      <ClimateSettingScheduleFormNameAndSchedule
-        title={t.addNewClimateSettingSchedule}
-        control={control}
-        deviceId={deviceId}
-        onBack={returnToDeviceSelect}
-        onCancel={onBack}
-        onNext={() => {
-          setPage('climate_setting')
-        }}
-        onChangeTimeZone={() => {
-          setPage('time_zone_select')
-        }}
-        timeZone={timeZone}
-      />
-    )
-  }
-
-  if (page === 'time_zone_select') {
-    return (
-      <ClimateSettingScheduleFormTimeZonePicker
-        control={control}
-        onClose={() => {
-          setPage('name_and_schedule')
-        }}
-      />
-    )
-  }
-
-  if (page === 'climate_setting') {
-    return (
-      <ClimateSettingScheduleFormClimateSetting
-        title={t.addNewClimateSettingSchedule}
-        control={control}
-        deviceId={deviceId}
-        onBack={() => {
-          setPage('name_and_schedule')
-        }}
-        onCancel={onBack}
-        onSave={() => {}}
-      />
-    )
-  }
-
-  return <></>
-}
-
-export const t = {
-  addNewClimateSettingSchedule: 'Add a climate setting schedule',
-}

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

@@ -1,118 +0,0 @@
-import { type Control, Controller } from 'react-hook-form'
-
-import { useDevice } from 'lib/seam/devices/use-device.js'
-import { isThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
-import { Button } from 'lib/ui/Button.js'
-import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
-import {
-  getSetPointBounds,
-  type SetPointBounds,
-} from 'lib/ui/ClimateSettingForm/set-point-bounds.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,
-  })
-
-  if (device == null) return <></>
-  if (!isThermostatDevice(device)) return <></>
-
-  const setPointBounds = getSetPointBounds(device)
-
-  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} setPointBounds={setPointBounds} />
-          </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>
-  setPointBounds: SetPointBounds
-}
-
-function FormContent({
-  control,
-  setPointBounds,
-}: 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}
-            {...setPointBounds}
-            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',
-}

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

@@ -1,79 +0,0 @@
-import { useState } from 'react'
-
-import { useDevice } from 'lib/seam/devices/use-device.js'
-import type { HvacModeSetting } from 'lib/seam/thermostats/thermostat-device.js'
-import { Button } from 'lib/ui/Button.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 ClimateSettingScheduleFormDefaultClimateSettingProps {
-  title: string
-  deviceId: string
-  onBack: () => void
-  onCancel: (() => void) | undefined
-  onSave: () => void
-}
-
-export function ClimateSettingScheduleFormDefaultClimateSetting({
-  title,
-  deviceId,
-  onBack,
-  onCancel,
-  onSave,
-}: ClimateSettingScheduleFormDefaultClimateSettingProps): JSX.Element {
-  const { device } = useDevice({
-    device_id: deviceId,
-  })
-
-  const [mode, setMode] = useState<HvacModeSetting>('heat_cool')
-  const [heatValue, setHeatValue] = useState(70)
-  const [coolValue, setCoolValue] = useState(75)
-
-  return (
-    <>
-      <ContentHeader
-        title={title}
-        onBack={onBack}
-        subheading={device?.properties.name}
-      />
-      <div className='seam-main'>
-        <div className='seam-climate-setting-schedule-form-default-climate-setting'>
-          <div className='seam-content'>
-            <div className='seam-default-climate-setting-message'>
-              <p>{t.defaultClimateMessage}</p>
-            </div>
-            <div className='seam-control-group-title'>
-              <InputLabel>{t.defaultClimate}</InputLabel>
-              <span className='seam-label'>{t.defautClimateSubHeading}</span>
-            </div>
-            <ClimateSettingControlGroup
-              mode={mode}
-              onModeChange={setMode}
-              heatValue={heatValue}
-              onHeatValueChange={setHeatValue}
-              coolValue={coolValue}
-              onCoolValueChange={setCoolValue}
-            />
-          </div>
-        </div>
-        <div className='seam-actions'>
-          <Button onClick={onCancel}>{t.cancel}</Button>
-          <Button variant='solid' onClick={onSave}>
-            {t.save}
-          </Button>
-        </div>
-      </div>
-    </>
-  )
-}
-
-const t = {
-  defaultClimate: 'Default Climate',
-  defautClimateSubHeading:
-    'Choose the default mode and climate for this device',
-  defaultClimateMessage:
-    'This device doesn’t have a default climate set up yet. Choose the climate you’d like the device to fall back to after scheduled climates reach their ends.',
-  cancel: 'Cancel',
-  save: 'Save',
-}

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

@@ -1,36 +0,0 @@
-import { type Control, Controller } from 'react-hook-form'
-
-import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { ThermostatSelect } from 'lib/ui/thermostat/ThermostatSelect.js'
-
-interface ClimateSettingScheduleFormDeviceSelectProps {
-  title: string
-  control: Control<ClimateSettingScheduleFormFields>
-  onBack: (() => void) | undefined
-}
-
-export function ClimateSettingScheduleFormDeviceSelect({
-  title,
-  control,
-  onBack,
-}: ClimateSettingScheduleFormDeviceSelectProps): JSX.Element {
-  return (
-    <>
-      <ContentHeader title={title} onBack={onBack} />
-      <div className='seam-main'>
-        <Controller
-          name='deviceId'
-          control={control}
-          render={({ field: { onChange } }) => (
-            <ThermostatSelect
-              onSelect={(deviceId) => {
-                onChange(deviceId)
-              }}
-            />
-          )}
-        />
-      </div>
-    </>
-  )
-}

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

@@ -1,120 +0,0 @@
-import { type Control, Controller } from 'react-hook-form'
-
-import { formatTimeZone } from 'lib/dates.js'
-import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-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 { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.js'
-import { FormField } from 'lib/ui/FormField.js'
-import { InputLabel } from 'lib/ui/InputLabel.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { TextField } from 'lib/ui/TextField/TextField.js'
-
-interface ClimateSettingScheduleFormNameAndScheduleProps {
-  title: string
-  control: Control<ClimateSettingScheduleFormFields>
-  deviceId: string
-  timeZone: string
-  onBack: () => void
-  onCancel: (() => void) | undefined
-  onNext: () => void
-  onChangeTimeZone: () => void
-}
-
-export function ClimateSettingScheduleFormNameAndSchedule({
-  title,
-  control,
-  deviceId,
-  timeZone,
-  onBack,
-  onCancel,
-  onNext,
-  onChangeTimeZone,
-}: ClimateSettingScheduleFormNameAndScheduleProps): 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-name-and-schedule'>
-          <div className='seam-content'>
-            <FormField>
-              <InputLabel>{t.nameInputLabel}</InputLabel>
-              <Controller
-                name='name'
-                control={control}
-                defaultValue=''
-                render={({ field, fieldState: { invalid, error } }) => {
-                  return (
-                    <TextField
-                      {...field}
-                      size='large'
-                      clearable
-                      hasError={invalid}
-                      helperText={error?.message}
-                    />
-                  )
-                }}
-              />
-            </FormField>
-
-            <FormField>
-              <InputLabel>{t.startTimeLabel}</InputLabel>
-              <div className='seam-time-zone'>
-                <span className='seam-label'>{t.selectedTimeZoneLabel}</span>
-                <span className='seam-selected' onClick={onChangeTimeZone}>
-                  {formatTimeZone(timeZone)}
-                  <ChevronRightIcon />
-                </span>
-              </div>
-              <Controller
-                name='startDate'
-                control={control}
-                defaultValue=''
-                render={({ field }) => (
-                  <DateTimePicker {...field} size='large' />
-                )}
-              />
-            </FormField>
-            <FormField>
-              <InputLabel>{t.endTimeLabel}</InputLabel>
-              <Controller
-                name='endDate'
-                control={control}
-                defaultValue=''
-                render={({ field }) => (
-                  <DateTimePicker {...field} size='large' />
-                )}
-              />
-            </FormField>
-          </div>
-        </div>
-        <div className='seam-actions'>
-          <Button onClick={onCancel}>{t.cancel}</Button>
-          <Button variant='solid' onClick={onNext}>
-            {t.next}
-          </Button>
-        </div>
-      </div>
-    </>
-  )
-}
-
-const t = {
-  nameInputLabel: 'Name the climate setting schedule',
-  startTimeLabel: 'Start time',
-  endTimeLabel: 'End time',
-  addNewClimateSettingSchedule: 'Add a climate setting schedule',
-  cancel: 'Cancel',
-  save: 'Save',
-  next: 'Next',
-  selectedTimeZoneLabel: 'All times in',
-}

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

@@ -1,43 +0,0 @@
-import { useState } from 'react'
-import { type Control, Controller } from 'react-hook-form'
-
-import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
-import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { TimeZonePicker } from 'lib/ui/TimeZonePicker/TimeZonePicker.js'
-
-interface ClimateSettingScheduleFormTimeZonePickerProps {
-  control: Control<ClimateSettingScheduleFormFields>
-  onClose: () => void
-}
-
-export function ClimateSettingScheduleFormTimeZonePicker({
-  control,
-  onClose,
-}: ClimateSettingScheduleFormTimeZonePickerProps): JSX.Element {
-  const [title, setTitle] = useState(t.titleAuto)
-
-  return (
-    <>
-      <ContentHeader title={title} onBack={onClose} />
-      <div className='seam-main'>
-        <Controller
-          name='timeZone'
-          control={control}
-          render={({ field }) => (
-            <TimeZonePicker
-              {...field}
-              onManualTimeZoneSelected={(manualTimeZoneSelected) => {
-                setTitle(manualTimeZoneSelected ? t.titleManual : t.titleAuto)
-              }}
-            />
-          )}
-        />
-      </div>
-    </>
-  )
-}
-
-const t = {
-  titleAuto: 'Time Zone (automatic)',
-  titleManual: 'Time Zone (manual)',
-}