canopycms 0.0.0

package/src/editor/hooks/useEntryManager.ts

@@ -0,0 +1,387 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { notifications } from '@mantine/notifications'
+import type { ListEntriesResponse } from '../../api/entries'
+import type { WriteContentBody } from '../../api/content'
+import type { EditorEntry, EditorCollection } from '../Editor'
+import type { LogicalPath } from '../../paths/types'
+import type { FormValue } from '../FormRenderer'
+import {
+  buildEntriesFromListResponse,
+  buildWritePayload,
+  normalizeContentPayload,
+} from '../editor-utils'
+import { useApiClient } from '../context'
+
+export interface UseEntryManagerOptions {
+  initialEntries: EditorEntry[]
+  initialSelectedId?: string
+  branchName: string
+  collections?: EditorCollection[]
+  previewBaseByCollection?: Record<string, string>
+  resolvePreviewSrc: (entry: Partial<EditorEntry>) => string | undefined
+  setBusy: (busy: boolean) => void
+  contentRoot?: string
+}
+
+export interface UseEntryManagerReturn {
+  selectedPath: string
+  setSelectedPath: (path: string) => void
+  entries: EditorEntry[]
+  setEntries: (entries: EditorEntry[]) => void
+  collections: EditorCollection[]
+  currentEntry: EditorEntry | undefined
+  navigatorOpen: boolean
+  setNavigatorOpen: (open: boolean) => void
+  refreshEntries: (branch?: string) => Promise<void>
+  handleCreateEntry: (collectionPath: LogicalPath, entryTypeName?: string) => Promise<void>
+  renameEntry: (path: string, newSlug: string) => Promise<void>
+  loadEntry: (entry: EditorEntry) => Promise<FormValue>
+  saveEntry: (entry: EditorEntry, value: FormValue) => Promise<FormValue>
+  collectionByPath: Map<LogicalPath, EditorCollection>
+  // Entry create modal state
+  createModalOpen: boolean
+  createModalCollection: EditorCollection | null
+  createModalError: string | null
+  createModalCreating: boolean
+  handleCreateModalSubmit: (slug: string, entryTypeName: string) => Promise<void>
+  closeCreateModal: () => void
+}
+
+/**
+ * Custom hook for managing editor entries (CRUD operations).
+ *
+ * Handles:
+ * - Entry selection and navigation
+ * - Loading and saving entry data
+ * - Refreshing entry list from API
+ * - Creating new entries
+ * - URL synchronization for selected entry
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   selectedPath,
+ *   entries,
+ *   currentEntry,
+ *   refreshEntries,
+ *   handleCreateEntry,
+ *   loadEntry,
+ *   saveEntry
+ * } = useEntryManager({
+ *   initialEntries: entries,
+ *   branchName,
+ *   collections,
+ *   resolvePreviewSrc,
+ *   setBusy
+ * })
+ * ```
+ */
+export function useEntryManager(options: UseEntryManagerOptions): UseEntryManagerReturn {
+  const apiClient = useApiClient()
+  const [entriesState, setEntriesState] = useState<EditorEntry[]>(options.initialEntries)
+  const [collectionsState, setCollectionsState] = useState<EditorCollection[]>(
+    options.collections || [],
+  )
+
+  // Initialize with prop value or empty (URL sync happens in effect after mount)
+  const [selectedPath, setSelectedPath] = useState<string>(options.initialSelectedId ?? '')
+  const [navigatorOpen, setNavigatorOpen] = useState(false)
+  const isInitialMount = useRef(true)
+  const hasSyncedFromUrl = useRef(false)
+
+  // Entry create modal state
+  const [createModalOpen, setCreateModalOpen] = useState(false)
+  const [createModalCollection, setCreateModalCollection] = useState<EditorCollection | null>(null)
+  const [createModalError, setCreateModalError] = useState<string | null>(null)
+  const [createModalCreating, setCreateModalCreating] = useState(false)
+
+  // Store the URL entry param on mount (before any effects change the URL)
+  const initialUrlEntry = useRef<string | null>(null)
+  if (typeof window !== 'undefined' && initialUrlEntry.current === null) {
+    const params = new URLSearchParams(window.location.search)
+    initialUrlEntry.current = params.get('entry')
+  }
+
+  const collectionByPath = useMemo(() => {
+    const map = new Map<LogicalPath, EditorCollection>()
+    const walk = (collections: EditorCollection[]) => {
+      for (const c of collections) {
+        map.set(c.path, c)
+        if (c.children) {
+          walk(c.children)
+        }
+      }
+    }
+    walk(collectionsState)
+    return map
+  }, [collectionsState])
+
+  const currentEntry = useMemo(
+    () => entriesState.find((e) => e.path === selectedPath),
+    [entriesState, selectedPath],
+  )
+
+  const loadEntry = async (entry: EditorEntry) => {
+    if (!entry.collectionPath) {
+      throw new Error('Entry missing collectionPath')
+    }
+    // Build path from collectionPath and slug (if it's a collection entry)
+    const path = entry.slug ? `${entry.collectionPath}/${entry.slug}` : entry.collectionPath
+    const result = await apiClient.content.read({
+      branch: options.branchName,
+      path,
+    })
+    if (!result.ok) throw new Error(`Load failed: ${result.status}`)
+    return normalizeContentPayload(result.data)
+  }
+
+  const saveEntry = async (entry: EditorEntry, value: FormValue) => {
+    if (!entry.collectionPath) {
+      throw new Error('Entry missing collectionPath')
+    }
+    const payload = buildWritePayload(entry, value)
+    // Build path from collectionPath and slug (if it's a collection entry)
+    const path = entry.slug ? `${entry.collectionPath}/${entry.slug}` : entry.collectionPath
+    const result = await apiClient.content.write(
+      {
+        branch: options.branchName,
+        path,
+      },
+      payload as unknown as WriteContentBody, // buildWritePayload returns the correct shape
+    )
+    if (!result.ok) throw new Error(`Save failed: ${result.status}`)
+    return normalizeContentPayload(result.data)
+  }
+
+  const refreshEntries = async (branch: string = options.branchName) => {
+    if (!branch) return
+
+    // Fetch schema from schema API
+    const schemaResult = await apiClient.schema.get({ branch })
+    if (!schemaResult.ok || !schemaResult.data) {
+      throw new Error(`Schema fetch failed: ${schemaResult.status}`)
+    }
+
+    // Hydrate wire flatSchema: resolve schemaRef → schema from entrySchemas dict
+    const { entrySchemas } = schemaResult.data
+    const hydratedFlatSchema = schemaResult.data.flatSchema.map((item) =>
+      item.type === 'entry-type' ? { ...item, schema: entrySchemas[item.schemaRef] ?? [] } : item,
+    ) as import('../../config').FlatSchemaItem[]
+
+    // Build editor collections from hydrated flatSchema
+    // Dynamic import: lazy-load heavier editor config; only needed after API data arrives
+    const { buildEditorCollections } = await import('../editor-config')
+    const collections = buildEditorCollections(hydratedFlatSchema)
+    setCollectionsState(collections)
+
+    // Fetch entries from entries API
+    const result = await apiClient.entries.list({ branch })
+    if (!result.ok) throw new Error(`Refresh failed: ${result.status}`)
+    const data = result.data as ListEntriesResponse
+
+    // Build entries with resolved schemas from flatSchema
+    const refreshed = buildEntriesFromListResponse({
+      response: data,
+      branchName: branch,
+      resolvePreviewSrc: (entry) => options.resolvePreviewSrc(entry) ?? '',
+      contentRoot: options.contentRoot || 'content',
+      flatSchema: hydratedFlatSchema,
+    })
+
+    setEntriesState(refreshed)
+
+    // Only auto-select newly created entry if there were already entries before
+    if (entriesState.length > 0) {
+      const newlyCreated = refreshed.find((e) => !entriesState.find((old) => old.path === e.path))
+      if (newlyCreated) {
+        setSelectedPath(newlyCreated.path)
+      }
+    }
+  }
+
+  /**
+   * Open the create entry modal for the specified collection
+   */
+  const handleCreateEntry = async (collectionPath: LogicalPath, _?: string) => {
+    const col = collectionByPath.get(collectionPath)
+    if (!col || col.type === 'entry') {
+      return
+    }
+
+    setCreateModalCollection(col)
+    setCreateModalError(null)
+    setCreateModalOpen(true)
+  }
+
+  /**
+   * Handle entry creation from the modal
+   */
+  const handleCreateModalSubmit = async (slug: string, entryTypeName: string) => {
+    if (!createModalCollection) return
+
+    setCreateModalCreating(true)
+    setCreateModalError(null)
+
+    try {
+      const selectedType = createModalCollection.entryTypes?.find((et) => et.name === entryTypeName)
+      const format = selectedType?.format || createModalCollection.format
+
+      const payload =
+        format === 'json' ? { format: 'json' as const, data: {} } : { format, data: {}, body: '' }
+
+      // Use collection path (e.g., "content/posts") not name (e.g., "posts")
+      const path = `${createModalCollection.path}/${slug}`
+      const result = await apiClient.content.write(
+        {
+          branch: options.branchName,
+          path,
+          entryType: entryTypeName,
+        },
+        payload as unknown as WriteContentBody,
+      )
+
+      if (!result.ok) {
+        const errorMsg = 'error' in result ? result.error : `Create failed: ${result.status}`
+        throw new Error(errorMsg)
+      }
+
+      await refreshEntries()
+      notifications.show({ message: 'Created new entry', color: 'green' })
+      setCreateModalOpen(false)
+      setCreateModalCollection(null)
+    } catch (err) {
+      console.error(err)
+      const errorMessage = err instanceof Error ? err.message : 'Create failed'
+      setCreateModalError(errorMessage)
+    } finally {
+      setCreateModalCreating(false)
+    }
+  }
+
+  /**
+   * Close the create entry modal
+   */
+  const closeCreateModal = () => {
+    setCreateModalOpen(false)
+    setCreateModalCollection(null)
+    setCreateModalError(null)
+    setCreateModalCreating(false)
+  }
+
+  /**
+   * Rename an entry's slug
+   */
+  const renameEntry = async (path: string, newSlug: string): Promise<void> => {
+    options.setBusy(true)
+    try {
+      const result = await apiClient.content.renameEntry(
+        {
+          branch: options.branchName,
+          path,
+        },
+        { newSlug },
+      )
+      if (!result.ok) {
+        const errorMsg = 'error' in result ? result.error : `Rename failed: ${result.status}`
+        throw new Error(errorMsg)
+      }
+
+      // Update the selected path if the renamed entry is currently selected
+      if (selectedPath === path && result.data) {
+        setSelectedPath(result.data.newPath)
+      }
+
+      // Refresh entries to get updated paths
+      await refreshEntries()
+      notifications.show({
+        message: 'Entry renamed successfully',
+        color: 'green',
+      })
+    } catch (err) {
+      console.error(err)
+      const errorMessage = err instanceof Error ? err.message : 'Rename failed'
+      notifications.show({ message: errorMessage, color: 'red' })
+      throw err
+    } finally {
+      options.setBusy(false)
+    }
+  }
+
+  // Clear selection and refresh entries when branch changes (reactive pattern)
+  useEffect(() => {
+    if (options.branchName) {
+      // On initial mount, preserve the initial selection from URL
+      // On subsequent branch changes, clear selection
+      if (isInitialMount.current) {
+        isInitialMount.current = false
+      } else {
+        setSelectedPath('')
+      }
+
+      // Refresh entries for new branch
+      options.setBusy(true)
+      refreshEntries(options.branchName)
+        .catch(console.error)
+        .finally(() => options.setBusy(false))
+    }
+  }, [options.branchName])
+
+  // Validate selected entry when entries change
+  useEffect(() => {
+    // Skip validation if entries haven't loaded yet
+    if (entriesState.length === 0) return
+
+    // On first load with entries, sync from URL if we haven't already
+    if (!hasSyncedFromUrl.current) {
+      hasSyncedFromUrl.current = true
+      // If there's an entry in the URL that exists in entries, select it
+      if (initialUrlEntry.current && entriesState.find((e) => e.path === initialUrlEntry.current)) {
+        setSelectedPath(initialUrlEntry.current!)
+        return
+      }
+    }
+
+    // If the selected entry exists, keep it
+    if (entriesState.find((e) => e.path === selectedPath)) return
+
+    // Fall back to first entry
+    setSelectedPath(entriesState[0]?.path ?? '')
+  }, [entriesState, selectedPath])
+
+  // Update URL when selection changes (skip until URL sync has happened)
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    // Don't update URL until we've synced from it first
+    if (!hasSyncedFromUrl.current) return
+    const url = new URL(window.location.href)
+    if (selectedPath) {
+      url.searchParams.set('entry', selectedPath)
+    } else {
+      url.searchParams.delete('entry')
+    }
+    window.history.replaceState({}, '', url.toString())
+  }, [selectedPath])
+
+  return {
+    selectedPath,
+    setSelectedPath,
+    entries: entriesState,
+    setEntries: setEntriesState,
+    collections: collectionsState,
+    currentEntry,
+    navigatorOpen,
+    setNavigatorOpen,
+    refreshEntries,
+    handleCreateEntry,
+    renameEntry,
+    loadEntry,
+    saveEntry,
+    collectionByPath: collectionByPath,
+    createModalOpen,
+    createModalCollection,
+    createModalError,
+    createModalCreating,
+    handleCreateModalSubmit,
+    closeCreateModal,
+  }
+}

