feat: Display warning when access-code is being removed

seamapi · Jul 24, 2024 · cb29667 · cb29667
1 parent 3970632
commit cb29667
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 25 deletions.
diff --git a/src/lib/seam/access-codes/use-access-code.ts b/src/lib/seam/access-codes/use-access-code.ts
@@ -13,11 +13,12 @@ export type UseAccessCodeParams = AccessCodesGetParams
 export type UseAccessCodeData = AccessCode | null
 
 export function useAccessCode(
-  params: UseAccessCodeParams
+  params: UseAccessCodeParams,
+  isEnabled: boolean = true
 ): UseSeamQueryResult<'accessCode', UseAccessCodeData> {
   const { client } = useSeamClient()
   const { data, ...rest } = useQuery<UseAccessCodeData, SeamHttpApiError>({
-    enabled: client != null,
+    enabled: client != null && isEnabled,
     queryKey: ['access_codes', 'get', params],
     queryFn: async () => {
       if (client == null) return null

diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx b/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx
@@ -27,6 +27,8 @@ import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 export interface AccessCodeDetailsProps extends CommonProps {
   accessCodeId: string
   onEdit: () => void
+  onDelete: () => void
+  isBeingRemoved?: boolean
 }
 
 export const NestedAccessCodeDetails =
@@ -35,6 +37,7 @@ export const NestedAccessCodeDetails =
 export function AccessCodeDetails({
   accessCodeId,
   onEdit,
+  onDelete,
   errorFilter = () => true,
   warningFilter = () => true,
   disableCreateAccessCode = false,
@@ -44,12 +47,16 @@ export function AccessCodeDetails({
   disableResourceIds = false,
   disableConnectedAccountInformation = false,
   disableClimateSettingSchedules,
+  isBeingRemoved,
   onBack,
   className,
 }: AccessCodeDetailsProps): JSX.Element | null {
   useComponentTelemetry('AccessCodeDetails')
 
-  const { accessCode } = useAccessCode({ access_code_id: accessCodeId })
+  const { accessCode } = useAccessCode(
+    { access_code_id: accessCodeId },
+    isBeingRemoved !== true
+  )
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
   const { mutate: deleteCode, isPending: isDeleting } = useDeleteAccessCode()
 
@@ -96,6 +103,15 @@ export function AccessCodeDetails({
         variant: 'warning' as const,
         message: warning.message,
       })),
+
+    ...(isBeingRemoved === true
+      ? [
+          {
+            variant: 'warning' as const,
+            message: t.warningRemoving,
+          },
+        ]
+      : []),
   ]
 
   return (
@@ -134,17 +150,24 @@ export function AccessCodeDetails({
       {(!disableEditAccessCode || !disableDeleteAccessCode) && (
         <div className='seam-actions'>
           {!disableEditAccessCode && (
-            <Button size='small' onClick={onEdit} disabled={isDeleting}>
+            <Button
+              size='small'
+              onClick={onEdit}
+              disabled={isBeingRemoved === true || isDeleting}
+            >
               {t.editCode}
             </Button>
           )}
           {!disableDeleteAccessCode && (
             <Button
               size='small'
               onClick={() => {
-                deleteCode({ access_code_id: accessCode.access_code_id })
+                deleteCode(
+                  { access_code_id: accessCode.access_code_id },
+                  { onSuccess: onDelete }
+                )
               }}
-              disabled={isDeleting}
+              disabled={isBeingRemoved === true || isDeleting}
             >
               {t.deleteCode}
             </Button>
@@ -282,4 +305,5 @@ const t = {
   at: 'at',
   editCode: 'Edit code',
   deleteCode: 'Delete code',
+  warningRemoving: 'This access code is currently being removed.',
 }
diff --git a/src/lib/seam/components/AccessCodeTable/AccessCodeMenu.tsx b/src/lib/seam/components/AccessCodeTable/AccessCodeMenu.tsx
@@ -11,6 +11,7 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 export interface AccessCodeMenuProps {
   accessCode: AccessCode
   onEdit: () => void
+  onDelete: () => void
   onViewDetails: () => void
   disableEditAccessCode: boolean
   disableDeleteAccessCode: boolean
@@ -49,6 +50,7 @@ function Content({
   disableEditAccessCode,
   disableDeleteAccessCode,
   onEdit,
+  onDelete,
   deleteConfirmationVisible,
   toggleDeleteConfirmation,
 }: AccessCodeMenuProps): JSX.Element {
@@ -66,9 +68,14 @@ function Content({
             variant='solid'
             disabled={deleteAccessCode.isPending}
             onClick={() => {
-              deleteAccessCode.mutate({
-                access_code_id: accessCode.access_code_id,
-              })
+              deleteAccessCode.mutate(
+                {
+                  access_code_id: accessCode.access_code_id,
+                },
+                {
+                  onSuccess: onDelete,
+                }
+              )
             }}
           >
             {t.confirmDelete}

diff --git a/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx b/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx
@@ -13,6 +13,7 @@ export interface AccessCodeRowProps {
   accessCode: AccessCode
   onClick: () => void
   onEdit: () => void
+  onDelete: () => void
   disableEditAccessCode: boolean
   disableDeleteAccessCode: boolean
 }
@@ -21,25 +22,39 @@ export function AccessCodeRow({
   onClick,
   accessCode,
   onEdit,
+  onDelete,
   disableEditAccessCode,
   disableDeleteAccessCode,
 }: AccessCodeRowProps): JSX.Element {
+  const isBeingRemoved = accessCode.status === 'removing'
+
   const errorCount = accessCode.errors.length
-  const warningCount = accessCode.warnings.length
-  const isPlural = errorCount === 0 || errorCount > 1
-  const errorIconTitle = isPlural
-    ? `${errorCount} ${t.codeIssues}`
-    : `${errorCount} ${t.codeIssue}`
-  const warningIconTitle = isPlural
-    ? `${warningCount} ${t.codeIssues}`
-    : `${warningCount} ${t.codeIssue}`
+  const warningCount = accessCode.warnings.length + (isBeingRemoved ? 1 : 0)
+  const errorIconTitle =
+    errorCount === 0 || errorCount > 1
+      ? `${errorCount} ${t.codeIssues}`
+      : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle =
+    warningCount === 0 || warningCount > 1
+      ? `${warningCount} ${t.codeIssues}`
+      : `${warningCount} ${t.codeIssue}`
 
   return (
     <TableRow onClick={onClick}>
-      <TableCell className='seam-icon-cell'>
+      <TableCell
+        className='seam-icon-cell'
+        style={{
+          opacity: isBeingRemoved ? 0.4 : 1,
+        }}
+      >
         <AccessCodeMainIcon accessCode={accessCode} />
       </TableCell>
-      <TableCell className='seam-name-cell'>
+      <TableCell
+        className='seam-name-cell'
+        style={{
+          opacity: isBeingRemoved ? 0.4 : 1,
+        }}
+      >
         <Title className='seam-truncated-text'>{accessCode.name}</Title>
         <CodeDetails accessCode={accessCode} />
       </TableCell>
@@ -63,9 +78,10 @@ export function AccessCodeRow({
         <AccessCodeMenu
           accessCode={accessCode}
           onEdit={onEdit}
+          onDelete={onDelete}
           onViewDetails={onClick}
-          disableDeleteAccessCode={disableDeleteAccessCode}
-          disableEditAccessCode={disableEditAccessCode}
+          disableDeleteAccessCode={isBeingRemoved || disableDeleteAccessCode}
+          disableEditAccessCode={isBeingRemoved || disableEditAccessCode}
         />
       </TableCell>
     </TableRow>

diff --git a/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx b/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx
@@ -87,6 +87,7 @@ export function AccessCodeTable({
   const { accessCodes, isInitialLoading, isError, refetch } = useAccessCodes({
     device_id: deviceId,
   })
+  const [deletedAccessCodeIds, setDeletedAccessCodeIds] = useState<string[]>([])
 
   const [selectedViewAccessCodeId, setSelectedViewAccessCodeId] = useState<
     string | null
@@ -102,8 +103,19 @@ export function AccessCodeTable({
     () =>
       accessCodes
         ?.filter((accessCode) => accessCodeFilter(accessCode, searchInputValue))
+        ?.map((accessCode) =>
+          deletedAccessCodeIds.includes(accessCode.access_code_id)
+            ? { ...accessCode, status: 'removing' }
+            : accessCode
+        )
         ?.sort(accessCodeComparator) ?? [],
-    [accessCodes, searchInputValue, accessCodeFilter, accessCodeComparator]
+    [
+      accessCodes,
+      searchInputValue,
+      accessCodeFilter,
+      accessCodeComparator,
+      deletedAccessCodeIds,
+    ]
   )
 
   const handleAccessCodeClick = useCallback(
@@ -126,12 +138,16 @@ export function AccessCodeTable({
     [setSelectedEditAccessCodeId]
   )
 
+  const handleAccessCodeDelete = useCallback((accessCodeId: string): void => {
+    setDeletedAccessCodeIds((prev) => [...prev, accessCodeId])
+  }, [])
+
   const [accessCodeResult, setAccessCodeResult] = useState<
     'created' | 'updated' | null
   >(null)
 
   const accessCodeResultMessage =
-    accessCodeResult === 'created' ? t.accesCodeCreated : t.accesCodeUpdated
+    accessCodeResult === 'created' ? t.accessCodeCreated : t.accessCodeUpdated
 
   if (selectedEditAccessCodeId != null) {
     return (
@@ -174,6 +190,9 @@ export function AccessCodeTable({
           onEdit={() => {
             setSelectedEditAccessCodeId(selectedViewAccessCodeId)
           }}
+          onDelete={() => {
+            handleAccessCodeDelete(selectedViewAccessCodeId)
+          }}
           errorFilter={errorFilter}
           warningFilter={warningFilter}
           disableLockUnlock={disableLockUnlock}
@@ -185,6 +204,11 @@ export function AccessCodeTable({
             disableConnectedAccountInformation
           }
           disableClimateSettingSchedules={disableClimateSettingSchedules}
+          isBeingRemoved={filteredAccessCodes.some(
+            (accessCode) =>
+              accessCode.access_code_id === selectedViewAccessCodeId &&
+              accessCode.status === 'removing'
+          )}
           onBack={() => {
             setSelectedViewAccessCodeId(null)
           }}
@@ -267,6 +291,7 @@ export function AccessCodeTable({
             accessCodes={filteredAccessCodes}
             onAccessCodeClick={handleAccessCodeClick}
             onAccessCodeEdit={handleAccessCodeEdit}
+            onAccessCodeDelete={handleAccessCodeDelete}
             errorFilter={errorFilter}
             warningFilter={warningFilter}
             disableEditAccessCode={disableEditAccessCode}
@@ -295,6 +320,7 @@ function Content(props: {
   accessCodes: AccessCode[]
   onAccessCodeClick: (accessCodeId: string) => void
   onAccessCodeEdit: (accessCodeId: string) => void
+  onAccessCodeDelete: (accessCodeId: string) => void
   errorFilter: (error: AccessCode['errors'][number]) => boolean
   warningFilter: (warning: AccessCode['warnings'][number]) => boolean
   disableEditAccessCode: boolean
@@ -304,6 +330,7 @@ function Content(props: {
     accessCodes,
     onAccessCodeClick,
     onAccessCodeEdit,
+    onAccessCodeDelete,
     errorFilter,
     warningFilter,
     disableEditAccessCode,
@@ -350,6 +377,9 @@ function Content(props: {
           onEdit={() => {
             onAccessCodeEdit(accessCode.access_code_id)
           }}
+          onDelete={() => {
+            onAccessCodeDelete(accessCode.access_code_id)
+          }}
         />
       ))}
     </>
@@ -360,8 +390,8 @@ const t = {
   accessCodes: 'Access Codes',
   noAccessCodesMessage: 'Sorry, no access codes were found',
   loading: 'Loading access codes',
-  accesCodeUpdated: 'Access code updated',
-  accesCodeCreated: 'Access code created',
+  accessCodeUpdated: 'Access code updated',
+  accessCodeCreated: 'Access code created',
   tryAgain: 'Try again',
   fallbackErrorMessage: 'Access codes could not be loaded',
 }