@seamapi/react 0.16.1 → 0.18.0

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

@@ -0,0 +1,79 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  CommonDeviceProperties,
+  Device,
+  DeviceGetRequest,
+  DeviceGetResponse,
+  LockDevice,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseDeviceParams = DeviceGetRequest | string
+export type UseDeviceData = Device<CommonDeviceProperties> | null
+
+export function useDevice(
+  params: DeviceGetRequest
+): UseSeamQueryResult<'device', UseDeviceData> {
+  const normalizedParams =
+    typeof params === 'string' ? { device_id: params } : params
+
+  const { client } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    DeviceGetResponse['device'] | null,
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['devices', 'get', normalizedParams],
+    queryFn: async () => {
+      if (client == null) return null
+      return await client?.devices.get(normalizedParams)
+    },
+  })
+
+  return { ...rest, device: data }
+}
+
+export function useFakeDevice(_params: DeviceGetRequest) {
+  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,20 +1,21 @@
-import { useQuery, type UseQueryResult } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import type {
+  CommonDeviceProperties,
+  Device,
   DevicesListRequest,
   DevicesListResponse,
   SeamError,
 } from 'seamapi'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDevicesParams = DevicesListRequest
-export type UseDevicesData = DevicesListResponse['devices']
+export type UseDevicesData = Array<Device<CommonDeviceProperties>>
 
-type Result = UseQueryResult<UseDevicesData, SeamError>
-
-type UseDevicesResult = Omit<Result, 'data'> & { devices: Result['data'] }
-
-export function useDevices(params: DevicesListRequest): UseDevicesResult {
+export function useDevices(
+  params?: UseDevicesParams
+): UseSeamQueryResult<'devices', UseDevicesData> {
   const { client } = useSeamClient()
   const { data, ...rest } = useQuery<DevicesListResponse['devices'], SeamError>(
     {
@@ -22,7 +23,11 @@ export function useDevices(params: DevicesListRequest): UseDevicesResult {
       queryKey: ['devices', 'list', params],
       queryFn: async () => {
         if (client == null) return []
-        return await client?.devices.list(params)
+        const devices = await client?.devices.list(params)
+        return devices.sort(
+          (a, b) =>
+            new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+        )
       },
     }
   )

package/src/lib/seam/index.ts

@@ -1,2 +1,5 @@
-export * from './devices/index.js'
+export * from './access-codes/use-access-code.js'
+export * from './access-codes/use-access-codes.js'
+export * from './devices/use-device.js'
+export * from './devices/use-devices.js'
 export * from './use-seam-client.js'

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

@@ -84,11 +84,11 @@ This is not recommended because the client session is now bound to this machine
     return userIdentifierKey
   }
 
-  const fingerprintValue =
+  const fingerprint =
     globalThis?.localStorage?.getItem('seam_user_fingerprint') ??
     `fingerprint_${uuidv4()}`
 
-  globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprintValue)
+  globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprint)
 
-  return fingerprintValue
+  return fingerprint
 }

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

