canopycms 0.0.0

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

@@ -0,0 +1,375 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useDraftManager } from './useDraftManager'
+import type { EditorEntry } from '../Editor'
+import { unsafeAsLogicalPath, unsafeAsContentId } from '../../paths/test-utils'
+
+// Mock notifications
+vi.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: vi.fn(),
+  },
+}))
+
+describe('useDraftManager', () => {
+  const mockEntry: EditorEntry = {
+    path: unsafeAsLogicalPath('entry1'),
+    contentId: unsafeAsContentId('abc123def456'), // 12-char content ID
+    label: 'Test Entry',
+    collectionPath: unsafeAsLogicalPath('posts'),
+    collectionName: 'posts',
+    slug: 'test',
+    type: 'entry',
+    apiPath: '/api/canopycms/main/content/posts/test',
+    format: 'mdx',
+    schema: [],
+  }
+
+  const mockLoadEntry = vi.fn()
+  const mockSaveEntry = vi.fn()
+  const mockSetBusy = vi.fn()
+
+  const defaultOptions = {
+    branchName: 'main',
+    selectedPath: 'entry1',
+    currentEntry: mockEntry,
+    entries: [mockEntry],
+    loadEntry: mockLoadEntry,
+    saveEntry: mockSaveEntry,
+    setBusy: mockSetBusy,
+  }
+
+  beforeEach(() => {
+    // Mock localStorage
+    const localStorageMock = (() => {
+      let store: Record<string, string> = {}
+      return {
+        getItem: (key: string) => store[key] || null,
+        setItem: (key: string, value: string) => {
+          store[key] = value
+        },
+        removeItem: (key: string) => {
+          delete store[key]
+        },
+        clear: () => {
+          store = {}
+        },
+      }
+    })()
+    Object.defineProperty(window, 'localStorage', {
+      value: localStorageMock,
+      writable: true,
+    })
+
+    mockLoadEntry.mockResolvedValue({
+      title: 'Loaded Title',
+      body: 'Loaded Content',
+    })
+    mockSaveEntry.mockResolvedValue({
+      title: 'Saved Title',
+      body: 'Saved Content',
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    window.localStorage.clear()
+  })
+
+  it('initializes with empty drafts', () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    expect(result.current.drafts).toEqual({})
+    expect(result.current.loadedValues).toEqual({})
+    expect(result.current.modifiedCount).toBe(0)
+    expect(result.current.editedFiles).toEqual([])
+  })
+
+  it('initializes with initialValues', () => {
+    const initialValues = {
+      abc123def456: { title: 'Initial', body: 'Content' },
+    }
+    const { result } = renderHook(() => useDraftManager({ ...defaultOptions, initialValues }))
+
+    expect(result.current.drafts).toEqual(initialValues)
+  })
+
+  it('computes selectedValue and effectiveValue', () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    act(() => {
+      result.current.setDrafts({
+        abc123def456: { title: 'Draft', body: 'Draft Content' },
+      })
+    })
+
+    expect(result.current.selectedValue).toEqual({
+      title: 'Draft',
+      body: 'Draft Content',
+    })
+    expect(result.current.effectiveValue).toEqual({
+      title: 'Draft',
+      body: 'Draft Content',
+    })
+  })
+
+  it('falls back to loadedValue when no draft exists', () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    act(() => {
+      result.current.setLoadedValues({
+        abc123def456: { title: 'Loaded', body: 'Loaded Content' },
+      })
+    })
+
+    expect(result.current.selectedValue).toBeUndefined()
+    expect(result.current.loadedValue).toEqual({
+      title: 'Loaded',
+      body: 'Loaded Content',
+    })
+    expect(result.current.effectiveValue).toEqual({
+      title: 'Loaded',
+      body: 'Loaded Content',
+    })
+  })
+
+  it('computes modifiedCount correctly', () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    expect(result.current.modifiedCount).toBe(0)
+
+    act(() => {
+      result.current.setDrafts({
+        abc123def456: { title: 'Draft 1' },
+        xyz789uvw123: { title: 'Draft 2' },
+        mno456pqr789: { title: 'Draft 3' },
+      })
+    })
+
+    expect(result.current.modifiedCount).toBe(3)
+  })
+
+  it('computes editedFiles correctly', () => {
+    const entries = [
+      mockEntry,
+      {
+        ...mockEntry,
+        path: unsafeAsLogicalPath('entry2'),
+        contentId: unsafeAsContentId('xyz789uvw123'),
+        label: 'Entry 2',
+      },
+      {
+        ...mockEntry,
+        path: unsafeAsLogicalPath('entry3'),
+        contentId: unsafeAsContentId('mno456pqr789'),
+        label: 'Entry 3',
+      },
+    ]
+
+    const { result } = renderHook(() => useDraftManager({ ...defaultOptions, entries }))
+
+    act(() => {
+      result.current.setDrafts({
+        abc123def456: { title: 'Draft 1' },
+        xyz789uvw123: { title: 'Draft 2' },
+      })
+    })
+
+    expect(result.current.editedFiles).toEqual([
+      { path: 'entry1', label: 'Test Entry' },
+      { path: 'entry2', label: 'Entry 2' },
+    ])
+  })
+
+  it('restores drafts from localStorage on mount', () => {
+    window.localStorage.setItem(
+      'canopycms:drafts:main',
+      JSON.stringify({
+        abc123def456: { title: 'Restored', body: 'From Storage' },
+      }),
+    )
+
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    waitFor(() => {
+      expect(result.current.drafts).toEqual({
+        abc123def456: { title: 'Restored', body: 'From Storage' },
+      })
+    })
+  })
+
+  it('persists drafts to localStorage when changed', () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    act(() => {
+      result.current.setDrafts({
+        abc123def456: { title: 'New Draft', body: 'Content' },
+      })
+    })
+
+    const stored = window.localStorage.getItem('canopycms:drafts:main')
+    expect(stored).toBe(JSON.stringify({ abc123def456: { title: 'New Draft', body: 'Content' } }))
+  })
+
+  it('saves draft successfully', async () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    act(() => {
+      result.current.setDrafts({
+        abc123def456: { title: 'Draft', body: 'Content' },
+      })
+    })
+
+    await act(async () => {
+      await result.current.handleSave()
+    })
+
+    expect(mockSaveEntry).toHaveBeenCalledWith(mockEntry, {
+      title: 'Draft',
+      body: 'Content',
+    })
+    expect(mockSetBusy).toHaveBeenCalledWith(true)
+    expect(mockSetBusy).toHaveBeenCalledWith(false)
+    expect(result.current.drafts.abc123def456).toEqual({
+      title: 'Saved Title',
+      body: 'Saved Content',
+    })
+    expect(result.current.loadedValues.abc123def456).toEqual({
+      title: 'Saved Title',
+      body: 'Saved Content',
+    })
+  })
+
+  it('handles save error', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockSaveEntry.mockRejectedValueOnce(new Error('Save failed'))
+
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    act(() => {
+      result.current.setDrafts({ abc123def456: { title: 'Draft' } })
+    })
+
+    await act(async () => {
+      await result.current.handleSave()
+    })
+
+    expect(mockSetBusy).toHaveBeenCalledWith(false)
+    consoleErrorSpy.mockRestore()
+  })
+
+  it('does not save when no currentEntry', async () => {
+    const { result } = renderHook(() =>
+      useDraftManager({ ...defaultOptions, currentEntry: undefined }),
+    )
+
+    await act(async () => {
+      await result.current.handleSave()
+    })
+
+    expect(mockSaveEntry).not.toHaveBeenCalled()
+  })
+
+  it('discards all drafts', () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    act(() => {
+      result.current.setDrafts({
+        abc123def456: { title: 'Draft' },
+        xyz789uvw123: { title: 'Draft 2' },
+      })
+    })
+
+    act(() => {
+      result.current.handleDiscardDrafts()
+    })
+
+    expect(result.current.drafts).toEqual({})
+    // After discarding, localStorage is removed, but the effect will write {} next
+    const stored = window.localStorage.getItem('canopycms:drafts:main')
+    expect(stored === null || stored === '{}').toBe(true)
+  })
+
+  it('discards single file draft', () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    act(() => {
+      result.current.setDrafts({
+        abc123def456: { title: 'Draft 1' },
+        xyz789uvw123: { title: 'Draft 2' },
+      })
+    })
+
+    act(() => {
+      result.current.handleDiscardFileDraft()
+    })
+
+    expect(result.current.drafts).toEqual({
+      xyz789uvw123: { title: 'Draft 2' },
+    })
+  })
+
+  it('reloads entry from server', async () => {
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    await act(async () => {
+      await result.current.handleReload()
+    })
+
+    expect(mockLoadEntry).toHaveBeenCalledWith(mockEntry)
+    expect(mockSetBusy).toHaveBeenCalledWith(true)
+    expect(mockSetBusy).toHaveBeenCalledWith(false)
+    expect(result.current.loadedValues.abc123def456).toEqual({
+      title: 'Loaded Title',
+      body: 'Loaded Content',
+    })
+    expect(result.current.drafts.abc123def456).toEqual({
+      title: 'Loaded Title',
+      body: 'Loaded Content',
+    })
+  })
+
+  it('handles reload error', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockLoadEntry.mockRejectedValueOnce(new Error('Load failed'))
+
+    const { result } = renderHook(() => useDraftManager(defaultOptions))
+
+    await act(async () => {
+      await result.current.handleReload()
+    })
+
+    expect(mockSetBusy).toHaveBeenCalledWith(false)
+    consoleErrorSpy.mockRestore()
+  })
+
+  it('does not reload when no currentEntry', async () => {
+    const { result } = renderHook(() =>
+      useDraftManager({ ...defaultOptions, currentEntry: undefined }),
+    )
+
+    await act(async () => {
+      await result.current.handleReload()
+    })
+
+    expect(mockLoadEntry).not.toHaveBeenCalled()
+  })
+
+  it('updates storageKey when branchName changes', () => {
+    const { result, rerender } = renderHook((props) => useDraftManager(props), {
+      initialProps: defaultOptions,
+    })
+
+    act(() => {
+      result.current.setDrafts({ abc123def456: { title: 'Draft' } })
+    })
+
+    expect(window.localStorage.getItem('canopycms:drafts:main')).toBeTruthy()
+
+    rerender({ ...defaultOptions, branchName: 'feature' })
+
+    waitFor(() => {
+      expect(window.localStorage.getItem('canopycms:drafts:feature')).toBeTruthy()
+    })
+  })
+})

