@seamapi/react 1.62.0 → 1.63.1

package/src/lib/seam/access-codes/use-update-access-code.ts

@@ -4,6 +4,8 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 import type {
+  AccessCode,
+  AccessCodesListResponse,
   AccessCodeUpdateRequest,
   AccessCodeUpdateResponse,
   ActionAttempt,
@@ -35,12 +37,45 @@ export function useUpdateAccessCode(): UseMutationResult<
       return await client.accessCodes.update(mutationParams)
     },
     onSuccess: (_data, variables) => {
-      void queryClient.invalidateQueries([
-        'access_codes',
-        'get',
-        { access_code_id: variables.access_code_id },
-      ])
-      void queryClient.invalidateQueries(['access_codes', 'list'])
+      // There is no guarantee that the actual code has updated even if the
+      // request was succesful. To prevent stale data in the UI, the
+      // code below optimistically updates the data in cache.
+
+      queryClient.setQueryData<AccessCode | null>(
+        ['access_codes', 'get', { access_code_id: variables.access_code_id }],
+        (accessCode) => {
+          if (accessCode == null) {
+            return
+          }
+
+          return {
+            ...accessCode,
+            code: variables.code ?? accessCode.code,
+            name: variables.name ?? accessCode.name,
+          }
+        }
+      )
+
+      queryClient.setQueryData<AccessCodesListResponse['access_codes']>(
+        ['access_codes', 'list', { device_id: variables.device_id }],
+        (accessCodes) => {
+          if (accessCodes == null) {
+            return
+          }
+
+          return accessCodes.map((accessCode) => {
+            if (accessCode.access_code_id === variables.access_code_id) {
+              return {
+                ...accessCode,
+                code: variables.code ?? accessCode.code,
+                name: variables.name ?? accessCode.name,
+              }
+            }
+
+            return accessCode
+          })
+        }
+      )
     },
   })
 }

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx

@@ -41,6 +41,7 @@ export function AccessCodeDetails({
   disableEditAccessCode = false,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
   onBack,
   className,
 }: AccessCodeDetailsProps): JSX.Element | null {
@@ -64,6 +65,7 @@ export function AccessCodeDetails({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           selectDevice(null)
         }}
@@ -137,19 +139,21 @@ export function AccessCodeDetails({
         </div>
       )}
       <div className='seam-details'>
-        <div className='seam-row'>
-          <div className='seam-heading'>{t.id}:</div>
-          <div className='seam-content seam-code-id'>
-            <span>{accessCode.access_code_id}</span>
-            <IconButton
-              onClick={() => {
-                void copyToClipboard(accessCode.access_code_id)
-              }}
-            >
-              <CopyIcon />
-            </IconButton>
+        {!disableResourceIds && (
+          <div className='seam-row'>
+            <div className='seam-heading'>{t.id}:</div>
+            <div className='seam-content seam-code-id'>
+              <span>{accessCode.access_code_id}</span>
+              <IconButton
+                onClick={() => {
+                  void copyToClipboard(accessCode.access_code_id)
+                }}
+              >
+                <CopyIcon />
+              </IconButton>
+            </div>
           </div>
-        </div>
+        )}
         <div className='seam-row'>
           <div className='seam-heading'>{t.created}:</div>
           <div className='seam-content'>

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -86,6 +86,7 @@ export function AccessCodeTable({
   disableEditAccessCode = false,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
 }: AccessCodeTableProps): JSX.Element {
   useComponentTelemetry('AccessCodeTable')
 
@@ -146,6 +147,7 @@ export function AccessCodeTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setSelectedEditAccessCodeId(null)
         }}