@@ -0,0 +1,154 @@
+import { DateTime } from 'luxon'
+import { useState } from 'react'
+import type { AccessCode, CommonDeviceProperties, Device } from 'seamapi'
+
+import { AccessCodeDevice } from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
+import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+
+export interface AccessCodeDetailsProps {
+  accessCode: AccessCode
+  onBack?: () => void
+}
+
+export function AccessCodeDetails({
+  accessCode,
+  onBack,
+}: AccessCodeDetailsProps) {
+  const name = accessCode.name ?? t.fallbackName
+  const [selectedDevice, selectDevice] =
+    useState<Device<CommonDeviceProperties> | null>(null)
+
+  if (selectedDevice) {
+    return (
+      <DeviceDetails
+        device={selectedDevice}
+        onBack={() => {
+          selectDevice(null)
+        }}
+      />
+    )
+  }
+
+  return (
+    <div className='seam-access-code-details'>
+      <ContentHeader title='Access code' onBack={onBack} />
+      <div className='seam-summary'>
+        <div className='seam-top'>
+          <span className='seam-label'>{t.accessCode}</span>
+          <h5 className='seam-access-code-name'>{name}</h5>
+          <div className='seam-code'>{accessCode.code}</div>
+          <div className='seam-duration'>
+            <Duration accessCode={accessCode} />
+          </div>
+        </div>
+        <AccessCodeDevice
+          deviceId={accessCode.device_id}
+          onSelectDevice={selectDevice}
+        />
+      </div>
+      <div className='seam-details'>
+        <div className='seam-row'>
+          <div className='seam-heading'>{t.id}:</div>
+          <div className='seam-content'>{accessCode.access_code_id}</div>
+        </div>
+        <div className='seam-row'>
+          <div className='seam-heading'>{t.created}:</div>
+          <div className='seam-content'>
+            {formatDate(accessCode.created_at)}
+          </div>
+        </div>
+
+        <div className='seam-row seam-schedule'>
+          <div className='seam-heading'>{t.timing}:</div>
+          <div className='seam-content'>
+            <ScheduleInfo accessCode={accessCode} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ScheduleInfo({ accessCode }: { accessCode: AccessCode }) {
+  if (accessCode.type === 'ongoing') {
+    return <span>{t.ongoing}</span>
+  }
+  return (
+    <div className='seam-times'>
+      <div>
+        <div className='seam-label'>{t.start}</div>
+        <div className='seam-date'>{formatDate(accessCode.starts_at)}</div>
+        <div className='seam-time'>{formatTime(accessCode.starts_at)}</div>
+      </div>
+      <div>
+        <div className='seam-label'>{t.end}</div>
+        <div className='seam-date'>{formatDate(accessCode.ends_at)}</div>
+        <div className='seam-time'>{formatTime(accessCode.ends_at)}</div>
+      </div>
+    </div>
+  )
+}
+
+function Duration(props: { accessCode: AccessCode }): JSX.Element {
+  const { accessCode } = props
+  if (accessCode.type === 'ongoing') {
+    return (
+      <span>
+        <span className='seam-label'>Active</span> (ongoing)
+      </span>
+    )
+  }
+
+  const hasStarted = new Date(accessCode.starts_at).valueOf() < Date.now()
+  if (hasStarted) {
+    return (
+      <span>
+        <span className='seam-label'>Active</span> until{' '}
+        {formatDurationDate(accessCode.ends_at)} at{' '}
+        {formatTime(accessCode.ends_at)}
+      </span>
+    )
+  }
+
+  return (
+    <span>
+      Starts {formatDurationDate(accessCode.starts_at)} as{' '}
+      {formatTime(accessCode.starts_at)}
+    </span>
+  )
+}
+
+function formatDurationDate(date: string): string {
+  return DateTime.fromISO(date).toLocaleString({
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+function formatTime(date: string): string {
+  return DateTime.fromISO(date).toLocaleString({
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function formatDate(date: string): string {
+  return DateTime.fromISO(date).toLocaleString({
+    weekday: 'short',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+const t = {
+  accessCode: 'Access code',
+  fallbackName: 'Code',
+  id: 'ID',
+  created: 'Created',
+  timing: 'Timing',
+  ongoing: 'Ongoing',
+  start: 'Start',
+  end: 'End',
+}

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

@@ -0,0 +1,49 @@
+import type { CommonDeviceProperties, Device } from 'seamapi'
+
+import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useFakeDevice } from 'lib/seam/devices/use-device.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,
+}: {
+  deviceId: string
+  onSelectDevice: (device: Device<CommonDeviceProperties>) => void
+}) {
+  //  TODO: Replace with `useDevice()` once ready
+  const { isLoading, device } = useFakeDevice({ device_id: deviceId })
+
+  // TODO: Do we want to return a skeleton loader here instead?
+  if (isLoading || !device || !isLockDevice(device)) {
+    return null
+  }
+
+  const model = getDeviceModel(device)
+
+  return (
+    <div className='seam-access-code-device'>
+      <div className='seam-device-image'>
+        <DeviceImage device={device} />
+      </div>
+      <div className='seam-body'>
+        <div className='seam-model'>{model}</div>
+        <TextButton
+          onClick={() => {
+            onSelectDevice(device)
+          }}
+        >
+          {t.deviceDetails}
+        </TextButton>
+      </div>
+      <Button>Unlock</Button>
+    </div>
+  )
+}
+
+const t = {
+  deviceDetails: 'Device details',
+}

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -1,32 +1,48 @@
-import {
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableRow,
-  TableTitle,
-} from 'lib/ui/Table/index.js'
+import { useState } from 'react'
+import type { AccessCode } from 'seamapi'
 
-import { useAccessCodes } from 'lib/hooks/use-access-codes.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TableBody } from 'lib/ui/Table/TableBody.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableHeader } from 'lib/ui/Table/TableHeader.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
 export function AccessCodeTable(props: {
   deviceId: string
-  onClickBack?: () => void
+  onBack?: () => void
 }): JSX.Element {
   const { accessCodes } = useAccessCodes({
     device_id: props.deviceId,
   })
-  const { onClickBack } = props
+  const { onBack } = props
+
+  const [selectedAccessCode, selectAccessCode] = useState<AccessCode | null>(
+    null
+  )
+
+  if (selectedAccessCode) {
+    return (
+      <AccessCodeDetails
+        accessCode={selectedAccessCode}
+        onBack={() => {
+          selectAccessCode(null)
+        }}
+      />
+    )
+  }
 
   if (!accessCodes) return <>{null}</>
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader onClickBack={onClickBack} />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>
@@ -34,7 +50,12 @@ export function AccessCodeTable(props: {
       </TableHeader>
       <TableBody>
         {accessCodes.map((code) => (
-          <TableRow key={code.access_code_id}>
+          <TableRow
+            key={code.access_code_id}
+            onClick={() => {
+              selectAccessCode(code)
+            }}
+          >
             <TableCell className='seam-icon-cell'>
               <div>
                 <AccessCodeKeyIcon />

package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx

@@ -1,32 +1,29 @@
 import type { AccessCode } from 'seamapi'
 
-import {
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableRow,
-  TableTitle,
-} from 'lib/ui/Table/index.js'
-
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TableBody } from 'lib/ui/Table/TableBody.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableHeader } from 'lib/ui/Table/TableHeader.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
 export interface AccessCodeTableContentProps {
   accessCodes: AccessCode[]
-  onClickBack?: () => void
+  onBack?: () => void
 }
 
 export function AccessCodeTableContent(
   props: AccessCodeTableContentProps
 ): JSX.Element {
-  const { accessCodes, onClickBack } = props
+  const { accessCodes, onBack } = props
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader onClickBack={onClickBack} />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>

package/src/lib/ui/AccessCodeTable/CodeDetails.tsx

@@ -7,7 +7,7 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
   const { accessCode } = props
 
   return (
-    <div className='seam-access-code-details'>
+    <div className='seam-code-details'>
       Unit 110
       <DotDivider />
       <Duration accessCode={accessCode} />

package/src/lib/ui/Button.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames'
+
+interface ButtonProps {
+  children?: string
+  variant?: 'solid' | 'outline' | 'neutral'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+}
+
+export function Button({
+  variant = 'outline',
+  children,
+  size = 'medium',
+  disabled,
+}: ButtonProps) {
+  return (
+    <button
+      className={classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {
+        'seam-btn-disabled': disabled,
+      })}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
+}

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

@@ -1,40 +1,55 @@
-import { type LockDevice } from 'seamapi'
+import { type CommonDeviceProperties, type Device } from 'seamapi'
 
 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 { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
-import { BatteryStatus } from 'lib/ui/DeviceDetails/BatteryStatus.js'
-import { DeviceImage } from 'lib/ui/DeviceDetails/DeviceImage.js'
-import { ModelStatus } from 'lib/ui/DeviceDetails/ModelStatus.js'
-import { OnlineStatus } from 'lib/ui/DeviceDetails/OnlineStatus.js'
+import { Button } from 'lib/ui/Button.js'
+import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { DeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import useToggle from 'lib/use-toggle.js'
 
 export interface DeviceDetailsProps {
-  device: LockDevice
+  device: Device<CommonDeviceProperties>
+  onBack?: () => void
 }
 
-export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
-  const { device } = props
+export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
+  const { device, onBack } = props
 
-  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+  const [showingAccessCodes, toggleAccessCodes] = useToggle()
 
-  const accessCodeLength =
-    device.properties?.schlage_metadata?.access_code_length
+  const { isLoading, accessCodes } = useAccessCodes({
+    device_id: device.device_id,
+  })
 
-  const [showingAccessCodes, toggleAccessCodes] = useToggle()
+  if (isLoading) {
+    return null
+  }
 
   if (showingAccessCodes) {
     return (
-      <AccessCodeTable
-        deviceId={device.device_id}
-        onClickBack={toggleAccessCodes}
-      />
+      <AccessCodeTable deviceId={device.device_id} onBack={toggleAccessCodes} />
     )
   }
 
+  if (!isLockDevice(device)) {
+    return null
+  }
+
+  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+
+  const accessCodeCount = accessCodes?.length
+
+  const accessCodeLength =
+    device.properties?.schlage_metadata?.access_code_length
+
   return (
     <div className='seam-device-details'>
-      <ContentHeader title='Device' />
+      <ContentHeader title='Device' onBack={onBack} />
       <div className='seam-body'>
         <div className='seam-summary'>
           <div className='seam-content'>
@@ -45,9 +60,11 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
               <span className='seam-label'>{t.device}</span>
               <h4 className='seam-device-name'>{device.properties.name}</h4>
               <div className='seam-properties'>
+                <span className='seam-label'>{t.status}:</span>{' '}
                 <OnlineStatus device={device} />
+                <span className='seam-label'>{t.power}:</span>{' '}
                 <BatteryStatus device={device} />
-                <ModelStatus device={device} />
+                <DeviceModel device={device} />
               </div>
             </div>
           </div>
@@ -57,15 +74,22 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
             className='seam-content seam-access-codes'
             onClick={toggleAccessCodes}
           >
-            <span className='seam-value'>49 {t.accessCodes}</span>
+            <span className='seam-value'>
+              {accessCodeCount} {t.accessCodes}
+            </span>
             <ChevronRightIcon />
           </div>
         </div>
 
         <div className='seam-box'>
-          <div className='seam-content'>
-            <span className='seam-label'>{t.lockStatus}</span>
-            <span className='seam-value'>{lockStatus}</span>
+          <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'>{t.unlock}</Button>
+            </div>
           </div>
           <AccessCodeLength accessCodeLength={accessCodeLength} />
         </div>
@@ -94,10 +118,13 @@ function AccessCodeLength(props: {
 
 const t = {
   device: 'Device',
+  unlock: 'Unlock',
   locked: 'Locked',
   unlocked: 'Unlocked',
   accessCodes: 'access codes',
   codeLength: 'Code length',
   digits: 'digits',
   lockStatus: 'Lock status',
+  status: 'Status',
+  power: 'Power',
 }

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

@@ -0,0 +1,34 @@
+import type { LockDevice } from 'seamapi'
+
+interface DeviceModelProps {
+  device: LockDevice
+}
+
+export function DeviceModel({ device }: DeviceModelProps): JSX.Element | null {
+  const model = getDeviceModel(device)
+  if (!model) {
+    return null
+  }
+
+  return (
+    <>
+      <span className='seam-label'>{t.model}:</span>{' '}
+      <div className='seam-device-model'>{model}</div>
+    </>
+  )
+}
+
+export const getDeviceModel = ({
+  properties,
+}: LockDevice): string | undefined => {
+  return (
+    properties?.august_metadata?.model ??
+    properties?.schlage_metadata?.model ??
+    t.fallbackModel
+  )
+}
+
+const t = {
+  model: 'Model',
+  fallbackModel: 'Unknown Lock',
+}