package/src/editor/hooks/useDraftManager.ts

@@ -0,0 +1,259 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { notifications } from '@mantine/notifications'
+import type { EditorEntry } from '../Editor'
+import type { LogicalPath } from '../../paths/types'
+import type { FormValue } from '../FormRenderer'
+import { getNotificationDuration } from '../utils/env'
+
+export interface UseDraftManagerOptions {
+  branchName: string
+  selectedPath: string
+  currentEntry: EditorEntry | undefined
+  entries: EditorEntry[]
+  initialValues?: Record<string, FormValue>
+  loadEntry: (entry: EditorEntry) => Promise<FormValue>
+  saveEntry: (entry: EditorEntry, value: FormValue) => Promise<FormValue>
+  setBusy: (busy: boolean) => void
+}
+
+export interface UseDraftManagerReturn {
+  drafts: Record<string, FormValue>
+  setDrafts: React.Dispatch<React.SetStateAction<Record<string, FormValue>>>
+  loadedValues: Record<string, FormValue>
+  setLoadedValues: React.Dispatch<React.SetStateAction<Record<string, FormValue>>>
+  selectedValue: FormValue | undefined
+  loadedValue: FormValue | undefined
+  effectiveValue: FormValue | undefined
+  modifiedCount: number
+  editedFiles: Array<{ path: LogicalPath; label: string }>
+  handleSave: () => Promise<void>
+  handleDiscardDrafts: () => void
+  handleDiscardFileDraft: () => void
+  handleReload: () => Promise<void>
+  isDirtyForEntry: (entryPath: string) => boolean
+  isSelectedDirty: () => boolean
+}
+
+/**
+ * Custom hook for managing draft state (localStorage persistence, save/discard).
+ *
+ * Handles:
+ * - Draft state management
+ * - localStorage persistence (restore on mount, persist on change)
+ * - Save/discard operations
+ * - Reload from server
+ * - Computed values (selectedValue, effectiveValue, modifiedCount, editedFiles)
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   drafts,
+ *   effectiveValue,
+ *   modifiedCount,
+ *   handleSave,
+ *   handleDiscardDrafts
+ * } = useDraftManager({
+ *   branchName,
+ *   selectedPath,
+ *   currentEntry,
+ *   entries,
+ *   loadEntry,
+ *   saveEntry,
+ *   setBusy
+ * })
+ * ```
+ */
+export function useDraftManager(options: UseDraftManagerOptions): UseDraftManagerReturn {
+  const [drafts, setDrafts] = useState<Record<string, FormValue>>(() => options.initialValues ?? {})
+  const [loadedValues, setLoadedValues] = useState<Record<string, FormValue>>({})
+
+  const storageKey = useMemo(() => `canopycms:drafts:${options.branchName}`, [options.branchName])
+
+  // Draft keys are now content IDs, not paths
+  const currentId = options.currentEntry?.contentId
+  const selectedValue = currentId ? drafts[currentId] : undefined
+  const loadedValue = currentId ? loadedValues[currentId] : undefined
+  const effectiveValue = selectedValue ?? loadedValue
+
+  const modifiedCount = useMemo(() => Object.keys(drafts).length, [drafts])
+
+  const editedFiles = useMemo(() => {
+    const draftIds = Object.keys(drafts)
+    if (draftIds.length === 0) return []
+    return draftIds
+      .map((id) => {
+        const entry = options.entries.find((e) => e.contentId === id)
+        return entry ? { path: entry.path, label: entry.label } : null
+      })
+      .filter((x): x is { path: LogicalPath; label: string } => x !== null)
+  }, [drafts, options.entries])
+
+  // Clear drafts when branch changes (before localStorage restore)
+  const prevBranchRef = useRef(options.branchName)
+  useEffect(() => {
+    if (prevBranchRef.current && prevBranchRef.current !== options.branchName) {
+      setDrafts({})
+      setLoadedValues({})
+    }
+    prevBranchRef.current = options.branchName
+  }, [options.branchName])
+
+  // Restore drafts from localStorage on mount or when storageKey changes
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    try {
+      const raw = window.localStorage.getItem(storageKey)
+      if (raw) {
+        const parsed = JSON.parse(raw) as Record<string, FormValue>
+        setDrafts((prev) => ({ ...prev, ...parsed }))
+      }
+    } catch (err) {
+      console.warn('Failed to restore drafts', err)
+    }
+  }, [storageKey])
+
+  // Persist drafts to localStorage whenever they change
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(drafts))
+    } catch (err) {
+      console.warn('Failed to persist drafts', err)
+    }
+  }, [drafts, storageKey])
+
+  const handleSave = async () => {
+    if (!options.currentEntry || !effectiveValue || !currentId) return
+    options.setBusy(true)
+    try {
+      const saved = await options.saveEntry(options.currentEntry, effectiveValue)
+      setDrafts((prev) => ({ ...prev, [currentId]: saved }))
+      setLoadedValues((prev) => ({ ...prev, [currentId]: saved }))
+      notifications.show({
+        message: 'Saved',
+        color: 'green',
+        autoClose: getNotificationDuration(4000),
+        withCloseButton: true,
+      })
+    } catch (err) {
+      console.error(err)
+      notifications.show({
+        message: 'Save failed',
+        color: 'red',
+        autoClose: getNotificationDuration(6000),
+        withCloseButton: true,
+      })
+    } finally {
+      options.setBusy(false)
+    }
+  }
+
+  const handleDiscardDrafts = () => {
+    setDrafts({})
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.removeItem(storageKey)
+      }
+    } catch (err) {
+      console.warn('Failed to clear drafts', err)
+    }
+    notifications.show({
+      message: 'Drafts cleared',
+      color: 'blue',
+      autoClose: getNotificationDuration(3000),
+      withCloseButton: true,
+    })
+  }
+
+  const handleDiscardFileDraft = () => {
+    if (!currentId) return
+    setDrafts((prev) => {
+      const next = { ...prev }
+      delete next[currentId]
+      return next
+    })
+    try {
+      if (typeof window !== 'undefined') {
+        const raw = window.localStorage.getItem(storageKey)
+        if (raw) {
+          const parsed = JSON.parse(raw) as Record<string, FormValue>
+          delete parsed[currentId]
+          window.localStorage.setItem(storageKey, JSON.stringify(parsed))
+        }
+      }
+    } catch (err) {
+      console.warn('Failed to clear draft for file', err)
+    }
+    notifications.show({
+      message: 'Draft cleared for file',
+      color: 'blue',
+      autoClose: getNotificationDuration(3000),
+      withCloseButton: true,
+    })
+  }
+
+  const handleReload = async () => {
+    if (!options.currentEntry || !currentId) return
+    options.setBusy(true)
+    try {
+      const loaded = await options.loadEntry(options.currentEntry)
+      setLoadedValues((prev) => ({ ...prev, [currentId]: loaded }))
+      setDrafts((prev) => ({ ...prev, [currentId]: loaded }))
+      notifications.show({
+        message: 'Reloaded',
+        color: 'blue',
+        autoClose: getNotificationDuration(3000),
+        withCloseButton: true,
+      })
+    } catch (err) {
+      console.error(err)
+      notifications.show({
+        message: 'Reload failed',
+        color: 'red',
+        autoClose: getNotificationDuration(6000),
+        withCloseButton: true,
+      })
+    } finally {
+      options.setBusy(false)
+    }
+  }
+
+  // Compute dirty state for a given entry
+  const isDirtyForEntry = (entryPath: string): boolean => {
+    // Find entry by path to get its content ID
+    const entry = options.entries.find((e) => e.path === entryPath)
+    if (!entry) return false
+
+    const id = entry.contentId
+    if (!drafts[id]) return false
+    return !loadedValues[id] || JSON.stringify(drafts[id]) !== JSON.stringify(loadedValues[id])
+  }
+
+  // Convenience helper for checking current selection
+  const isSelectedDirty = (): boolean => {
+    if (!currentId) return false
+    if (!drafts[currentId]) return false
+    return (
+      !loadedValues[currentId] ||
+      JSON.stringify(drafts[currentId]) !== JSON.stringify(loadedValues[currentId])
+    )
+  }
+
+  return {
+    drafts,
+    setDrafts,
+    loadedValues,
+    setLoadedValues,
+    selectedValue,
+    loadedValue,
+    effectiveValue,
+    modifiedCount,
+    editedFiles,
+    handleSave,
+    handleDiscardDrafts,
+    handleDiscardFileDraft,
+    handleReload,
+    isDirtyForEntry,
+    isSelectedDirty,
+  }
+}