@@ -178,6 +180,7 @@ export function AccessCodeTable({
           disableCreateAccessCode={disableCreateAccessCode}
           disableEditAccessCode={disableEditAccessCode}
           disableDeleteAccessCode={disableDeleteAccessCode}
+          disableResourceIds={disableResourceIds}
           onBack={() => {
             setSelectedViewAccessCodeId(null)
           }}
@@ -195,6 +198,7 @@ export function AccessCodeTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={toggleAddAccessCodeForm}
         className={className}
         onSuccess={() => {

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.tsx

@@ -35,6 +35,7 @@ export function ClimateSettingScheduleDetails({
   className,
   disableCreateAccessCode,
   disableEditAccessCode,
+  disableResourceIds = false,
 }: ClimateSettingScheduleDetailsProps): JSX.Element | null {
   useComponentTelemetry('ClimateSettingScheduleDetails')
 
@@ -59,6 +60,7 @@ export function ClimateSettingScheduleDetails({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           selectDevice(null)
         }}

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.tsx

@@ -68,6 +68,7 @@ export function ClimateSettingScheduleTable({
   className,
   disableCreateAccessCode,
   disableEditAccessCode,
+  disableResourceIds = false,
 }: ClimateSettingScheduleTableProps): JSX.Element {
   useComponentTelemetry('ClimateSettingScheduleTable')
 
@@ -118,6 +119,7 @@ export function ClimateSettingScheduleTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setSelectedViewClimateSettingScheduleId(null)
         }}

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

@@ -20,6 +20,7 @@ export function DeviceDetails({
   deviceId,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
   onBack,
   className,
 }: DeviceDetailsProps): JSX.Element | null {
@@ -36,6 +37,7 @@ export function DeviceDetails({
   const props = {
     disableLockUnlock,
     disableDeleteAccessCode,
+    disableResourceIds,
     onBack,
     className,
   }

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

@@ -28,6 +28,7 @@ export function LockDeviceDetails(
     disableCreateAccessCode,
     disableEditAccessCode,
     disableDeleteAccessCode,
+    disableResourceIds,
     onBack,
     className,
   } = props
@@ -55,6 +56,7 @@ export function LockDeviceDetails(
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={toggleAccessCodesOpen}
         className={className}
       />

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

@@ -19,17 +19,16 @@ interface ThermostatDeviceDetailsProps extends CommonProps {
   device: ThermostatDevice
 }
 
-export function ThermostatDeviceDetails(
-  props: ThermostatDeviceDetailsProps
-): JSX.Element | null {
-  const {
-    device,
-    onBack,
-    className,
-    disableCreateAccessCode,
-    disableEditAccessCode,
-  } = props
-
+export function ThermostatDeviceDetails({
+  device,
+  onBack,
+  className,
+  disableLockUnlock,
+  disableCreateAccessCode,
+  disableEditAccessCode,
+  disableDeleteAccessCode,
+  disableResourceIds = false,
+}: ThermostatDeviceDetailsProps): JSX.Element | null {
   const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)
 
   const { connectedAccount } = useConnectedAccount(device.connected_account_id)
@@ -42,10 +41,11 @@ export function ThermostatDeviceDetails(
     return (
       <NestedClimateSettingScheduleTable
         deviceId={device.device_id}
-        disableLockUnlock={props.disableLockUnlock}
+        disableLockUnlock={disableLockUnlock}
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
-        disableDeleteAccessCode={props.disableDeleteAccessCode}
+        disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setClimateSettingsOpen(false)
         }}
@@ -142,7 +142,9 @@ export function ThermostatDeviceDetails(
                   device.connected_account_id
                 }
               />
-              <DetailRow label={t.deviceId} sublabel={device.device_id} />
+              {!disableResourceIds && (
+                <DetailRow label={t.deviceId} sublabel={device.device_id} />
+              )}
             </DetailSection>
           </DetailSectionGroup>
         </div>

package/src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -71,6 +71,7 @@ export function DeviceTable({
   disableCreateAccessCode = false,
   disableEditAccessCode = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
   onBack,
   className,
 }: DeviceTableProps = {}): JSX.Element {
@@ -110,6 +111,7 @@ export function DeviceTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setSelectedDeviceId(null)
         }}

package/src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.tsx

@@ -141,6 +141,7 @@ function useSubmitEditAccessCode(
       {
         access_code_id: accessCode.access_code_id,
         name,
+        code,
         type: 'ongoing',
         device_id: device.device_id,
       },

package/src/lib/seam/components/common-props.tsx

@@ -7,6 +7,7 @@ export interface RequiredCommonProps {
   disableCreateAccessCode: boolean | undefined
   disableEditAccessCode: boolean | undefined
   disableLockUnlock: boolean | undefined
+  disableResourceIds: boolean | undefined
 }
 
 export type CommonProps = Partial<RequiredCommonProps>

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.62.0'
+const seamapiReactVersion = '1.63.1'
 
 export default seamapiReactVersion