@seamapi/react 0.20.0 → 0.21.0

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

@@ -3,7 +3,3 @@ import type { UseSeamQueryResult } from '../../../lib/seam/use-seam-query-result
 export type UseDeviceParams = DeviceGetRequest | string;
 export type UseDeviceData = Device<CommonDeviceProperties> | null;
 export declare function useDevice(params: DeviceGetRequest): UseSeamQueryResult<'device', UseDeviceData>;
-export declare function useFakeDevice(_params: DeviceGetRequest): {
-    isLoading: boolean;
-    device: UseDeviceData;
-};

package/lib/seam/devices/use-device.js

@@ -14,43 +14,4 @@ export function useDevice(params) {
     });
     return { ...rest, device: data };
 }
-export function useFakeDevice(_params) {
-    const device = {
-        device_id: 'f9a9ab36-9e14-4390-a88c-b4c78304c6aa',
-        device_type: 'august_lock',
-        capabilities_supported: ['access_code', 'lock'],
-        properties: {
-            locked: true,
-            online: true,
-            door_open: false,
-            manufacturer: 'august',
-            battery_level: 0.9999532347993827,
-            serial_number: '00000004-992d-45a0-bea1-9128fdcd8d12',
-            august_metadata: {
-                lock_id: 'lock-1',
-                house_id: 'house-1',
-                lock_name: 'FRONT DOOR',
-                has_keypad: true,
-                house_name: 'My House',
-            },
-            supported_code_lengths: [6],
-            name: 'FRONT DOOR',
-            battery: {
-                level: 0.9999532347993827,
-                status: 'full',
-            },
-            image_url: 'https://connect.getseam.com/assets/images/devices/august_wifi-smart-lock-3rd-gen_silver_front.png',
-        },
-        location: {
-            timezone: 'America/Los_Angeles',
-            location_name: 'My House',
-        },
-        connected_account_id: '6fc0f854-cb5a-461a-af93-e543ce1f730f',
-        workspace_id: 'a9598de8-e627-4d01-b119-61ab7b9e07bd',
-        created_at: '2023-05-08T22:37:24.206Z',
-        errors: [],
-        warnings: [],
-    };
-    return { isLoading: false, device };
-}
 //# sourceMappingURL=use-device.js.map

package/lib/seam/devices/use-device.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-device.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-device.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAUhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,SAAS,CACvB,MAAwB;IAExB,MAAM,gBAAgB,GACpB,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAE7D,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAGhC;QACA,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,gBAAgB,CAAC;QAC9C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,IAAI,CAAA;YAC/B,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QACpD,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;AAClC,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,OAAyB;IAIrD,MAAM,MAAM,GAAe;QACzB,SAAS,EAAE,sCAAsC;QACjD,WAAW,EAAE,aAAa;QAC1B,sBAAsB,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC;QAC/C,UAAU,EAAE;YACV,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,KAAK;YAChB,YAAY,EAAE,QAAQ;YACtB,aAAa,EAAE,kBAAkB;YACjC,aAAa,EAAE,sCAAsC;YACrD,eAAe,EAAE;gBACf,OAAO,EAAE,QAAQ;gBACjB,QAAQ,EAAE,SAAS;gBACnB,SAAS,EAAE,YAAY;gBACvB,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,UAAU;aACvB;YACD,sBAAsB,EAAE,CAAC,CAAC,CAAC;YAC3B,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE;gBACP,KAAK,EAAE,kBAAkB;gBACzB,MAAM,EAAE,MAAM;aACf;YACD,SAAS,EACP,mGAAmG;SACtG;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,qBAAqB;YAC/B,aAAa,EAAE,UAAU;SAC1B;QACD,oBAAoB,EAAE,sCAAsC;QAC5D,YAAY,EAAE,sCAAsC;QACpD,UAAU,EAAE,0BAA0B;QACtC,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE;KACb,CAAA;IAED,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA;AACrC,CAAC"}
+{"version":3,"file":"use-device.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-device.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAShD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAM3D,MAAM,UAAU,SAAS,CACvB,MAAwB;IAExB,MAAM,gBAAgB,GACpB,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAE7D,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAGhC;QACA,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,gBAAgB,CAAC;QAC9C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,IAAI,CAAA;YAC/B,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QACpD,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;AAClC,CAAC"}

