@seamapi/react 4.12.1 → 4.13.1

package/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx

@@ -7,11 +7,10 @@ import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/Acces
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { LockDeviceLockButtons } from 'lib/seam/components/DeviceDetails/LockDeviceLockButtons.js'
 import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
 import type { LockDevice } from 'lib/seam/locks/lock-device.js'
-import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
-import { Button } from 'lib/ui/Button.js'
 import { BatteryStatusIndicator } from 'lib/ui/device/BatteryStatusIndicator.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
@@ -48,20 +47,6 @@ export function LockDeviceDetails({
   const [snackbarVariant, setSnackbarVariant] =
     useState<SnackbarVariant>('success')
 
-  const toggleLock = useToggleLock({
-    onSuccess: () => {
-      setSnackbarVisible(true)
-      setSnackbarVariant('success')
-    },
-    onError: () => {
-      setSnackbarVisible(true)
-      setSnackbarVariant('error')
-    },
-  })
-
-  const lockStatus = device.properties.locked ? t.locked : t.unlocked
-  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
-
   const accessCodeCount = accessCodes?.length
 
   if (accessCodes == null) {
@@ -163,28 +148,12 @@ export function LockDeviceDetails({
           </div>
 
           <div className='seam-box'>
-            {device.properties.locked && device.properties.online && (
-              <div className='seam-content seam-lock-status'>
-                <div>
-                  <span className='seam-label'>{t.lockStatus}</span>
-                  <span className='seam-value'>{lockStatus}</span>
-                </div>
-                <div className='seam-right'>
-                  {!disableLockUnlock &&
-                    device.capabilities_supported.includes('lock') && (
-                      <Button
-                        size='small'
-                        onClick={() => {
-                          toggleLock.mutate(device)
-                        }}
-                      >
-                        {toggleLockLabel}
-                      </Button>
-                    )}
-                </div>
-              </div>
-            )}
-
+            <LockDeviceLockButtons
+              setSnackbarVisible={setSnackbarVisible}
+              setSnackbarVariant={setSnackbarVariant}
+              device={device}
+              disableLockUnlock={disableLockUnlock}
+            />
             <AccessCodeLength
               supportedCodeLengths={
                 device.properties?.supported_code_lengths ?? []
@@ -230,14 +199,9 @@ function AccessCodeLength(props: {
 
 const t = {
   device: 'Device',
-  unlock: 'Unlock',
-  lock: 'Lock',
-  locked: 'Locked',
-  unlocked: 'Unlocked',
   accessCodes: 'access codes',
   codeLength: 'Code length',
   digits: 'digits',
-  lockStatus: 'Lock status',
   status: 'Status',
   power: 'Power',
   successfullyUpdated: 'Lock status has been successfully updated',

package/src/lib/seam/components/DeviceDetails/LockDeviceLockButtons.tsx

@@ -0,0 +1,137 @@
+import type { LockDevice } from 'lib/seam/locks/lock-device.js'
+import { useLock } from 'lib/seam/locks/use-lock-door.js'
+import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
+import { useUnlock } from 'lib/seam/locks/use-unlock-door.js'
+import { Button } from 'lib/ui/Button.js'
+import type { SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js'
+
+interface LockDeviceLockButtonsProps {
+  device: LockDevice
+  disableLockUnlock: boolean
+  setSnackbarVisible: (visible: boolean) => void
+  setSnackbarVariant: (variant: SnackbarVariant) => void
+}
+
+export function LockDeviceLockButtons({
+  device,
+  setSnackbarVariant,
+  setSnackbarVisible,
+  disableLockUnlock,
+}: LockDeviceLockButtonsProps): JSX.Element | null {
+  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
+
+  const toggleLock = useToggleLock({
+    onSuccess: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('success')
+    },
+    onError: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('error')
+    },
+  })
+
+  const lock = useLock({
+    onSuccess: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('success')
+    },
+    onError: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('error')
+    },
+  })
+
+  const unlock = useUnlock({
+    onSuccess: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('success')
+    },
+    onError: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('error')
+    },
+  })
+
+  if (disableLockUnlock) {
+    return null
+  }
+
+  if (
+    device.can_remotely_lock === true &&
+    device.can_remotely_unlock === true
+  ) {
+    return (
+      <div className='seam-content seam-lock-status'>
+        <div>
+          <span className='seam-label'>{t.lockStatus}</span>
+          <span className='seam-value'>{lockStatus}</span>
+        </div>
+        <div className='seam-right'>
+          <Button
+            size='small'
+            onClick={() => {
+              toggleLock.mutate(device)
+            }}
+          >
+            {toggleLockLabel}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  if (device.can_remotely_lock === true) {
+    return (
+      <div className='seam-content seam-lock-status'>
+        <div>
+          <span className='seam-label'>{t.lockStatus}</span>
+          <span className='seam-value'>{lockStatus}</span>
+        </div>
+        <div className='seam-right'>
+          <Button
+            size='small'
+            onClick={() => {
+              lock.mutate(device)
+            }}
+          >
+            {t.lock}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  if (device.can_remotely_unlock === true) {
+    return (
+      <div className='seam-content seam-lock-status'>
+        <div>
+          <span className='seam-label'>{t.lockStatus}</span>
+          <span className='seam-value'>{lockStatus}</span>
+        </div>
+        <div className='seam-right'>
+          <Button
+            size='small'
+            onClick={() => {
+              unlock.mutate(device)
+            }}
+          >
+            {t.unlock}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}
+
+const t = {
+  unlock: 'Unlock',
+  lock: 'Lock',
+  locked: 'Locked',
+  unlocked: 'Unlocked',
+  lockStatus: 'Lock status',
+  statusUnknown: 'Unknown',
+}

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

@@ -1,4 +1,5 @@
 import type { SeamHttpApiError } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type {
   DeviceModel,
   RouteRequestParams,
@@ -6,7 +7,6 @@ import type {
 } from '@seamapi/types/devicedb'
 import { useQuery } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceModelParams = DeviceModelsGetParams

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

@@ -1,4 +1,5 @@
 import type { SeamHttpApiError } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type {
   DeviceModel,
   RouteRequestParams,
@@ -6,7 +7,6 @@ import type {
 } from '@seamapi/types/devicedb'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceModelsParams = DeviceModelsListParams

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

@@ -1,4 +1,5 @@
 import type { SeamHttpApiError } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type {
   Manufacturer,
   RouteRequestParams,
@@ -6,7 +7,6 @@ import type {
 } from '@seamapi/types/devicedb'
 import { useQuery } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseManufacturerParams = ManufacturersGetParams

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

@@ -1,4 +1,5 @@
 import type { SeamHttpApiError } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type {
   Manufacturer,
   RouteRequestParams,
@@ -6,7 +7,6 @@ import type {
 } from '@seamapi/types/devicedb'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseManufacturersParams = ManufacturersListParams

package/src/lib/seam/connect-webviews/use-create-connect-webview.ts

@@ -2,11 +2,11 @@ import type {
   ConnectWebviewsCreateBody,
   SeamHttpApiError,
 } from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
 import type { ConnectWebview } from '@seamapi/types/connect'
 import { useMutation, type UseMutationResult } from '@tanstack/react-query'
 
 import { useClientSession } from 'lib/seam/client-sessions/use-client-session.js'
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export interface UseCreateConnectWebviewParams {
   willNavigateToWebview?: boolean

package/src/lib/seam/connected-accounts/use-connected-account.ts

@@ -2,10 +2,10 @@ import type {
   ConnectedAccountsGetParams,
   SeamHttpApiError,
 } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type { ConnectedAccount } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseConnectedAccountParams = ConnectedAccountsGetParams

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

@@ -2,10 +2,10 @@ import type {
   DevicesListDeviceProvidersParams,
   SeamHttpApiError,
 } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type { DeviceProvider } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceProvidersParams = DevicesListDeviceProvidersParams

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

@@ -1,8 +1,8 @@
 import type { DevicesGetParams, SeamHttpApiError } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type { Device } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceParams = DevicesGetParams

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

@@ -1,8 +1,8 @@
 import type { DevicesListParams, SeamHttpApiError } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type { Device } from '@seamapi/types/connect'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDevicesParams = DevicesListParams

package/src/lib/seam/devices/use-update-device-name.ts

@@ -3,6 +3,7 @@ import type {
   DevicesUpdateBody,
   SeamHttpApiError,
 } from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
 import type { Device } from '@seamapi/types/connect'
 import {
   useMutation,
@@ -10,8 +11,6 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
-
 export type UseUpdateDeviceNameParams = never
 
 export type UseUpdateDeviceNameData = undefined

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

@@ -1,8 +1,8 @@
 import type { EventsListParams, SeamHttpApiError } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type { SeamEvent } from '@seamapi/types/connect'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseEventsParams = EventsListParams

package/src/lib/seam/index.ts

@@ -11,10 +11,4 @@ export * from './devices/use-device.js'
 export * from './devices/use-device-providers.js'
 export * from './devices/use-devices.js'
 export * from './SeamProvider.js'
-export * from './use-seam-client.js'
-export * from './use-seam-infinite-query.js'
-export * from './use-seam-mutation.js'
-export * from './use-seam-mutation-without-workspace.js'
-export * from './use-seam-query.js'
 export * from './use-seam-query-result.js'
-export * from './use-seam-query-without-workspace.js'

package/src/lib/seam/locks/use-lock-door.ts

@@ -0,0 +1,101 @@
+import type {
+  SeamActionAttemptFailedError,
+  SeamActionAttemptTimeoutError,
+  SeamHttpApiError,
+} from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
+import type { ActionAttempt, Device } from '@seamapi/types/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+export type UseLockData = undefined
+
+export type UseLockMutationVariables = Pick<Device, 'device_id'> & {
+  properties: Required<Pick<Device['properties'], 'locked'>>
+}
+
+type LockActionAttempt = Extract<ActionAttempt, { action_type: 'LOCK_DOOR' }>
+
+type MutationError =
+  | SeamHttpApiError
+  | SeamActionAttemptFailedError<LockActionAttempt>
+  | SeamActionAttemptTimeoutError<LockActionAttempt>
+
+interface UseLockParams {
+  onError?: () => void
+  onSuccess?: () => void
+}
+
+export function useLock(
+  params: UseLockParams = {}
+): UseMutationResult<UseLockData, MutationError, UseLockMutationVariables> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<UseLockData, MutationError, UseLockMutationVariables>({
+    mutationFn: async (variables) => {
+      const {
+        device_id: deviceId,
+        properties: { locked },
+      } = variables
+      if (client === null) throw new NullSeamClientError()
+      if (locked == null) return
+      await client.locks.lockDoor({ device_id: deviceId })
+    },
+    onMutate: (variables) => {
+      queryClient.setQueryData<Device[]>(['devices', 'list', {}], (devices) => {
+        if (devices == null) {
+          return devices
+        }
+
+        return devices.map((device) => {
+          if (
+            device.device_id !== variables.device_id ||
+            device.properties.locked == null
+          ) {
+            return device
+          }
+
+          return {
+            ...device,
+            properties: {
+              ...device.properties,
+              locked: !variables.properties.locked,
+            },
+          }
+        })
+      })
+
+      queryClient.setQueryData<Device>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (device) => {
+          if (device?.properties.locked == null) return device
+
+          return {
+            ...device,
+            properties: {
+              ...device.properties,
+              locked: !variables.properties.locked,
+            },
+          }
+        }
+      )
+    },
+    onError: async (_error, variables) => {
+      params.onError?.()
+
+      await queryClient.invalidateQueries({
+        queryKey: ['devices', 'list'],
+      })
+      await queryClient.invalidateQueries({
+        queryKey: ['devices', 'get', { device_id: variables.device_id }],
+      })
+    },
+    onSuccess() {
+      params.onSuccess?.()
+    },
+  })
+}

package/src/lib/seam/locks/use-toggle-lock.ts

@@ -3,6 +3,7 @@ import type {
   SeamActionAttemptTimeoutError,
   SeamHttpApiError,
 } from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
 import type { ActionAttempt, Device } from '@seamapi/types/connect'
 import {
   useMutation,
@@ -10,8 +11,6 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
-
 export type UseToggleLockData = undefined
 
 export type UseToggleLockMutationVariables = Pick<Device, 'device_id'> & {

package/src/lib/seam/locks/use-unlock-door.ts

@@ -0,0 +1,104 @@
+import type {
+  SeamActionAttemptFailedError,
+  SeamActionAttemptTimeoutError,
+  SeamHttpApiError,
+} from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
+import type { ActionAttempt, Device } from '@seamapi/types/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+export type UseUnlockData = undefined
+
+export type UseUnlockMutationVariables = Pick<Device, 'device_id'> & {
+  properties: Required<Pick<Device['properties'], 'locked'>>
+}
+
+type UnlockActionAttempt = Extract<
+  ActionAttempt,
+  { action_type: 'UNLOCK_DOOR' }
+>
+
+type MutationError =
+  | SeamHttpApiError
+  | SeamActionAttemptFailedError<UnlockActionAttempt>
+  | SeamActionAttemptTimeoutError<UnlockActionAttempt>
+
+interface UseUnlockParams {
+  onError?: () => void
+  onSuccess?: () => void
+}
+
+export function useUnlock(
+  params: UseUnlockParams = {}
+): UseMutationResult<UseUnlockData, MutationError, UseUnlockMutationVariables> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<UseUnlockData, MutationError, UseUnlockMutationVariables>({
+    mutationFn: async (variables) => {
+      const {
+        device_id: deviceId,
+        properties: { locked },
+      } = variables
+      if (client === null) throw new NullSeamClientError()
+      if (locked == null) return
+      await client.locks.unlockDoor({ device_id: deviceId })
+    },
+    onMutate: (variables) => {
+      queryClient.setQueryData<Device[]>(['devices', 'list', {}], (devices) => {
+        if (devices == null) {
+          return devices
+        }
+
+        return devices.map((device) => {
+          if (
+            device.device_id !== variables.device_id ||
+            device.properties.locked == null
+          ) {
+            return device
+          }
+
+          return {
+            ...device,
+            properties: {
+              ...device.properties,
+              locked: !variables.properties.locked,
+            },
+          }
+        })
+      })
+
+      queryClient.setQueryData<Device>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (device) => {
+          if (device?.properties.locked == null) return device
+
+          return {
+            ...device,
+            properties: {
+              ...device.properties,
+              locked: !variables.properties.locked,
+            },
+          }
+        }
+      )
+    },
+    onError: async (_error, variables) => {
+      params.onError?.()
+
+      await queryClient.invalidateQueries({
+        queryKey: ['devices', 'list'],
+      })
+      await queryClient.invalidateQueries({
+        queryKey: ['devices', 'get', { device_id: variables.device_id }],
+      })
+    },
+    onSuccess() {
+      params.onSuccess?.()
+    },
+  })
+}

package/src/lib/seam/noise-sensors/use-noise-thresholds.ts

@@ -2,10 +2,10 @@ import type {
   NoiseSensorsNoiseThresholdsListParams,
   SeamHttpApiError,
 } from '@seamapi/http/connect'
+import { useSeamClient } from '@seamapi/react-query'
 import type { NoiseThreshold } from '@seamapi/types/connect'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseNoiseThresholdsParams = NoiseSensorsNoiseThresholdsListParams

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

@@ -4,6 +4,7 @@ import type {
   SeamHttpApiError,
   ThermostatsCoolBody,
 } from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
 import type { ActionAttempt, Device } from '@seamapi/types/connect'
 import {
   useMutation,
@@ -15,7 +16,6 @@ import {
   getCoolingSetPointCelsius,
   getCoolingSetPointFahrenheit,
 } from 'lib/seam/thermostats/unit-conversion.js'
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export type UseCoolThermostatParams = never
 

package/src/lib/seam/thermostats/use-create-thermostat-climate-preset.ts

@@ -2,6 +2,7 @@ import type {
   SeamHttpApiError,
   ThermostatsCreateClimatePresetBody,
 } from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
 import {
   useMutation,
   type UseMutationResult,
@@ -13,7 +14,6 @@ import type {
   ThermostatDevice,
 } from 'lib/seam/thermostats/thermostat-device.js'
 import { fahrenheitToCelsius } from 'lib/seam/thermostats/unit-conversion.js'
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export type UseCreateThermostatClimatePresetParams = never
 export type UseCreateThermostatClimatePresetData = undefined

package/src/lib/seam/thermostats/use-delete-thermostat-climate-preset.ts

@@ -2,6 +2,7 @@ import type {
   SeamHttpApiError,
   ThermostatsDeleteClimatePresetParams,
 } from '@seamapi/http/connect'
+import { NullSeamClientError, useSeamClient } from '@seamapi/react-query'
 import {
   useMutation,
   type UseMutationResult,
@@ -9,7 +10,6 @@ import {
 } from '@tanstack/react-query'
 
 import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export type UseDeleteThermostatClimatePresetParams = never