refactor: split NoteEditor into focused components + consolidate contexts
Phase 1: NoteEditor Split (64KB → 9 focused components) - components/note-editor/: types.ts, context, toolbar, title-block, content-area, metadata-section, full-page, dialog compositions - Maintains backwards compatibility via re-export from note-editor.tsx Phase 2: Context Consolidation (5 → 3 contexts) - NotebooksContext absorbs LabelContext (labels CRUD) - EditorUIContext merges HomeViewContext + NotebookDragContext - Removed: LabelContext, home-view-context, notebook-drag-context Phase 3: React Query Infrastructure - Added QueryProvider with @tanstack/react-query - lib/query-keys.ts: centralized query key definitions - lib/query-hooks.ts: useNotes, useNotebooksQuery, useLabelsQuery - lib/use-refresh.ts: hybrid invalidateQueries + triggerRefresh helper - NotebooksContext: invalidateQueries on mutations (with triggerRefresh fallback) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Antigravity
@@ -1,9 +1,13 @@
|
||||
'use client'
|
||||
|
||||
import { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react'
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import type { Notebook, Label, Note } from '@/lib/types'
|
||||
import { LabelColorName, LABEL_COLORS } from '@/lib/types'
|
||||
import { getHashColor } from '@/lib/utils'
|
||||
import { useNoteRefresh } from './NoteRefreshContext'
|
||||
import { toast } from 'sonner'
|
||||
import { queryKeys } from '@/lib/query-keys'
|
||||
|
||||
// ===== INPUT TYPES =====
|
||||
export interface CreateNotebookInput {
|
||||
@@ -39,6 +43,15 @@ export interface NotebooksContextValue {
|
||||
isMovingNote: boolean
|
||||
error: string | null
|
||||
|
||||
// Labels from /api/labels (merged from LabelContext)
|
||||
labels: Label[]
|
||||
loading: boolean
|
||||
notebookId: string | null
|
||||
setNotebookId: (notebookId: string | null) => void
|
||||
addLabel: (name: string, color?: LabelColorName, labelNotebookId?: string | null) => Promise<void>
|
||||
refreshLabels: () => Promise<void>
|
||||
getLabelColor: (name: string) => LabelColorName
|
||||
|
||||
// Actions: Notebooks
|
||||
createNotebookOptimistic: (data: CreateNotebookInput) => Promise<void>
|
||||
updateNotebook: (notebookId: string, data: UpdateNotebookInput) => Promise<void>
|
||||
@@ -79,6 +92,7 @@ interface NotebooksProviderProps {
|
||||
|
||||
export function NotebooksProvider({ children, initialNotebooks = [] }: NotebooksProviderProps) {
|
||||
// ===== BASE STATE =====
|
||||
const queryClient = useQueryClient()
|
||||
const [notebooks, setNotebooks] = useState<Notebook[]>(initialNotebooks)
|
||||
const [currentNotebook, setCurrentNotebook] = useState<Notebook | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
@@ -86,6 +100,11 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const { triggerRefresh, triggerNotebooksRefresh, notebooksRefreshKey } = useNoteRefresh()
|
||||
|
||||
// ===== LABEL STATE (merged from LabelContext) =====
|
||||
const [labels, setLabels] = useState<Label[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [notebookId, setNotebookId] = useState<string | null>(null)
|
||||
|
||||
// ===== DERIVED STATE =====
|
||||
const currentLabels = useMemo(() => {
|
||||
if (!currentNotebook) return []
|
||||
@@ -119,6 +138,34 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
if (notebooksRefreshKey > 0) loadNotebooks()
|
||||
}, [notebooksRefreshKey, loadNotebooks])
|
||||
|
||||
// ===== LABEL FETCHING (merged from LabelContext) =====
|
||||
const fetchLabels = useCallback(async (nbId: string | null) => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const url = new URL('/api/labels', window.location.origin)
|
||||
if (nbId) {
|
||||
url.searchParams.set('notebookId', nbId)
|
||||
}
|
||||
|
||||
const response = await fetch(url.toString(), {
|
||||
cache: 'no-store',
|
||||
credentials: 'include'
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.success && data.data) {
|
||||
setLabels(data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch labels:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchLabels(notebookId)
|
||||
}, [notebookId, fetchLabels])
|
||||
|
||||
// ===== ACTIONS: NOTEBOOKS =====
|
||||
const createNotebookOptimistic = useCallback(async (data: CreateNotebookInput) => {
|
||||
const response = await fetch('/api/notebooks', {
|
||||
@@ -131,11 +178,11 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
throw new Error('Failed to create notebook')
|
||||
}
|
||||
|
||||
// Reload notebooks from server to update sidebar state
|
||||
await loadNotebooks()
|
||||
// Invalidate notebooks cache — React Query will re-fetch in bg
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
|
||||
triggerNotebooksRefresh()
|
||||
triggerRefresh()
|
||||
}, [loadNotebooks, triggerNotebooksRefresh, triggerRefresh])
|
||||
}, [queryClient, triggerNotebooksRefresh, triggerRefresh])
|
||||
|
||||
const updateNotebook = useCallback(async (notebookId: string, data: UpdateNotebookInput) => {
|
||||
const response = await fetch(`/api/notebooks/${notebookId}`, {
|
||||
@@ -148,10 +195,10 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
throw new Error('Failed to update notebook')
|
||||
}
|
||||
|
||||
await loadNotebooks()
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
|
||||
triggerNotebooksRefresh()
|
||||
triggerRefresh()
|
||||
}, [loadNotebooks, triggerNotebooksRefresh, triggerRefresh])
|
||||
}, [queryClient, triggerNotebooksRefresh, triggerRefresh])
|
||||
|
||||
const deleteNotebook = useCallback(async (notebookId: string) => {
|
||||
const response = await fetch(`/api/notebooks/${notebookId}`, {
|
||||
@@ -162,10 +209,10 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
throw new Error('Failed to delete notebook')
|
||||
}
|
||||
|
||||
await loadNotebooks()
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
|
||||
triggerNotebooksRefresh()
|
||||
triggerRefresh()
|
||||
}, [loadNotebooks, triggerNotebooksRefresh, triggerRefresh])
|
||||
}, [queryClient, triggerNotebooksRefresh, triggerRefresh])
|
||||
|
||||
const updateNotebookOrderOptimistic = useCallback(async (notebookIds: string[]) => {
|
||||
const response = await fetch('/api/notebooks/reorder', {
|
||||
@@ -178,12 +225,47 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
throw new Error('Failed to update notebook order')
|
||||
}
|
||||
|
||||
await loadNotebooks()
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
|
||||
triggerNotebooksRefresh()
|
||||
triggerRefresh()
|
||||
}, [loadNotebooks, triggerNotebooksRefresh, triggerRefresh])
|
||||
}, [queryClient, triggerNotebooksRefresh, triggerRefresh])
|
||||
|
||||
// ===== ACTIONS: LABELS =====
|
||||
// ===== LABEL ACTIONS (merged from LabelContext) =====
|
||||
const addLabel = useCallback(async (name: string, color?: LabelColorName, labelNotebookId?: string | null) => {
|
||||
try {
|
||||
const labelColor = color || getHashColor(name);
|
||||
const finalNotebookId = labelNotebookId || notebookId
|
||||
|
||||
const response = await fetch('/api/labels', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, color: labelColor, notebookId: finalNotebookId }),
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.success && data.data) {
|
||||
setLabels(prev => [...prev, data.data])
|
||||
// Invalidate labels cache
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.labels(finalNotebookId) })
|
||||
triggerRefresh()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to add label:', error)
|
||||
throw error
|
||||
}
|
||||
}, [notebookId, queryClient, triggerRefresh])
|
||||
|
||||
const getLabelColor = useCallback((name: string): LabelColorName => {
|
||||
const label = labels.find(l => l.name.toLowerCase() === name.toLowerCase())
|
||||
return label?.color || 'gray'
|
||||
}, [labels])
|
||||
|
||||
const refreshLabels = useCallback(async () => {
|
||||
await fetchLabels(notebookId)
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.labels(notebookId) })
|
||||
triggerRefresh()
|
||||
}, [fetchLabels, notebookId, queryClient, triggerRefresh])
|
||||
|
||||
// ===== ACTIONS: LABELS (keep existing API-based ones for compatibility) =====
|
||||
const createLabel = useCallback(async (data: CreateLabelInput) => {
|
||||
const response = await fetch('/api/labels', {
|
||||
method: 'POST',
|
||||
@@ -196,8 +278,11 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
// Invalidate labels cache for this notebook
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.labels(data.notebookId) })
|
||||
triggerRefresh()
|
||||
return result
|
||||
}, [])
|
||||
}, [queryClient, triggerRefresh])
|
||||
|
||||
const updateLabel = useCallback(async (labelId: string, data: UpdateLabelInput) => {
|
||||
const response = await fetch(`/api/labels/${labelId}`, {
|
||||
@@ -209,7 +294,17 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update label')
|
||||
}
|
||||
}, [])
|
||||
|
||||
const result = await response.json()
|
||||
if (result.success && result.data) {
|
||||
setLabels(prev => prev.map(label =>
|
||||
label.id === labelId ? { ...label, ...result.data } : label
|
||||
))
|
||||
}
|
||||
// Invalidate labels cache
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.labels(notebookId) })
|
||||
triggerRefresh()
|
||||
}, [notebookId, queryClient, triggerRefresh])
|
||||
|
||||
const deleteLabel = useCallback(async (labelId: string) => {
|
||||
const response = await fetch(`/api/labels/${labelId}`, {
|
||||
@@ -219,23 +314,30 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete label')
|
||||
}
|
||||
}, [])
|
||||
|
||||
setLabels(prev => prev.filter(label => label.id !== labelId))
|
||||
// Invalidate labels cache
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.labels(notebookId) })
|
||||
triggerRefresh()
|
||||
}, [notebookId, queryClient, triggerRefresh])
|
||||
|
||||
// ===== ACTIONS: NOTES =====
|
||||
const moveNoteToNotebookOptimistic = useCallback(async (noteId: string, notebookId: string | null) => {
|
||||
const moveNoteToNotebookOptimistic = useCallback(async (noteId: string, targetNotebookId: string | null) => {
|
||||
setIsMovingNote(true)
|
||||
try {
|
||||
const response = await fetch(`/api/notes/${noteId}/move`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ notebookId }),
|
||||
body: JSON.stringify({ notebookId: targetNotebookId }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to move note')
|
||||
}
|
||||
|
||||
await loadNotebooks()
|
||||
// Invalidate notebooks and notes cache
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.notes(null) }) // notes list
|
||||
triggerNotebooksRefresh()
|
||||
triggerRefresh()
|
||||
} catch (error) {
|
||||
@@ -244,7 +346,7 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
} finally {
|
||||
setIsMovingNote(false)
|
||||
}
|
||||
}, [loadNotebooks, triggerRefresh])
|
||||
}, [queryClient, triggerRefresh, triggerNotebooksRefresh])
|
||||
|
||||
// ===== ACTIONS: AI (STUBS) =====
|
||||
const suggestNotebookForNote = useCallback(async (_noteContent: string) => {
|
||||
@@ -265,6 +367,13 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
isLoading,
|
||||
isMovingNote,
|
||||
error,
|
||||
labels,
|
||||
loading,
|
||||
notebookId,
|
||||
setNotebookId,
|
||||
addLabel,
|
||||
refreshLabels,
|
||||
getLabelColor,
|
||||
createNotebookOptimistic,
|
||||
updateNotebook,
|
||||
deleteNotebook,
|
||||
@@ -284,6 +393,12 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
isLoading,
|
||||
isMovingNote,
|
||||
error,
|
||||
labels,
|
||||
loading,
|
||||
notebookId,
|
||||
addLabel,
|
||||
refreshLabels,
|
||||
getLabelColor,
|
||||
createNotebookOptimistic,
|
||||
updateNotebook,
|
||||
deleteNotebook,
|
||||
@@ -302,4 +417,4 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
|
||||
{children}
|
||||
</NotebooksContext.Provider>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user