package/lib/seam/devices/use-devices.js

@@ -1,8 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSeamClient } from '../../../lib/seam/use-seam-client.js';
 import { byCreatedAt } from '../../../lib/sort-by.js';
 export function useDevices(params) {
     const { client } = useSeamClient();
+    const queryClient = useQueryClient();
     const { data, ...rest } = useQuery({
         enabled: client != null,
         queryKey: ['devices', 'list', params],
@@ -12,6 +13,12 @@ export function useDevices(params) {
             const devices = await client?.devices.list(params);
             return devices.sort(byCreatedAt);
         },
+        onSuccess(devices) {
+            // Prime cache for each device.
+            for (const device of devices) {
+                queryClient.setQueryData(['devices', 'get', { device_id: device.device_id }], device);
+            }
+        },
     });
     return { ...rest, devices: data };
 }

package/lib/seam/devices/use-devices.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAShD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAK5C,MAAM,UAAU,UAAU,CACxB,MAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAChC;QACE,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC;QACrC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,MAAM,OAAO,GAAG,MAAM,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAClD,OAAO,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAClC,CAAC;KACF,CACF,CAAA;IAED,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;AACnC,CAAC"}
+{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAShE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAK5C,MAAM,UAAU,UAAU,CACxB,MAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAChC;QACE,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC;QACrC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,MAAM,OAAO,GAAG,MAAM,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAClD,OAAO,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAClC,CAAC;QACD,SAAS,CAAC,OAAO;YACf,+BAA+B;YAC/B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC5B,WAAW,CAAC,YAAY,CACtB,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,EACnD,MAAM,CACP,CAAA;aACF;QACH,CAAC;KACF,CACF,CAAA;IAED,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAA;AACnC,CAAC"}

package/lib/seam/devices/use-toggle-lock.d.ts

@@ -0,0 +1,5 @@
+import { type UseMutationResult } from '@tanstack/react-query';
+import type { ActionAttempt, LockDevice, SeamError } from 'seamapi';
+export declare function useToggleLock({ device_id: deviceId, properties: { locked }, }: LockDevice): UseMutationResult<{
+    actionAttempt: ActionAttempt;
+}, SeamError, void>;

package/lib/seam/devices/use-toggle-lock.js

@@ -0,0 +1,57 @@
+import { useMutation, useQueryClient, } from '@tanstack/react-query';
+import { useSeamClient } from '../../../lib/index.js';
+import { isLockDevice } from '../../../lib/seam/devices/types.js';
+export function useToggleLock({ device_id: deviceId, properties: { locked }, }) {
+    const { client } = useSeamClient();
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: async () => {
+            if (client == null) {
+                throw new Error('Missing seam client');
+            }
+            const toggle = locked ? client.locks.unlockDoor : client.locks.lockDoor;
+            return await toggle(deviceId);
+        },
+        onMutate: () => {
+            queryClient.setQueryData(['devices', 'list', {}], (devices) => {
+                if (devices == null) {
+                    return;
+                }
+                return devices.map((device) => {
+                    const isTarget = device.device_id === deviceId;
+                    if (isTarget && isLockDevice(device)) {
+                        return {
+                            ...device,
+                            properties: {
+                                ...device.properties,
+                                locked: !device.properties.locked,
+                            },
+                        };
+                    }
+                    return device;
+                });
+            });
+            queryClient.setQueryData(['devices', 'get', { device_id: deviceId }], (device) => {
+                if (device == null) {
+                    return;
+                }
+                return {
+                    ...device,
+                    properties: {
+                        ...device.properties,
+                        locked: !device.properties.locked,
+                    },
+                };
+            });
+        },
+        onSettled: async () => {
+            await queryClient.invalidateQueries({
+                queryKey: ['devices', 'list'],
+            });
+            await queryClient.invalidateQueries({
+                queryKey: ['devices', 'get', { device_id: deviceId }],
+            });
+        },
+    });
+}
+//# sourceMappingURL=use-toggle-lock.js.map

