@sanity/sdk-react 0.0.0-rc.5 → 0.0.0

package/src/hooks/auth/useVerifyOrgProjects.test.tsx

@@ -0,0 +1,136 @@
+import {observeOrganizationVerificationState, type OrgVerificationResult} from '@sanity/sdk'
+import {act, renderHook, waitFor} from '@testing-library/react'
+import {Subject} from 'rxjs'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useVerifyOrgProjects} from './useVerifyOrgProjects'
+
+// Mock dependencies
+vi.mock('@sanity/sdk', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@sanity/sdk')>()
+  return {
+    ...original,
+    observeOrganizationVerificationState: vi.fn(),
+  }
+})
+vi.mock('../context/useSanityInstance')
+
+describe('useVerifyOrgProjects', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mockInstance = {config: {}} as any // Dummy instance
+  const mockObserve = vi.mocked(observeOrganizationVerificationState)
+  const mockUseInstance = vi.mocked(useSanityInstance)
+  const testProjectIds = ['proj-1']
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseInstance.mockReturnValue(mockInstance)
+  })
+
+  it('should return null and not observe state if disabled', () => {
+    const {result} = renderHook(() => useVerifyOrgProjects(true, testProjectIds))
+
+    expect(result.current).toBeNull()
+    expect(mockObserve).not.toHaveBeenCalled()
+  })
+
+  it('should return null and not observe state if projectIds is missing or empty', () => {
+    const {result: resultUndefined} = renderHook(() => useVerifyOrgProjects(false, undefined))
+    expect(resultUndefined.current).toBeNull()
+    expect(mockObserve).not.toHaveBeenCalled()
+
+    const {result: resultEmpty} = renderHook(() => useVerifyOrgProjects(false, []))
+    expect(resultEmpty.current).toBeNull()
+    expect(mockObserve).not.toHaveBeenCalled()
+  })
+
+  it('should return null initially when not disabled and projectIds provided', () => {
+    const subject = new Subject<OrgVerificationResult>()
+    mockObserve.mockReturnValue(subject.asObservable())
+
+    const {result} = renderHook(() => useVerifyOrgProjects(false, testProjectIds))
+
+    expect(result.current).toBeNull()
+    expect(mockObserve).toHaveBeenCalledWith(mockInstance, testProjectIds)
+  })
+
+  it('should return null if observable emits { error: null }', async () => {
+    const subject = new Subject<OrgVerificationResult>()
+    mockObserve.mockReturnValue(subject.asObservable())
+
+    const {result} = renderHook(() => useVerifyOrgProjects(false, testProjectIds))
+
+    act(() => {
+      subject.next({error: null})
+    })
+
+    await waitFor(() => {
+      expect(result.current).toBeNull()
+    })
+  })
+
+  it('should return error string if observable emits { error: string }', async () => {
+    const subject = new Subject<OrgVerificationResult>()
+    const errorMessage = 'Org mismatch'
+    mockObserve.mockReturnValue(subject.asObservable())
+
+    const {result} = renderHook(() => useVerifyOrgProjects(false, testProjectIds))
+
+    act(() => {
+      subject.next({error: errorMessage})
+    })
+
+    await waitFor(() => {
+      expect(result.current).toBe(errorMessage)
+    })
+  })
+
+  it('should unsubscribe on unmount', () => {
+    const subject = new Subject<OrgVerificationResult>()
+    const unsubscribeSpy = vi.spyOn(subject, 'unsubscribe')
+    mockObserve.mockReturnValue(subject)
+
+    const {unmount} = renderHook(() => useVerifyOrgProjects(false, testProjectIds))
+
+    expect(unsubscribeSpy).not.toHaveBeenCalled()
+    unmount()
+    // Note: RxJS handles the inner subscription cleanup when the source (Subject) completes or errors,
+    // but testing library unmount should trigger the useEffect cleanup which calls unsubscribe.
+    // However, the spy might be on the Subject itself, not the final Subscription object.
+    // Let's adjust to spy on the returned subscription directly if possible, or accept this limitation.
+    // For now, we assume the useEffect cleanup calls unsubscribe correctly.
+    // We can validate subscription logic more deeply if needed.
+    // For this test, let's check if the observable reference still has observers.
+    expect(subject.observed).toBe(false) // Check if observers are gone after unmount
+  })
+
+  it('should clear the error if disabled becomes true', async () => {
+    const subject = new Subject<OrgVerificationResult>()
+    const errorMessage = 'Org mismatch'
+    mockObserve.mockReturnValue(subject.asObservable())
+
+    const {result, rerender} = renderHook(
+      ({disabled, pIds}) => useVerifyOrgProjects(disabled, pIds),
+      {
+        initialProps: {disabled: false, pIds: testProjectIds},
+      },
+    )
+
+    // Set initial error
+    act(() => {
+      subject.next({error: errorMessage})
+    })
+    await waitFor(() => {
+      expect(result.current).toBe(errorMessage)
+    })
+
+    // Disable the hook
+    rerender({disabled: true, pIds: testProjectIds})
+
+    // Error should be cleared
+    await waitFor(() => {
+      expect(result.current).toBeNull()
+    })
+  })
+})

