feat: update pending state logic

sanity-io · Sep 29, 2024 · 66ead7d · 66ead7d
1 parent 56c7578
commit 66ead7d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/packages/sanity/src/structure/components/requestPermissionDialog/useRoleRequestsStatus.tsx b/packages/sanity/src/structure/components/requestPermissionDialog/useRoleRequestsStatus.tsx
@@ -10,9 +10,12 @@ export const useRoleRequestsStatus = () => {
   const client = useClient()
   const projectId = useProjectId()
   const [status, setStatus] = useState<string>()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
 
   useEffect(() => {
     const checkRoleRequests$ = () => {
+      setLoading(true)
       if (!client || !projectId) {
         return of()
       }
@@ -54,22 +57,28 @@ export const useRoleRequestsStatus = () => {
           }
           return 'none' // No relevant requests found
         }),
-        catchError((error) => {
-          console.error(error)
-          return of('error') // Return 'error' status on request failure
+        catchError((err) => {
+          console.error(err)
+          return of()
         }),
       )
     }
 
     const subscription = checkRoleRequests$().subscribe({
-      next: (value) => setStatus(value),
-      error: (err) => console.error(err),
+      next: (value) => {
+        setLoading(false)
+        setStatus(value)
+      },
+      error: (err) => {
+        console.error(err)
+        setError(err)
+      },
     })
 
     return () => {
       subscription.unsubscribe() // Cleanup on component unmount
     }
   }, [client, projectId])
 
-  return status
+  return {data: status, loading, error}
 }
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/banners/PermissionCheckBanner.tsx b/packages/sanity/src/structure/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
@@ -18,7 +18,11 @@ interface PermissionCheckBannerProps {
 export function PermissionCheckBanner({granted, requiredPermission}: PermissionCheckBannerProps) {
   const currentUser = useCurrentUser()
 
-  const roleRequestStatus = useRoleRequestsStatus()
+  const {
+    data: roleRequestStatus,
+    loading: requestStatusLoading,
+    error: requestStatusError,
+  } = useRoleRequestsStatus()
   const currentUserRoles = currentUser?.roles || []
   const isOnlyViewer = currentUserRoles.length === 1 && currentUserRoles[0].name === 'viewer'
   const [showRequestPermissionDialog, setShowRequestPermissionDialog] = useState(false)
@@ -51,18 +55,18 @@ export function PermissionCheckBanner({granted, requiredPermission}: PermissionC
         }
         center
         action={
-          isOnlyViewer && roleRequestStatus
+          isOnlyViewer && roleRequestStatus && !requestStatusError && !requestStatusLoading
             ? {
                 onClick:
-                  roleRequestStatus === 'none'
-                    ? () => setShowRequestPermissionDialog(true)
-                    : undefined,
+                  roleRequestStatus === 'pending'
+                    ? undefined
+                    : () => setShowRequestPermissionDialog(true),
                 text:
-                  roleRequestStatus === 'none'
-                    ? t('banners.permission-check-banner.request-permission-button.text')
-                    : t('banners.permission-check-banner.request-permission-button.sent'),
-                tone: roleRequestStatus === 'none' ? 'primary' : 'default',
-                disabled: roleRequestStatus !== 'none',
+                  roleRequestStatus === 'pending'
+                    ? t('banners.permission-check-banner.request-permission-button.sent')
+                    : t('banners.permission-check-banner.request-permission-button.text'),
+                tone: roleRequestStatus === 'pending' ? 'default' : 'primary',
+                disabled: roleRequestStatus === 'pending',
                 // mode: 'bleed',
               }
             : undefined