package/lib/seam/devices/use-toggle-lock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toggle-lock.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/use-toggle-lock.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EAEX,cAAc,GACf,MAAM,uBAAuB,CAAA;AAS9B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,EAAE,QAAQ,EACnB,UAAU,EAAE,EAAE,MAAM,EAAE,GACX;IAKX,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IAEpC,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,KAAK,IAAI,EAAE;YACrB,IAAI,MAAM,IAAI,IAAI,EAAE;gBAClB,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAA;aACvC;YAED,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAA;YACvE,OAAO,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAA;QAC/B,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE;YACb,WAAW,CAAC,YAAY,CACtB,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC,EACvB,CAAC,OAAO,EAAE,EAAE;gBACV,IAAI,OAAO,IAAI,IAAI,EAAE;oBACnB,OAAM;iBACP;gBAED,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBAC5B,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,KAAK,QAAQ,CAAA;oBAC9C,IAAI,QAAQ,IAAI,YAAY,CAAC,MAAM,CAAC,EAAE;wBACpC,OAAO;4BACL,GAAG,MAAM;4BACT,UAAU,EAAE;gCACV,GAAG,MAAM,CAAC,UAAU;gCACpB,MAAM,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM;6BAClC;yBACF,CAAA;qBACF;oBAED,OAAO,MAAM,CAAA;gBACf,CAAC,CAAC,CAAA;YACJ,CAAC,CACF,CAAA;YAED,WAAW,CAAC,YAAY,CACtB,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,EAC3C,CAAC,MAAM,EAAE,EAAE;gBACT,IAAI,MAAM,IAAI,IAAI,EAAE;oBAClB,OAAM;iBACP;gBAED,OAAO;oBACL,GAAG,MAAM;oBACT,UAAU,EAAE;wBACV,GAAG,MAAM,CAAC,UAAU;wBACpB,MAAM,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM;qBAClC;iBACF,CAAA;YACH,CAAC,CACF,CAAA;QACH,CAAC;QACD,SAAS,EAAE,KAAK,IAAI,EAAE;YACpB,MAAM,WAAW,CAAC,iBAAiB,CAAC;gBAClC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;aAC9B,CAAC,CAAA;YACF,MAAM,WAAW,CAAC,iBAAiB,CAAC;gBAClC,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;aACtD,CAAC,CAAA;QACJ,CAAC;KACF,CAAC,CAAA;AACJ,CAAC"}

package/lib/ui/AccessCodeDetails/AccessCodeDetails.js

@@ -7,9 +7,9 @@ import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
 import { useIsDateInPast } from '../../../lib/use-is-date-in-past.js';
 export function AccessCodeDetails({ accessCode, onBack, }) {
     const name = accessCode.name ?? t.fallbackName;
-    const [selectedDevice, selectDevice] = useState(null);
-    if (selectedDevice != null) {
-        return (_jsx(DeviceDetails, { device: selectedDevice, onBack: () => {
+    const [selectedDeviceId, selectDevice] = useState(null);
+    if (selectedDeviceId != null) {
+        return (_jsx(DeviceDetails, { deviceId: selectedDeviceId, onBack: () => {
                 selectDevice(null);
             } }));
     }

package/lib/ui/AccessCodeDetails/AccessCodeDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccessCodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx"],"names":[],"mappings":"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"}

package/lib/ui/AccessCodeDetails/AccessCodeDevice.d.ts

@@ -1,5 +1,4 @@
-import type { CommonDeviceProperties, Device } from 'seamapi';
 export declare function AccessCodeDevice({ deviceId, onSelectDevice, }: {
     deviceId: string;
-    onSelectDevice: (device: Device<CommonDeviceProperties>) => void;
+    onSelectDevice: (deviceId: string) => void;
 }): JSX.Element | null;

package/lib/ui/AccessCodeDetails/AccessCodeDevice.js

@@ -1,22 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isLockDevice } from '../../../lib/seam/devices/types.js';
-import { useFakeDevice } from '../../../lib/seam/devices/use-device.js';
+import { useDevice } from '../../../lib/seam/devices/use-device.js';
+import { useToggleLock } from '../../../lib/seam/devices/use-toggle-lock.js';
 import { Button } from '../../../lib/ui/Button.js';
 import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
 import { getDeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
 import { TextButton } from '../../../lib/ui/TextButton.js';
 export function AccessCodeDevice({ deviceId, onSelectDevice, }) {
-    //  TODO: Replace with `useDevice()` once ready
-    const { isLoading, device } = useFakeDevice({ device_id: deviceId });
+    const { isLoading, device } = useDevice({ device_id: deviceId });
     if (isLoading || device == null || !isLockDevice(device)) {
         return null;
     }
+    return _jsx(LockDeviceDetails, { device: device, onSelectDevice: onSelectDevice });
+}
+function LockDeviceDetails(props) {
+    const { device, onSelectDevice } = props;
+    const toggleLock = useToggleLock(device);
     const model = getDeviceModel(device);
+    const toggleLockLabel = device.properties.locked ? t.unlock : t.lock;
     return (_jsxs("div", { className: 'seam-access-code-device', children: [_jsx("div", { className: 'seam-device-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-model', children: model }), _jsx(TextButton, { onClick: () => {
-                            onSelectDevice(device);
-                        }, children: t.deviceDetails })] }), _jsx(Button, { children: "Unlock" })] }));
+                            onSelectDevice(device.device_id);
+                        }, children: t.deviceDetails })] }), _jsx(Button, { onClick: () => {
+                    toggleLock.mutate();
+                }, children: toggleLockLabel })] }));
 }
 const t = {
     deviceDetails: 'Device details',
+    unlock: 'Unlock',
+    lock: 'Lock',
 };
 //# sourceMappingURL=AccessCodeDevice.js.map

