feat: update to useObservable

packages/sanity/src/structure/components/requestPermissionDialog/useRoleRequestsStatus.tsx

@@ -1,84 +1,72 @@
 import {addWeeks, isAfter, isBefore} from 'date-fns'
-import {useEffect, useState} from 'react'
+import {useMemo} from 'react'
+import {useObservable} from 'react-rx'
 import {from, of} from 'rxjs'
-import {catchError, map} from 'rxjs/operators'
+import {catchError, map, startWith} from 'rxjs/operators'
 import {useClient, useProjectId} from 'sanity'
 
 import {type AccessRequest} from '../../../core/studio/screens'
 
 export const useRoleRequestsStatus = () => {
   const client = useClient({apiVersion: '2024-07-01'})
   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()
-      }
-
-      return from(
-        client.request<AccessRequest[] | null>({
-          url: `/access/requests/me`,
-        }),
-      ).pipe(
-        map((requests) => {
-          if (requests && requests.length) {
-            // Filter requests for the specific project and where type is 'role'
-            const projectRequests = requests.filter(
-              (request) => request.resourceId === projectId && request.type === 'role',
-            )
+  const checkRoleRequests = useMemo(() => {
+    if (!client || !projectId) {
+      return of({loading: false, error: false, status: 'none'})
+    }
 
-            const declinedRequest = projectRequests.find((request) => request.status === 'declined')
-            if (declinedRequest) {
-              return 'denied'
-            }
+    return from(
+      client.request<AccessRequest[] | null>({
+        url: `/access/requests/me`,
+      }),
+    ).pipe(
+      map((requests) => {
+        if (requests && requests.length) {
+          // Filter requests for the specific project and where type is 'role'
+          const projectRequests = requests.filter(
+            (request) => request.resourceId === projectId && request.type === 'role',
+          )
 
-            const pendingRequest = projectRequests.find(
-              (request) =>
-                request.status === 'pending' &&
-                isAfter(addWeeks(new Date(request.createdAt), 2), new Date()),
-            )
-            if (pendingRequest) {
-              return 'pending'
-            }
+          const declinedRequest = projectRequests.find((request) => request.status === 'declined')
+          if (declinedRequest) {
+            return {loading: false, error: false, status: 'denied'}
+          }
 
-            const oldPendingRequest = projectRequests.find(
-              (request) =>
-                request.status === 'pending' &&
-                isBefore(addWeeks(new Date(request.createdAt), 2), new Date()),
-            )
-            if (oldPendingRequest) {
-              return 'expired'
-            }
+          const pendingRequest = projectRequests.find(
+            (request) =>
+              request.status === 'pending' &&
+              isAfter(addWeeks(new Date(request.createdAt), 2), new Date()),
+          )
+          if (pendingRequest) {
+            return {loading: false, error: false, status: 'pending'}
           }
-          return 'none' // No pending requests found
-        }),
-        catchError((err) => {
-          console.error(err)
-          return of()
-        }),
-      )
-    }
 
-    const subscription = checkRoleRequests$().subscribe({
-      next: (value) => {
-        setLoading(false)
-        setStatus(value)
-      },
-      error: (err) => {
+          const oldPendingRequest = projectRequests.find(
+            (request) =>
+              request.status === 'pending' &&
+              isBefore(addWeeks(new Date(request.createdAt), 2), new Date()),
+          )
+          if (oldPendingRequest) {
+            return {loading: false, error: false, status: 'expired'}
+          }
+        }
+        return {loading: false, error: false, status: 'none'}
+      }),
+      catchError((err) => {
         console.error(err)
-        setError(err)
-      },
-    })
-
-    return () => {
-      subscription.unsubscribe()
-    }
+        return of({loading: false, error: true, status: undefined})
+      }),
+      startWith({loading: true, error: false, status: undefined}), // Start with loading state
+    )
   }, [client, projectId])
 
+  // Use useObservable to subscribe to the checkRoleRequests observable
+  const {loading, error, status} = useObservable(checkRoleRequests, {
+    loading: true,
+    error: false,
+    status: undefined,
+  })
+
   return {data: status, loading, error}
 }