package/src/hooks/auth/useVerifyOrgProjects.tsx

@@ -0,0 +1,48 @@
+import {observeOrganizationVerificationState, type OrgVerificationResult} from '@sanity/sdk'
+import {useEffect, useState} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * Hook that verifies the current projects belongs to the organization ID specified in the dashboard context.
+ *
+ * @public
+ * @param disabled - When true, disables verification and skips project verification API calls
+ * @returns Error message if the project doesn't match the organization ID, or null if all match or verification isn't needed
+ * @category Projects
+ * @example
+ * ```tsx
+ * function OrgVerifier() {
+ *   const error = useVerifyOrgProjects()
+ *
+ *   if (error) {
+ *     return <div className="error">{error}</div>
+ *   }
+ *
+ *   return <div>Organization projects verified!</div>
+ * }
+ * ```
+ */
+export function useVerifyOrgProjects(disabled = false, projectIds?: string[]): string | null {
+  const instance = useSanityInstance()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (disabled || !projectIds || projectIds.length === 0) {
+      if (error !== null) setError(null)
+      return
+    }
+
+    const verificationObservable$ = observeOrganizationVerificationState(instance, projectIds)
+
+    const subscription = verificationObservable$.subscribe((result: OrgVerificationResult) => {
+      setError(result.error)
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [instance, disabled, error, projectIds])
+
+  return error
+}

package/src/hooks/client/useClient.ts

@@ -5,11 +5,11 @@ import {createStateSourceHook} from '../helpers/createStateSourceHook'
 
 /**
  * A React hook that provides a client that subscribes to changes in your application,
- * such as user authentication changes.
  *
  * @remarks
- * The hook uses `useSyncExternalStore` to safely subscribe to changes
- * and ensure consistency between server and client rendering.
+ * This hook is intended for advanced use cases and special API calls that the React SDK
+ * does not yet provide hooks for. We welcome you to get in touch with us to let us know
+ * your use cases for this!
  *
  * @category Platform
  * @returns A Sanity client

package/src/hooks/comlink/useManageFavorite.test.ts

@@ -1,8 +1,16 @@
 import {type Message, type Node, type Status} from '@sanity/comlink'
-import {getOrCreateNode} from '@sanity/sdk'
+import {
+  type FavoriteStatusResponse,
+  getFavoritesState,
+  getOrCreateNode,
+  resolveFavoritesState,
+  type SanityInstance,
+} from '@sanity/sdk'
+import {BehaviorSubject} from 'rxjs'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {act, renderHook} from '../../../test/test-utils'
+import {useSanityInstance} from '../context/useSanityInstance'
 import {useManageFavorite} from './useManageFavorite'
 
 vi.mock(import('@sanity/sdk'), async (importOriginal) => {
@@ -11,12 +19,17 @@ vi.mock(import('@sanity/sdk'), async (importOriginal) => {
     ...actual,
     getOrCreateNode: vi.fn(),
     releaseNode: vi.fn(),
+    getFavoritesState: vi.fn(),
+    resolveFavoritesState: vi.fn(),
   }
 })
 
+vi.mock('../context/useSanityInstance')
+
 describe('useManageFavorite', () => {
   let node: Node<Message, Message>
   let statusCallback: ((status: Status) => void) | null = null
+  let favoriteStatusSubject: BehaviorSubject<FavoriteStatusResponse>
 
   const mockDocumentHandle = {
     documentId: 'mock-id',
@@ -27,7 +40,7 @@ describe('useManageFavorite', () => {
   function createMockNode() {
     return {
       on: vi.fn(() => () => {}),
-      post: vi.fn(),
+      fetch: vi.fn().mockImplementation(() => Promise.resolve({success: true})),
       stop: vi.fn(),
       onStatus: vi.fn((callback) => {
         statusCallback = callback
@@ -38,8 +51,42 @@ describe('useManageFavorite', () => {
 
   beforeEach(() => {
     statusCallback = null
+    favoriteStatusSubject = new BehaviorSubject<FavoriteStatusResponse>({isFavorited: false})
     node = createMockNode()
     vi.mocked(getOrCreateNode).mockReturnValue(node)
+
+    // Mock getFavoritesState
+    vi.mocked(getFavoritesState).mockImplementation(() => ({
+      subscribe: (callback?: () => void) => {
+        if (!callback) return () => {}
+
+        const subscription = favoriteStatusSubject.subscribe(() => callback())
+        callback() // Initial call
+        return () => subscription.unsubscribe()
+      },
+      getCurrent: () => favoriteStatusSubject.getValue(),
+      observable: favoriteStatusSubject.asObservable(),
+    }))
+
+    // Mock resolveFavoritesState
+    vi.mocked(resolveFavoritesState).mockImplementation(async () => {
+      const newValue = {isFavorited: !favoriteStatusSubject.getValue().isFavorited}
+      favoriteStatusSubject.next(newValue)
+      return newValue
+    })
+
+    // Default mock for useSanityInstance
+    vi.mocked(useSanityInstance).mockReturnValue({
+      config: {
+        projectId: 'test',
+        dataset: 'test',
+      },
+    } as unknown as SanityInstance)
+  })
+
+  afterEach(() => {
+    favoriteStatusSubject.complete()
+    vi.clearAllMocks()
   })
 
   it('should initialize with default states', () => {
@@ -49,60 +96,118 @@ describe('useManageFavorite', () => {
     expect(result.current.isConnected).toBe(false)
   })
 
-  it('should handle favorite action', () => {
+  it('should handle favorite action and update state', async () => {
     const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
 
+    expect(result.current.isFavorited).toBe(false)
+
+    // Simulate connection first
     act(() => {
-      result.current.favorite()
+      statusCallback?.('connected')
+    })
+
+    await act(async () => {
+      await result.current.favorite()
     })
 
-    expect(node.post).toHaveBeenCalledWith('dashboard/v1/events/favorite/mutate', {
-      document: {
-        id: 'mock-id',
-        type: 'mock-type',
-        resource: {
-          id: 'test.test',
-          type: 'studio',
+    expect(node.fetch).toHaveBeenCalledWith(
+      'dashboard/v1/events/favorite/mutate',
+      {
+        document: {
+          id: 'mock-id',
+          type: 'mock-type',
+          resource: {
+            id: 'test.test',
+            type: 'studio',
+          },
         },
+        eventType: 'added',
       },
-      eventType: 'added',
-    })
+      // empty options object (from useWindowConnection)
+      {},
+    )
+    expect(resolveFavoritesState).toHaveBeenCalled()
     expect(result.current.isFavorited).toBe(true)
   })
 
-  it('should handle unfavorite action', () => {
+  it('should handle unfavorite action and update state', async () => {
     const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
 
+    // Set initial state to favorited
+    await act(async () => {
+      favoriteStatusSubject.next({isFavorited: true})
+    })
+
+    expect(result.current.isFavorited).toBe(true)
+
+    // Simulate connection first
     act(() => {
-      result.current.unfavorite()
+      statusCallback?.('connected')
+    })
+
+    await act(async () => {
+      await result.current.unfavorite()
     })
 
-    expect(node.post).toHaveBeenCalledWith('dashboard/v1/events/favorite/mutate', {
-      document: {
-        id: 'mock-id',
-        type: 'mock-type',
-        resource: {
-          id: 'test.test',
-          type: 'studio',
+    expect(node.fetch).toHaveBeenCalledWith(
+      'dashboard/v1/events/favorite/mutate',
+      {
+        document: {
+          id: 'mock-id',
+          type: 'mock-type',
+          resource: {
+            id: 'test.test',
+            type: 'studio',
+          },
         },
+        eventType: 'removed',
       },
-      eventType: 'removed',
+      {},
+    )
+    expect(resolveFavoritesState).toHaveBeenCalled()
+    expect(result.current.isFavorited).toBe(false)
+  })
+
+  it('should not update state if favorite action fails', async () => {
+    vi.mocked(node.fetch).mockImplementationOnce(() => Promise.resolve({success: false}))
+
+    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
+
+    expect(result.current.isFavorited).toBe(false)
+
+    await act(async () => {
+      await result.current.favorite()
     })
+
+    expect(resolveFavoritesState).not.toHaveBeenCalled()
     expect(result.current.isFavorited).toBe(false)
   })
 
-  it('should throw error during favorite/unfavorite actions', () => {
+  it('should throw error during favorite/unfavorite actions', async () => {
     const errorMessage = 'Failed to update favorite status'
 
-    vi.mocked(node.post).mockImplementationOnce(() => {
+    vi.mocked(node.fetch).mockImplementation(() => {
       throw new Error(errorMessage)
     })
 
     const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
 
-    act(() => {
-      expect(() => result.current.favorite()).toThrow(errorMessage)
+    await act(async () => {
+      statusCallback?.('connected')
     })
+
+    await act(async () => {
+      await expect(result.current.favorite()).rejects.toThrow(errorMessage)
+    })
+
+    expect(resolveFavoritesState).not.toHaveBeenCalled()
+    expect(result.current.isFavorited).toBe(false)
+
+    await act(async () => {
+      await expect(result.current.unfavorite()).rejects.toThrow(errorMessage)
+    })
+
+    expect(resolveFavoritesState).not.toHaveBeenCalled()
   })
 
   it('should update connection status', () => {
@@ -116,4 +221,148 @@ describe('useManageFavorite', () => {
 
     expect(result.current.isConnected).toBe(true)
   })
+
+  it('should throw error when studio resource is missing projectId or dataset', () => {
+    // Mock the Sanity instance to not have projectId or dataset
+    vi.mocked(useSanityInstance).mockReturnValue({
+      config: {
+        projectId: undefined,
+        dataset: undefined,
+      },
+    } as unknown as SanityInstance)
+
+    const mockDocumentHandleWithoutProjectId = {
+      documentId: 'mock-id',
+      documentType: 'mock-type',
+      resourceType: 'studio' as const,
+    }
+
+    expect(() => renderHook(() => useManageFavorite(mockDocumentHandleWithoutProjectId))).toThrow(
+      'projectId and dataset are required for studio resources',
+    )
+  })
+
+  it('should throw error when resourceId is missing for non-studio resources', () => {
+    const mockMediaDocumentHandle = {
+      documentId: 'mock-id',
+      documentType: 'mock-type',
+      resourceType: 'media-library' as const,
+      resourceId: undefined,
+    }
+
+    expect(() => renderHook(() => useManageFavorite(mockMediaDocumentHandle))).toThrow(
+      'resourceId is required for media-library and canvas resources',
+    )
+  })
+
+  it('should handle favorites service timeout gracefully', async () => {
+    // Mock both state functions for timeout scenario
+    vi.mocked(getFavoritesState).mockImplementationOnce(() => ({
+      subscribe: () => () => {},
+      getCurrent: () => undefined, // This will trigger the resolveFavoritesState call
+      observable: favoriteStatusSubject.asObservable(),
+    }))
+
+    vi.mocked(resolveFavoritesState).mockImplementationOnce(() => {
+      throw new Error('Favorites service connection timeout')
+    })
+
+    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
+
+    // Should return fallback state instead of suspending
+    expect(result.current).toEqual({
+      favorite: expect.any(Function),
+      unfavorite: expect.any(Function),
+      isFavorited: false,
+      isConnected: false,
+    })
+
+    // Favorite and unfavorite actions should be a no-op
+    await act(async () => {
+      await result.current.favorite()
+    })
+
+    expect(node.fetch).not.toHaveBeenCalled()
+
+    await act(async () => {
+      await result.current.unfavorite()
+    })
+
+    expect(node.fetch).not.toHaveBeenCalled()
+  })
+
+  it('should still throw non-timeout errors for suspension', async () => {
+    vi.mocked(getFavoritesState).mockImplementation(() => ({
+      subscribe: () => () => {},
+      getCurrent: () => undefined, // This will trigger the resolveFavoritesState call
+      observable: favoriteStatusSubject.asObservable(),
+    }))
+
+    // Mock resolveFavoritesState to throw
+    const error = new Error('Some other error')
+    vi.mocked(resolveFavoritesState).mockImplementation(() => {
+      throw error
+    })
+
+    expect(() => {
+      renderHook(() => useManageFavorite(mockDocumentHandle))
+    }).toThrow(error)
+  })
+
+  it('should not call fetch if connection is not established', async () => {
+    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
+
+    // Ensure connection is not established
+    expect(result.current.isConnected).toBe(false)
+
+    // Try to favorite
+    await act(async () => {
+      await result.current.favorite()
+    })
+
+    // Fetch should not have been called due to the new status check
+    expect(node.fetch).not.toHaveBeenCalled()
+
+    // Try to unfavorite
+    await act(async () => {
+      await result.current.unfavorite()
+    })
+
+    // Fetch should still not have been called
+    expect(node.fetch).not.toHaveBeenCalled()
+  })
+
+  it('should include schemaName in payload when provided', async () => {
+    const mockDocumentHandleWithSchema = {
+      ...mockDocumentHandle,
+      schemaName: 'testSchema',
+    }
+    const {result} = renderHook(() => useManageFavorite(mockDocumentHandleWithSchema))
+
+    // Simulate connection first
+    act(() => {
+      statusCallback?.('connected')
+    })
+
+    await act(async () => {
+      await result.current.favorite()
+    })
+
+    expect(node.fetch).toHaveBeenCalledWith(
+      'dashboard/v1/events/favorite/mutate',
+      {
+        document: {
+          id: 'mock-id',
+          type: 'mock-type',
+          resource: {
+            id: 'test.test',
+            type: 'studio',
+            schemaName: 'testSchema', // <-- Expect schemaName here
+          },
+        },
+        eventType: 'added',
+      },
+      {},
+    )
+  })
 })