package/lib/ui/AccessCodeDetails/AccessCodeDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeDevice.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,GAIf;IACC,+CAA+C;IAC/C,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAA;IAEpE,IAAI,SAAS,IAAI,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QACxD,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3B,EACN,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,YAAY,YAAE,KAAK,GAAO,EACzC,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,MAAM,CAAC,CAAA;wBACxB,CAAC,YAEA,CAAC,CAAC,aAAa,GACL,IACT,EACN,KAAC,MAAM,yBAAgB,IACnB,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,aAAa,EAAE,gBAAgB;CAChC,CAAA"}
+{"version":3,"file":"AccessCodeDevice.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,GAIf;IACC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAA;IAEhE,IAAI,SAAS,IAAI,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QACxD,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,GAAI,CAAA;AAC9E,CAAC;AAED,SAAS,iBAAiB,CAAC,KAG1B;IACC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IACxC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IACxC,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;IAEpC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAEpE,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3B,EACN,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,YAAY,YAAE,KAAK,GAAO,EACzC,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;wBAClC,CAAC,YAEA,CAAC,CAAC,aAAa,GACL,IACT,EACN,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;oBACZ,UAAU,CAAC,MAAM,EAAE,CAAA;gBACrB,CAAC,YAEA,eAAe,GACT,IACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,aAAa,EAAE,gBAAgB;IAC/B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACb,CAAA"}

package/lib/ui/Button.d.ts

@@ -3,6 +3,7 @@ interface ButtonProps {
     variant?: 'solid' | 'outline' | 'neutral';
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
+    onClick?: () => void;
 }
-export declare function Button({ variant, children, size, disabled, }: ButtonProps): JSX.Element;
+export declare function Button({ variant, children, size, disabled, onClick, }: ButtonProps): JSX.Element;
 export {};

package/lib/ui/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-export function Button({ variant = 'outline', children, size = 'medium', disabled, }) {
+export function Button({ variant = 'outline', children, size = 'medium', disabled, onClick, }) {
     return (_jsx("button", { className: classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {
             'seam-btn-disabled': disabled,
-        }), disabled: disabled, children: children }));
+        }), disabled: disabled, onClick: onClick, children: children }));
 }
 //# sourceMappingURL=Button.js.map

package/lib/ui/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/lib/ui/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AASnC,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,QAAQ,GACI;IACZ,OAAO,CACL,iBACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,OAAO,aAAa,IAAI,EAAE,EAAE;YACrE,mBAAmB,EAAE,QAAQ;SAC9B,CAAC,EACF,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACF,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/lib/ui/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAUnC,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,OAAO,GACK;IACZ,OAAO,CACL,iBACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,OAAO,aAAa,IAAI,EAAE,EAAE;YACrE,mBAAmB,EAAE,QAAQ;SAC9B,CAAC,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,YAEf,QAAQ,GACF,CACV,CAAA;AACH,CAAC"}

package/lib/ui/DeviceDetails/DeviceDetails.d.ts

