From 25f29d1016a6083f97d3ed094142ff1ca9faf775 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Wed, 31 Dec 2025 13:31:46 +0900 Subject: feat(client): add EditNoteModal for editing note-based cards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create EditNoteModal component that loads note and field values - Update DeckDetailPage to use EditNoteModal for cards with noteId - Keep EditCardModal for legacy cards without note association - Add visual indicator for reversed cards in card list - Add comprehensive tests for EditNoteModal 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/client/components/EditNoteModal.tsx | 352 ++++++++++++++++++++++++++++++++ 1 file changed, 352 insertions(+) create mode 100644 src/client/components/EditNoteModal.tsx (limited to 'src/client/components/EditNoteModal.tsx') diff --git a/src/client/components/EditNoteModal.tsx b/src/client/components/EditNoteModal.tsx new file mode 100644 index 0000000..5bd864d --- /dev/null +++ b/src/client/components/EditNoteModal.tsx @@ -0,0 +1,352 @@ +import { faSpinner } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { type FormEvent, useCallback, useEffect, useState } from "react"; +import { ApiClientError, apiClient } from "../api"; + +interface NoteField { + id: string; + name: string; + order: number; +} + +interface NoteType { + id: string; + name: string; + frontTemplate: string; + backTemplate: string; + isReversible: boolean; + fields: NoteField[]; +} + +interface NoteFieldValue { + id: string; + noteId: string; + noteFieldTypeId: string; + value: string; +} + +interface NoteWithFieldValues { + id: string; + deckId: string; + noteTypeId: string; + fieldValues: NoteFieldValue[]; +} + +interface EditNoteModalProps { + isOpen: boolean; + deckId: string; + noteId: string | null; + onClose: () => void; + onNoteUpdated: () => void; +} + +export function EditNoteModal({ + isOpen, + deckId, + noteId, + onClose, + onNoteUpdated, +}: EditNoteModalProps) { + const [note, setNote] = useState(null); + const [noteType, setNoteType] = useState(null); + const [fieldValues, setFieldValues] = useState>({}); + const [error, setError] = useState(null); + const [isLoadingNote, setIsLoadingNote] = useState(false); + const [isLoadingNoteType, setIsLoadingNoteType] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); + + const fetchNoteTypeDetails = useCallback(async (noteTypeId: string) => { + setIsLoadingNoteType(true); + setError(null); + + try { + const authHeader = apiClient.getAuthHeader(); + if (!authHeader) { + throw new ApiClientError("Not authenticated", 401); + } + + const res = await fetch(`/api/note-types/${noteTypeId}`, { + headers: authHeader, + }); + + if (!res.ok) { + const errorBody = await res.json().catch(() => ({})); + throw new ApiClientError( + (errorBody as { error?: string }).error || + `Request failed with status ${res.status}`, + res.status, + ); + } + + const data = await res.json(); + setNoteType(data.noteType); + } catch (err) { + if (err instanceof ApiClientError) { + setError(err.message); + } else { + setError("Failed to load note type details. Please try again."); + } + } finally { + setIsLoadingNoteType(false); + } + }, []); + + const fetchNote = useCallback(async () => { + if (!noteId) return; + + setIsLoadingNote(true); + setError(null); + + try { + const authHeader = apiClient.getAuthHeader(); + if (!authHeader) { + throw new ApiClientError("Not authenticated", 401); + } + + const res = await fetch(`/api/decks/${deckId}/notes/${noteId}`, { + headers: authHeader, + }); + + if (!res.ok) { + const errorBody = await res.json().catch(() => ({})); + throw new ApiClientError( + (errorBody as { error?: string }).error || + `Request failed with status ${res.status}`, + res.status, + ); + } + + const data = await res.json(); + setNote(data.note); + + // Initialize field values from note + const initialValues: Record = {}; + for (const fv of data.note.fieldValues) { + initialValues[fv.noteFieldTypeId] = fv.value; + } + setFieldValues(initialValues); + + // Fetch note type details + await fetchNoteTypeDetails(data.note.noteTypeId); + } catch (err) { + if (err instanceof ApiClientError) { + setError(err.message); + } else { + setError("Failed to load note. Please try again."); + } + } finally { + setIsLoadingNote(false); + } + }, [noteId, deckId, fetchNoteTypeDetails]); + + useEffect(() => { + if (isOpen && noteId) { + fetchNote(); + } + }, [isOpen, noteId, fetchNote]); + + const resetForm = () => { + setNote(null); + setNoteType(null); + setFieldValues({}); + setError(null); + }; + + const handleClose = () => { + resetForm(); + onClose(); + }; + + const handleFieldChange = (fieldId: string, value: string) => { + setFieldValues((prev) => ({ + ...prev, + [fieldId]: value, + })); + }; + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + setError(null); + + if (!note) { + setError("Note data is not loaded."); + return; + } + + setIsSubmitting(true); + + try { + const authHeader = apiClient.getAuthHeader(); + if (!authHeader) { + throw new ApiClientError("Not authenticated", 401); + } + + // Trim all field values + const trimmedFields: Record = {}; + for (const [fieldId, value] of Object.entries(fieldValues)) { + trimmedFields[fieldId] = value.trim(); + } + + const res = await fetch(`/api/decks/${deckId}/notes/${note.id}`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + ...authHeader, + }, + body: JSON.stringify({ + fields: trimmedFields, + }), + }); + + if (!res.ok) { + const errorBody = await res.json().catch(() => ({})); + throw new ApiClientError( + (errorBody as { error?: string }).error || + `Request failed with status ${res.status}`, + res.status, + ); + } + + onNoteUpdated(); + handleClose(); + } catch (err) { + if (err instanceof ApiClientError) { + setError(err.message); + } else { + setError("Failed to update note. Please try again."); + } + } finally { + setIsSubmitting(false); + } + }; + + if (!isOpen || !noteId) { + return null; + } + + // Check if all required fields have values + const isFormValid = + noteType && + noteType.fields.length > 0 && + noteType.fields.every((field) => fieldValues[field.id]?.trim()); + + const isLoading = isLoadingNote || isLoadingNoteType; + + return ( +
{ + if (e.target === e.currentTarget) { + handleClose(); + } + }} + onKeyDown={(e) => { + if (e.key === "Escape") { + handleClose(); + } + }} + > +
+
+

+ Edit Note +

+ +
+ {error && ( +
+ {error} +
+ )} + + {/* Loading indicator */} + {isLoading && ( +
+
+ )} + + {/* Note Type Display (read-only) */} + {noteType && !isLoading && ( +
+ + Note Type + +
+ {noteType.name} + {noteType.isReversible ? " (reversed)" : ""} +
+
+ )} + + {/* Dynamic Field Inputs */} + {noteType && + !isLoading && + (noteType.fields.length === 0 ? ( +
+ This note type has no fields. +
+ ) : ( + noteType.fields + .sort((a, b) => a.order - b.order) + .map((field) => ( +
+ +