fix: device lock status disappearing when unlocked

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',

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',
+}

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?.()
+    },
+  })
+}