@@ -1,6 +1,5 @@
-import { type CommonDeviceProperties, type Device } from 'seamapi';
 export interface DeviceDetailsProps {
-    device: Device<CommonDeviceProperties>;
+    deviceId: string;
     onBack?: () => void;
 }
 export declare function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null;

package/lib/ui/DeviceDetails/DeviceDetails.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import {} from 'seamapi';
+import { useDevice } from '../../../lib/index.js';
 import { ChevronRightIcon } from '../../../lib/icons/ChevronRight.js';
 import { useAccessCodes } from '../../../lib/seam/access-codes/use-access-codes.js';
 import { isLockDevice } from '../../../lib/seam/devices/types.js';
+import { useToggleLock } from '../../../lib/seam/devices/use-toggle-lock.js';
 import { AccessCodeTable } from '../../../lib/ui/AccessCodeTable/AccessCodeTable.js';
 import { Button } from '../../../lib/ui/Button.js';
 import { BatteryStatus } from '../../../lib/ui/device/BatteryStatus.js';
@@ -12,24 +13,38 @@ import { DeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
 import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
 import useToggle from '../../../lib/use-toggle.js';
 export function DeviceDetails(props) {
-    const { device, onBack } = props;
-    const [accessCodesOpen, toggleAccessCodesOpen] = useToggle();
-    const { isLoading, accessCodes } = useAccessCodes({
-        device_id: device.device_id,
+    const { deviceId, onBack } = props;
+    const { device } = useDevice({
+        device_id: deviceId,
     });
-    if (isLoading) {
+    if (device == null) {
         return null;
     }
-    if (accessCodesOpen) {
-        return (_jsx(AccessCodeTable, { deviceId: device.device_id, onBack: toggleAccessCodesOpen }));
-    }
     if (!isLockDevice(device)) {
         return null;
     }
+    return _jsx(LockDeviceDetails, { device: device, onBack: onBack });
+}
+function LockDeviceDetails(props) {
+    const { device, onBack } = props;
+    const [accessCodesOpen, toggleAccessCodesOpen] = useToggle();
+    const toggleLock = useToggleLock(device);
+    const { accessCodes } = useAccessCodes({
+        device_id: device.device_id,
+    });
     const lockStatus = device.properties.locked ? t.locked : t.unlocked;
+    const toggleLockLabel = device.properties.locked ? t.unlock : t.lock;
     const accessCodeCount = accessCodes?.length;
     const accessCodeLength = device.properties?.schlage_metadata?.access_code_length;
-    return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device', onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.device }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx(BatteryStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }) }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodesOpen, children: [_jsxs("span", { className: 'seam-value', children: [accessCodeCount, " ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content seam-lock-status', children: [_jsxs("div", { children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx("div", { className: 'seam-right', children: _jsx(Button, { size: 'small', children: t.unlock }) })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
+    if (accessCodes == null) {
+        return null;
+    }
+    if (accessCodesOpen) {
+        return (_jsx(AccessCodeTable, { deviceId: device.device_id, onBack: toggleAccessCodesOpen }));
+    }
+    return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device', onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.device }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx(BatteryStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }) }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodesOpen, children: [_jsxs("span", { className: 'seam-value', children: [accessCodeCount, " ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content seam-lock-status', children: [_jsxs("div", { children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx("div", { className: 'seam-right', children: _jsx(Button, { size: 'small', onClick: () => {
+                                                toggleLock.mutate();
+                                            }, children: toggleLockLabel }) })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
 }
 function AccessCodeLength(props) {
     const { accessCodeLength } = props;
@@ -41,6 +56,7 @@ function AccessCodeLength(props) {
 const t = {
     device: 'Device',
     unlock: 'Unlock',
+    lock: 'Lock',
     locked: 'Locked',
     unlocked: 'Unlocked',
     accessCodes: 'access codes',

package/lib/ui/DeviceDetails/DeviceDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}

package/lib/ui/DeviceTable/DeviceTable.js

@@ -18,9 +18,9 @@ import { Caption } from '../../../lib/ui/typography/Caption.js';
 import { Title } from '../../../lib/ui/typography/Title.js';
 export function DeviceTable({ onBack, ...props }) {
     const { devices, isLoading, isError, error } = useDevices(props);
-    const [selectedDevice, selectDevice] = useState(null);
-    if (selectedDevice != null) {
-        return (_jsx(DeviceDetails, { device: selectedDevice, onBack: () => {
+    const [selectedDeviceId, selectDevice] = useState(null);
+    if (selectedDeviceId != null) {
+        return (_jsx(DeviceDetails, { deviceId: selectedDeviceId, onBack: () => {
                 selectDevice(null);
             } }));
     }
@@ -35,7 +35,7 @@ export function DeviceTable({ onBack, ...props }) {
     }
     const deviceCount = devices.length;
     return (_jsxs("div", { className: 'seam-device-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }) }), _jsx(TableBody, { children: devices.map((device) => (_jsx(DeviceRow, { device: device, onClick: () => {
-                        selectDevice(device);
+                        selectDevice(device.device_id);
                     } }, device.device_id))) })] }));
 }
 function DeviceRow(props) {

package/lib/ui/DeviceTable/DeviceTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",

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

@@ -4,7 +4,6 @@ import type {
   Device,
   DeviceGetRequest,
   DeviceGetResponse,
-  LockDevice,
   SeamError,
 } from 'seamapi'
 
@@ -35,48 +34,3 @@ export function useDevice(
 
   return { ...rest, device: data }
 }
-
-export function useFakeDevice(_params: DeviceGetRequest): {
-  isLoading: boolean
-  device: UseDeviceData
-} {
-  const device: LockDevice = {
-    device_id: 'f9a9ab36-9e14-4390-a88c-b4c78304c6aa',
-    device_type: 'august_lock',
-    capabilities_supported: ['access_code', 'lock'],
-    properties: {
-      locked: true,
-      online: true,
-      door_open: false,
-      manufacturer: 'august',
-      battery_level: 0.9999532347993827,
-      serial_number: '00000004-992d-45a0-bea1-9128fdcd8d12',
-      august_metadata: {
-        lock_id: 'lock-1',
-        house_id: 'house-1',
-        lock_name: 'FRONT DOOR',
-        has_keypad: true,
-        house_name: 'My House',
-      },
-      supported_code_lengths: [6],
-      name: 'FRONT DOOR',
-      battery: {
-        level: 0.9999532347993827,
-        status: 'full',
-      },
-      image_url:
-        'https://connect.getseam.com/assets/images/devices/august_wifi-smart-lock-3rd-gen_silver_front.png',
-    },
-    location: {
-      timezone: 'America/Los_Angeles',
-      location_name: 'My House',
-    },
-    connected_account_id: '6fc0f854-cb5a-461a-af93-e543ce1f730f',
-    workspace_id: 'a9598de8-e627-4d01-b119-61ab7b9e07bd',
-    created_at: '2023-05-08T22:37:24.206Z',
-    errors: [],
-    warnings: [],
-  }
-
-  return { isLoading: false, device }
-}

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

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import type {
   CommonDeviceProperties,
   Device,
@@ -18,6 +18,8 @@ export function useDevices(
   params?: UseDevicesParams
 ): UseSeamQueryResult<'devices', UseDevicesData> {
   const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
   const { data, ...rest } = useQuery<DevicesListResponse['devices'], SeamError>(
     {
       enabled: client != null,
@@ -27,6 +29,15 @@ export function useDevices(
         const devices = await client?.devices.list(params)
         return devices.sort(byCreatedAt)
       },
+      onSuccess(devices) {
+        // Prime cache for each device.
+        for (const device of devices) {
+          queryClient.setQueryData(
+            ['devices', 'get', { device_id: device.device_id }],
+            device
+          )
+        }
+      },
     }
   )
 

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

@@ -0,0 +1,89 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  ActionAttempt,
+  CommonDeviceProperties,
+  Device,
+  LockDevice,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/index.js'
+
+import { isLockDevice } from 'lib/seam/devices/types.js'
+
+export function useToggleLock({
+  device_id: deviceId,
+  properties: { locked },
+}: LockDevice): UseMutationResult<
+  { actionAttempt: ActionAttempt },
+  SeamError,
+  void
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async () => {
+      if (client == null) {
+        throw new Error('Missing seam client')
+      }
+
+      const toggle = locked ? client.locks.unlockDoor : client.locks.lockDoor
+      return await toggle(deviceId)
+    },
+    onMutate: () => {
+      queryClient.setQueryData<Array<Device<CommonDeviceProperties>>>(
+        ['devices', 'list', {}],
+        (devices) => {
+          if (devices == null) {
+            return
+          }
+
+          return devices.map((device) => {
+            const isTarget = device.device_id === deviceId
+            if (isTarget && isLockDevice(device)) {
+              return {
+                ...device,
+                properties: {
+                  ...device.properties,
+                  locked: !device.properties.locked,
+                },
+              }
+            }
+
+            return device
+          })
+        }
+      )
+
+      queryClient.setQueryData<LockDevice>(
+        ['devices', 'get', { device_id: deviceId }],
+        (device) => {
+          if (device == null) {
+            return
+          }
+
+          return {
+            ...device,
+            properties: {
+              ...device.properties,
+              locked: !device.properties.locked,
+            },
+          }
+        }
+      )
+    },
+    onSettled: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['devices', 'list'],
+      })
+      await queryClient.invalidateQueries({
+        queryKey: ['devices', 'get', { device_id: deviceId }],
+      })
+    },
+  })
+}

package/src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx

@@ -1,6 +1,6 @@
 import { DateTime } from 'luxon'
 import { useState } from 'react'
-import type { AccessCode, CommonDeviceProperties, Device } from 'seamapi'
+import type { AccessCode } from 'seamapi'
 
 import { AccessCodeDevice } from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
 import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
@@ -17,13 +17,12 @@ export function AccessCodeDetails({
   onBack,
 }: AccessCodeDetailsProps): JSX.Element {
   const name = accessCode.name ?? t.fallbackName
-  const [selectedDevice, selectDevice] =
-    useState<Device<CommonDeviceProperties> | null>(null)
+  const [selectedDeviceId, selectDevice] = useState<string | null>(null)
 
-  if (selectedDevice != null) {
+  if (selectedDeviceId != null) {
     return (
       <DeviceDetails
-        device={selectedDevice}
+        deviceId={selectedDeviceId}
         onBack={() => {
           selectDevice(null)
         }}

package/src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx

@@ -1,7 +1,8 @@
-import type { CommonDeviceProperties, Device } from 'seamapi'
+import type { LockDevice } from 'seamapi'
 
 import { isLockDevice } from 'lib/seam/devices/types.js'
-import { useFakeDevice } from 'lib/seam/devices/use-device.js'
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { Button } from 'lib/ui/Button.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
@@ -12,17 +13,27 @@ export function AccessCodeDevice({
   onSelectDevice,
 }: {
   deviceId: string
-  onSelectDevice: (device: Device<CommonDeviceProperties>) => void
+  onSelectDevice: (deviceId: string) => void
 }): JSX.Element | null {
-  //  TODO: Replace with `useDevice()` once ready
-  const { isLoading, device } = useFakeDevice({ device_id: deviceId })
+  const { isLoading, device } = useDevice({ device_id: deviceId })
 
   if (isLoading || device == null || !isLockDevice(device)) {
     return null
   }
 
+  return <LockDeviceDetails device={device} onSelectDevice={onSelectDevice} />
+}
+
+function LockDeviceDetails(props: {
+  device: LockDevice
+  onSelectDevice: (deviceId: string) => void
+}) {
+  const { device, onSelectDevice } = props
+  const toggleLock = useToggleLock(device)
   const model = getDeviceModel(device)
 
+  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
+
   return (
     <div className='seam-access-code-device'>
       <div className='seam-device-image'>
@@ -32,17 +43,25 @@ export function AccessCodeDevice({
         <div className='seam-model'>{model}</div>
         <TextButton
           onClick={() => {
-            onSelectDevice(device)
+            onSelectDevice(device.device_id)
           }}
         >
           {t.deviceDetails}
         </TextButton>
       </div>
-      <Button>Unlock</Button>
+      <Button
+        onClick={() => {
+          toggleLock.mutate()
+        }}
+      >
+        {toggleLockLabel}
+      </Button>
     </div>
   )
 }
 
 const t = {
   deviceDetails: 'Device details',
+  unlock: 'Unlock',
+  lock: 'Lock',
 }

package/src/lib/ui/Button.tsx

@@ -5,6 +5,7 @@ interface ButtonProps {
   variant?: 'solid' | 'outline' | 'neutral'
   size?: 'small' | 'medium' | 'large'
   disabled?: boolean
+  onClick?: () => void
 }
 
 export function Button({
@@ -12,6 +13,7 @@ export function Button({
   children,
   size = 'medium',
   disabled,
+  onClick,
 }: ButtonProps): JSX.Element {
   return (
     <button
@@ -19,6 +21,7 @@ export function Button({
         'seam-btn-disabled': disabled,
       })}
       disabled={disabled}
+      onClick={onClick}
     >
       {children}
     </button>

package/src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -1,8 +1,11 @@
-import { type CommonDeviceProperties, type Device } from 'seamapi'
+import type { LockDevice } from 'seamapi'
+
+import { useDevice } from 'lib/index.js'
 
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
@@ -13,43 +16,57 @@ import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import useToggle from 'lib/use-toggle.js'
 
 export interface DeviceDetailsProps {
-  device: Device<CommonDeviceProperties>
+  deviceId: string
   onBack?: () => void
 }
 
 export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
-  const { device, onBack } = props
+  const { deviceId, onBack } = props
 
-  const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
-
-  const { isLoading, accessCodes } = useAccessCodes({
-    device_id: device.device_id,
+  const { device } = useDevice({
+    device_id: deviceId,
   })
 
-  if (isLoading) {
+  if (device == null) {
     return null
   }
 
-  if (accessCodesOpen) {
-    return (
-      <AccessCodeTable
-        deviceId={device.device_id}
-        onBack={toggleAccessCodesOpen}
-      />
-    )
-  }
-
   if (!isLockDevice(device)) {
     return null
   }
 
+  return <LockDeviceDetails device={device} onBack={onBack} />
+}
+
+function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
+  const { device, onBack } = props
+  const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
+  const toggleLock = useToggleLock(device)
+  const { accessCodes } = useAccessCodes({
+    device_id: device.device_id,
+  })
+
   const lockStatus = device.properties.locked ? t.locked : t.unlocked
+  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
 
   const accessCodeCount = accessCodes?.length
 
   const accessCodeLength =
     device.properties?.schlage_metadata?.access_code_length
 
+  if (accessCodes == null) {
+    return null
+  }
+
+  if (accessCodesOpen) {
+    return (
+      <AccessCodeTable
+        deviceId={device.device_id}
+        onBack={toggleAccessCodesOpen}
+      />
+    )
+  }
+
   return (
     <div className='seam-device-details'>
       <ContentHeader title='Device' onBack={onBack} />
@@ -91,7 +108,14 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
               <span className='seam-value'>{lockStatus}</span>
             </div>
             <div className='seam-right'>
-              <Button size='small'>{t.unlock}</Button>
+              <Button
+                size='small'
+                onClick={() => {
+                  toggleLock.mutate()
+                }}
+              >
+                {toggleLockLabel}
+              </Button>
             </div>
           </div>
           <AccessCodeLength accessCodeLength={accessCodeLength} />
@@ -122,6 +146,7 @@ function AccessCodeLength(props: {
 const t = {
   device: 'Device',
   unlock: 'Unlock',
+  lock: 'Lock',
   locked: 'Locked',
   unlocked: 'Unlocked',
   accessCodes: 'access codes',

package/src/lib/ui/DeviceTable/DeviceTable.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import type { CommonDeviceProperties, Device } from 'seamapi'
 
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import {
@@ -34,13 +33,12 @@ export function DeviceTable({
 }: DeviceTableProps): JSX.Element | null {
   const { devices, isLoading, isError, error } = useDevices(props)
 
-  const [selectedDevice, selectDevice] =
-    useState<Device<CommonDeviceProperties> | null>(null)
+  const [selectedDeviceId, selectDevice] = useState<string | null>(null)
 
-  if (selectedDevice != null) {
+  if (selectedDeviceId != null) {
     return (
       <DeviceDetails
-        device={selectedDevice}
+        deviceId={selectedDeviceId}
         onBack={() => {
           selectDevice(null)
         }}
@@ -76,7 +74,7 @@ export function DeviceTable({
             device={device}
             key={device.device_id}
             onClick={() => {
-              selectDevice(device)
+              selectDevice(device.device_id)
             }}
           />
         ))}