package/src/editor/hooks/useGroupManager.test.ts

@@ -0,0 +1,277 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useGroupManager } from './useGroupManager'
+import type { MockApiClient } from '../../api/__test__/mock-client'
+import { setupMockApiClient, setupMockConsole, createApiClientWrapper } from './__test__/test-utils'
+
+// Mock the API client module
+vi.mock('../../api', async () => {
+  const actual = await vi.importActual('../../api')
+  return {
+    ...actual,
+    createApiClient: vi.fn(),
+  }
+})
+
+// Mock notifications
+vi.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: vi.fn(),
+  },
+}))
+
+describe('useGroupManager', () => {
+  let mockClient: MockApiClient
+  let wrapper: ReturnType<typeof createApiClientWrapper>
+
+  beforeEach(async () => {
+    mockClient = await setupMockApiClient()
+    wrapper = createApiClientWrapper(mockClient)
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('initializes with empty groups', () => {
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    expect(result.current.groupsData).toEqual([])
+    expect(result.current.groupsLoading).toBe(false)
+  })
+
+  it('loads groups when isOpen becomes true', async () => {
+    const mockGroups = [
+      { id: 'group1', name: 'Editors', members: [] },
+      { id: 'group2', name: 'Reviewers', members: [] },
+    ]
+
+    mockClient.groups.getInternal.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: { groups: mockGroups },
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: true }), {
+      wrapper,
+    })
+
+    // Should start loading
+    expect(result.current.groupsLoading).toBe(true)
+
+    await waitFor(() => {
+      expect(result.current.groupsLoading).toBe(false)
+    })
+
+    expect(result.current.groupsData).toEqual(mockGroups)
+    expect(mockClient.groups.getInternal).toHaveBeenCalled()
+  })
+
+  it('handles load groups error', async () => {
+    const { restore } = setupMockConsole(['error'])
+    mockClient.groups.getInternal.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: true }), {
+      wrapper,
+    })
+
+    await waitFor(() => {
+      expect(result.current.groupsLoading).toBe(false)
+    })
+
+    expect(result.current.groupsData).toEqual([])
+    restore()
+  })
+
+  it('saves groups successfully', async () => {
+    const mockGroups = [{ id: 'group1', name: 'Editors', members: [] }]
+
+    // Mock initial load
+    mockClient.groups.getInternal.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: { groups: [] },
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: true }), {
+      wrapper,
+    })
+
+    await waitFor(() => {
+      expect(result.current.groupsLoading).toBe(false)
+    })
+
+    // Mock save
+    mockClient.groups.updateInternal.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+    })
+
+    // Mock reload after save
+    mockClient.groups.getInternal.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: { groups: mockGroups },
+    })
+
+    await result.current.handleSaveGroups(mockGroups)
+
+    await waitFor(() => {
+      expect(result.current.groupsData).toEqual(mockGroups)
+    })
+
+    expect(mockClient.groups.updateInternal).toHaveBeenCalledWith({
+      groups: mockGroups,
+    })
+  })
+
+  it('handles save groups error', async () => {
+    mockClient.groups.updateInternal.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      error: 'Save failed',
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    await expect(result.current.handleSaveGroups([])).rejects.toThrow('Save failed')
+  })
+
+  it('searches users successfully', async () => {
+    const mockUsers = [
+      { id: 'user1', name: 'John Doe', email: 'john@example.com' },
+      { id: 'user2', name: 'Jane Smith', email: 'jane@example.com' },
+    ]
+
+    mockClient.permissions.searchUsers.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: { users: mockUsers },
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    const users = await result.current.handleSearchUsers('john', 10)
+
+    expect(users).toEqual(mockUsers)
+    // This assertion will fail until we fix the implementation
+    expect(mockClient.permissions.searchUsers).toHaveBeenCalledWith({
+      q: 'john',
+      limit: '10',
+    })
+  })
+
+  it('searches users without limit parameter', async () => {
+    const mockUsers = [{ id: 'user1', name: 'John Doe', email: 'john@example.com' }]
+
+    mockClient.permissions.searchUsers.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: { users: mockUsers },
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    const users = await result.current.handleSearchUsers('john')
+
+    expect(users).toEqual(mockUsers)
+    // This assertion will fail until we fix the implementation
+    expect(mockClient.permissions.searchUsers).toHaveBeenCalledWith({
+      q: 'john',
+    })
+  })
+
+  it('handles user search error', async () => {
+    mockClient.permissions.searchUsers.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    const users = await result.current.handleSearchUsers('john')
+
+    expect(users).toEqual([])
+  })
+
+  it('searches external groups successfully', async () => {
+    const mockExternalGroups = [
+      { id: 'ext1', name: 'External Group 1' },
+      { id: 'ext2', name: 'External Group 2' },
+    ]
+
+    mockClient.groups.searchExternal.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: { groups: mockExternalGroups },
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    const groups = await result.current.handleSearchExternalGroups('external')
+
+    expect(groups).toEqual(mockExternalGroups)
+    expect(mockClient.groups.searchExternal).toHaveBeenCalledWith({
+      q: 'external',
+    })
+  })
+
+  it('handles external group search error', async () => {
+    mockClient.groups.searchExternal.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    const groups = await result.current.handleSearchExternalGroups('external')
+
+    expect(groups).toEqual([])
+  })
+
+  it('does not load groups when isOpen is false', async () => {
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    expect(result.current.groupsLoading).toBe(false)
+    expect(mockClient.groups.getInternal).not.toHaveBeenCalled()
+  })
+
+  it('can manually reload groups', async () => {
+    const mockGroups = [{ id: 'group1', name: 'Editors', members: [] }]
+
+    mockClient.groups.getInternal.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: { groups: mockGroups },
+    })
+
+    const { result } = renderHook(() => useGroupManager({ isOpen: false }), {
+      wrapper,
+    })
+
+    await result.current.loadGroups()
+
+    await waitFor(() => {
+      expect(result.current.groupsData).toEqual(mockGroups)
+    })
+  })
+})