@sanity/sdk-react 3.0.0-rc.1 → 3.0.0

package/src/hooks/dashboard/useManageFavorite.test.tsx

@@ -1,379 +0,0 @@
-import {type Message} from '@sanity/comlink'
-import {type FavoriteStatusResponse, getFavoritesState, resolveFavoritesState} from '@sanity/sdk'
-import {act, renderHook} from '@testing-library/react'
-import {BehaviorSubject} from 'rxjs'
-import {beforeEach, describe, expect, it, type Mock, vi} from 'vitest'
-
-import {ResourceProvider} from '../../context/ResourceProvider'
-import {useWindowConnection, type WindowConnection} from '../comlink/useWindowConnection'
-import {useManageFavorite} from './useManageFavorite'
-
-type MockFetch = (type: string, data?: unknown, options?: unknown) => Promise<{success: boolean}>
-type MockSendMessage = (type: string, data?: unknown) => void
-
-vi.mock(import('@sanity/sdk'), async (importOriginal) => {
-  const actual = await importOriginal()
-  return {
-    ...actual,
-    getFavoritesState: vi.fn(),
-    resolveFavoritesState: vi.fn(),
-  }
-})
-
-vi.mock('../comlink/useWindowConnection', () => ({
-  useWindowConnection: vi.fn(),
-}))
-
-describe('useManageFavorite', () => {
-  let favoriteStatusSubject: BehaviorSubject<FavoriteStatusResponse>
-  let mockFetch: Mock<MockFetch>
-  let mockSendMessage: Mock<MockSendMessage>
-
-  const mockDocumentHandle = {
-    documentId: 'mock-id',
-    documentType: 'mock-type',
-    resourceType: 'studio' as const,
-  }
-
-  beforeEach(() => {
-    favoriteStatusSubject = new BehaviorSubject<FavoriteStatusResponse>({isFavorited: false})
-
-    // 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
-    })
-
-    // Mock useWindowConnection
-    mockFetch = vi.fn<MockFetch>().mockResolvedValue({success: true})
-    mockSendMessage = vi.fn<MockSendMessage>()
-    vi.mocked(useWindowConnection).mockImplementation(
-      () =>
-        ({
-          fetch: (type: string, data?: unknown, options: unknown = {}) =>
-            mockFetch(type, data, options),
-          sendMessage: mockSendMessage,
-        }) as unknown as WindowConnection<Message>,
-    )
-  })
-
-  afterEach(() => {
-    favoriteStatusSubject.complete()
-    vi.clearAllMocks()
-  })
-
-  it('should initialize with default states', () => {
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-
-    expect(result.current.isFavorited).toBe(false)
-  })
-
-  it('should handle favorite action and update state', async () => {
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test" dataset="test" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-
-    expect(result.current.isFavorited).toBe(false)
-
-    await act(async () => {
-      await result.current.favorite()
-    })
-
-    expect(mockFetch).toHaveBeenCalledWith(
-      'dashboard/v1/events/favorite/mutate',
-      {
-        document: {
-          id: 'mock-id',
-          type: 'mock-type',
-          resource: {
-            id: 'test.test',
-            type: 'studio',
-          },
-        },
-        eventType: 'added',
-      },
-      // empty options object (from useWindowConnection)
-      {},
-    )
-    expect(resolveFavoritesState).toHaveBeenCalled()
-    expect(result.current.isFavorited).toBe(true)
-  })
-
-  it('should handle unfavorite action and update state', async () => {
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test" dataset="test" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-
-    // Set initial state to favorited
-    await act(async () => {
-      favoriteStatusSubject.next({isFavorited: true})
-    })
-
-    expect(result.current.isFavorited).toBe(true)
-
-    await act(async () => {
-      await result.current.unfavorite()
-    })
-
-    expect(mockFetch).toHaveBeenCalledWith(
-      'dashboard/v1/events/favorite/mutate',
-      {
-        document: {
-          id: 'mock-id',
-          type: 'mock-type',
-          resource: {
-            id: 'test.test',
-            type: 'studio',
-          },
-        },
-        eventType: 'removed',
-      },
-      {},
-    )
-    expect(resolveFavoritesState).toHaveBeenCalled()
-    expect(result.current.isFavorited).toBe(false)
-  })
-
-  it('should not update state if favorite action fails', async () => {
-    mockFetch.mockResolvedValueOnce({success: false})
-
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-
-    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', async () => {
-    const errorMessage = 'Failed to update favorite status'
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    mockFetch.mockImplementation(() => {
-      throw new Error(errorMessage)
-    })
-
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-
-    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()
-    consoleErrorSpy.mockRestore()
-  })
-
-  it('should throw error when studio resource is missing projectId or dataset', () => {
-    const mockDocumentHandleWithoutProjectId = {
-      documentId: 'mock-id',
-      documentType: 'mock-type',
-      resourceType: 'studio' as const,
-    }
-
-    expect(() =>
-      renderHook(() => useManageFavorite(mockDocumentHandleWithoutProjectId), {
-        wrapper: ({children}) => (
-          <ResourceProvider projectId={undefined} dataset={undefined} fallback={null}>
-            {children}
-          </ResourceProvider>
-        ),
-      }),
-    ).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), {
-        wrapper: ({children}) => (
-          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-            {children}
-          </ResourceProvider>
-        ),
-      }),
-    ).toThrow('resourceId is required for media-library and canvas resources')
-  })
-
-  it('should include schemaName in payload when provided', async () => {
-    const mockDocumentHandleWithSchema = {
-      ...mockDocumentHandle,
-      schemaName: 'testSchema',
-    }
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandleWithSchema), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-
-    await act(async () => {
-      await result.current.favorite()
-    })
-
-    expect(mockFetch).toHaveBeenCalledWith(
-      'dashboard/v1/events/favorite/mutate',
-      {
-        document: {
-          id: 'mock-id',
-          type: 'mock-type',
-          resource: {
-            id: 'test-project.test-dataset',
-            type: 'studio',
-            schemaName: 'testSchema',
-          },
-        },
-        eventType: 'added',
-      },
-      {},
-    )
-  })
-
-  it('should default isFavorited to false if state is undefined', () => {
-    // Mock getFavoritesState to return undefined for getCurrent
-    vi.mocked(getFavoritesState).mockImplementation(() => ({
-      subscribe: (callback?: () => void) => {
-        if (!callback) return () => {}
-        callback()
-        return () => {}
-      },
-      getCurrent: () => undefined,
-      observable: favoriteStatusSubject.asObservable(),
-    }))
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-    expect(result.current.isFavorited).toBe(false)
-  })
-
-  it('should do nothing if fetch is missing', async () => {
-    vi.mocked(useWindowConnection).mockReturnValue({
-      fetch: undefined,
-      sendMessage: mockSendMessage,
-    } as unknown as WindowConnection<Message>)
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-    await act(async () => {
-      await result.current.favorite()
-      await result.current.unfavorite()
-    })
-    expect(mockFetch).not.toHaveBeenCalled()
-  })
-
-  it('should do nothing if documentId is missing', async () => {
-    const handle = {...mockDocumentHandle, documentId: undefined}
-    // @ts-expect-error -- no access to ManageFavorite props type
-    const {result} = renderHook(() => useManageFavorite(handle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-    await act(async () => {
-      await result.current.favorite()
-      await result.current.unfavorite()
-    })
-    expect(mockFetch).not.toHaveBeenCalled()
-  })
-
-  it('should do nothing if documentType is missing', async () => {
-    const handle = {...mockDocumentHandle, documentType: undefined}
-    // @ts-expect-error -- no access to ManageFavorite props type
-    const {result} = renderHook(() => useManageFavorite(handle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-    await act(async () => {
-      await result.current.favorite()
-      await result.current.unfavorite()
-    })
-    expect(mockFetch).not.toHaveBeenCalled()
-  })
-
-  it('should do nothing if resourceType is missing', async () => {
-    const handle = {...mockDocumentHandle, resourceType: undefined, resourceId: 'studio'}
-    // @ts-expect-error -- no access to ManageFavorite props type
-    const {result} = renderHook(() => useManageFavorite(handle), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
-    await act(async () => {
-      await result.current.favorite()
-      await result.current.unfavorite()
-    })
-    expect(mockFetch).not.toHaveBeenCalled()
-  })
-})

package/src/hooks/dashboard/useManageFavorite.ts

@@ -1,173 +0,0 @@
-import {
-  type CanvasResource,
-  type Events,
-  type MediaResource,
-  SDK_CHANNEL_NAME,
-  SDK_NODE_NAME,
-  type StudioResource,
-} from '@sanity/message-protocol'
-import {
-  type DocumentHandle,
-  type FavoriteStatusResponse,
-  type FrameMessage,
-  getFavoritesState,
-  resolveFavoritesState,
-} from '@sanity/sdk'
-import {useCallback, useMemo, useSyncExternalStore} from 'react'
-
-import {useWindowConnection} from '../comlink/useWindowConnection'
-import {useSanityInstance} from '../context/useSanityInstance'
-
-interface ManageFavorite extends FavoriteStatusResponse {
-  favorite: () => Promise<void>
-  unfavorite: () => Promise<void>
-  isFavorited: boolean
-}
-
-interface UseManageFavoriteProps extends DocumentHandle {
-  resourceId?: string
-  resourceType: StudioResource['type'] | MediaResource['type'] | CanvasResource['type']
-  /**
-   * The name of the schema collection this document belongs to.
-   * Typically is the name of the workspace when used in the context of a studio.
-   */
-  schemaName?: string
-}
-
-/**
- * @internal
- *
- * This hook provides functionality to add and remove documents from favorites,
- * and tracks the current favorite status of the document.
- * @param documentHandle - The document handle containing document ID and type, like `{_id: '123', _type: 'book'}`
- * @returns An object containing:
- * - `favorite` - Function to add document to favorites
- * - `unfavorite` - Function to remove document from favorites
- * - `isFavorited` - Boolean indicating if document is currently favorited
- *
- * @example
- * ```tsx
- * function FavoriteButton(props: DocumentActionProps) {
- *   const {documentId, documentType} = props
- *   const {favorite, unfavorite, isFavorited} = useManageFavorite({
- *     documentId,
- *     documentType
- *   })
- *
- *   return (
- *     <Button
- *       onClick={() => isFavorited ? unfavorite() : favorite()}
- *       text={isFavorited ? 'Remove from favorites' : 'Add to favorites'}
- *     />
- *   )
- * }
- *
- * // Wrap the component with Suspense since the hook may suspend
- * function MyDocumentAction(props: DocumentActionProps) {
- *   return (
- *     <Suspense
- *       fallback={
- *         <Button
- *           text="Loading..."
- *           disabled
- *         />
- *       }
- *     >
- *       <FavoriteButton {...props} />
- *     </Suspense>
- *   )
- * }
- * ```
- */
-export function useManageFavorite({
-  documentId,
-  documentType,
-  projectId: paramProjectId,
-  dataset: paramDataset,
-  resourceId: paramResourceId,
-  resourceType,
-  schemaName,
-}: UseManageFavoriteProps): ManageFavorite {
-  const {fetch} = useWindowConnection<Events.FavoriteMessage, FrameMessage>({
-    name: SDK_NODE_NAME,
-    connectTo: SDK_CHANNEL_NAME,
-  })
-  const instance = useSanityInstance()
-  const {config} = instance
-  const instanceProjectId = config?.projectId
-  const instanceDataset = config?.dataset
-  const projectId = paramProjectId ?? instanceProjectId
-  const dataset = paramDataset ?? instanceDataset
-
-  if (resourceType === 'studio' && (!projectId || !dataset)) {
-    throw new Error('projectId and dataset are required for studio resources')
-  }
-  // Compute the final resourceId
-  const resourceId =
-    resourceType === 'studio' && !paramResourceId ? `${projectId}.${dataset}` : paramResourceId
-
-  if (!resourceId) {
-    throw new Error('resourceId is required for media-library and canvas resources')
-  }
-
-  // used for favoriteStore functions like getFavoritesState and resolveFavoritesState
-  const context = useMemo(
-    () => ({
-      documentId,
-      documentType,
-      resourceId,
-      resourceType,
-      schemaName,
-    }),
-    [documentId, documentType, resourceId, resourceType, schemaName],
-  )
-
-  // Get favorite status using StateSource
-  const favoriteState = getFavoritesState(instance, context)
-  const state = useSyncExternalStore(favoriteState.subscribe, favoriteState.getCurrent)
-
-  const isFavorited = state?.isFavorited ?? false
-
-  const handleFavoriteAction = useCallback(
-    async (action: 'added' | 'removed') => {
-      if (!fetch || !documentId || !documentType || !resourceType) return
-
-      try {
-        const payload = {
-          eventType: action,
-          document: {
-            id: documentId,
-            type: documentType,
-            resource: {
-              ...{
-                id: resourceId,
-                type: resourceType,
-              },
-              ...(schemaName ? {schemaName} : {}),
-            },
-          },
-        }
-
-        const res = await fetch<{success: boolean}>('dashboard/v1/events/favorite/mutate', payload)
-        if (res.success) {
-          // Force a re-fetch of the favorite status after successful mutation
-          await resolveFavoritesState(instance, context)
-        }
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error(`Failed to ${action === 'added' ? 'favorite' : 'unfavorite'} document:`, err)
-        throw err
-      }
-    },
-    [fetch, documentId, documentType, resourceId, resourceType, schemaName, instance, context],
-  )
-
-  const favorite = useCallback(() => handleFavoriteAction('added'), [handleFavoriteAction])
-  const unfavorite = useCallback(() => handleFavoriteAction('removed'), [handleFavoriteAction])
-
-  return {
-    favorite,
-    unfavorite,
-    isFavorited,
-  }
-}