feat(notes): add note editor

src/components/NoteEditor.test.tsx

@@ -0,0 +1,73 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NoteEditor from './NoteEditor'
+import type { Note } from '../types'
+
+const note: Note = { id: 42, title: 'Courses', content: 'Lait\nOeufs' }
+
+const renderEditor = (overrides: Partial<Note> = {}) => {
+  const onUpdate = vi.fn()
+  render(<NoteEditor note={{ ...note, ...overrides }} onUpdate={onUpdate} />)
+  return { onUpdate }
+}
+
+describe('NoteEditor', () => {
+  it('displays the note title and content in read mode', () => {
+    renderEditor()
+
+    expect(screen.getByText('Courses')).toBeInTheDocument()
+    expect(screen.getByText('Lait Oeufs')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
+  })
+
+  it('shows placeholders for a note without title or content', () => {
+    renderEditor({ title: '', content: '' })
+
+    expect(screen.getByText('Sans titre')).toBeInTheDocument()
+    expect(screen.getByText('Note vide')).toBeInTheDocument()
+  })
+
+  it('switches to edit mode with prefilled fields', () => {
+    renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+
+    expect(screen.getByLabelText('Titre')).toHaveValue('Courses')
+    expect(screen.getByLabelText('Contenu')).toHaveValue('Lait\nOeufs')
+    expect(screen.getByRole('button', { name: 'Enregistrer' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Annuler' })).toBeInTheDocument()
+  })
+
+  it('saves edits and calls onUpdate with the updated values', () => {
+    const { onUpdate } = renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Liste de courses' } })
+    fireEvent.change(screen.getByLabelText('Contenu'), { target: { value: 'Pain' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Liste de courses', content: 'Pain' })
+    expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
+  })
+
+  it('saves when the form is submitted', () => {
+    const { onUpdate } = renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    const form = screen.getByLabelText('Titre').closest('form')!
+    fireEvent.submit(form)
+
+    expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
+  })
+
+  it('cancels editing without calling onUpdate', () => {
+    const { onUpdate } = renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Non sauvegardé' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(screen.getByText('Courses')).toBeInTheDocument()
+  })
+})

src/components/NoteEditor.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import type { Note } from '../types'
+
+interface NoteEditorProps {
+  note: Note
+  onUpdate: (id: number, patch: Partial<Pick<Note, 'title' | 'content'>>) => void
+}
+
+function NoteEditor({ note, onUpdate }: NoteEditorProps) {
+  const [editing, setEditing] = useState(false)
+  const [title, setTitle] = useState(note.title)
+  const [content, setContent] = useState(note.content)
+
+  const startEditing = () => {
+    setTitle(note.title)
+    setContent(note.content)
+    setEditing(true)
+  }
+
+  const cancel = () => {
+    setEditing(false)
+  }
+
+  const save = () => {
+    onUpdate(note.id, { title, content })
+    setEditing(false)
+  }
+
+  if (editing) {
+    return (
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault()
+          save()
+        }}
+      >
+        <label className="flex flex-col gap-1">
+          <span className="text-sm font-medium text-gray-500">Titre</span>
+          <input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            className="w-full border border-gray-300 rounded px-3 py-2"
+            placeholder="Sans titre"
+          />
+        </label>
+        <label className="flex flex-col gap-1">
+          <span className="text-sm font-medium text-gray-500">Contenu</span>
+          <textarea
+            value={content}
+            onChange={(event) => setContent(event.target.value)}
+            className="w-full border border-gray-300 rounded px-3 py-2 min-h-40"
+            placeholder="Écrire ici…"
+          />
+        </label>
+        <div className="flex justify-between">
+          <button
+            type="button"
+            onClick={cancel}
+            className="px-4 py-2 rounded border border-gray-300 text-gray-600"
+          >
+            Annuler
+          </button>
+          <button type="submit" className="px-4 py-2 rounded bg-blue-600 text-white">
+            Enregistrer
+          </button>
+        </div>
+      </form>
+    )
+  }
+
+  return (
+    <article className="flex flex-col gap-4">
+      <h2 className="text-2xl font-semibold">{note.title || 'Sans titre'}</h2>
+      <p className="whitespace-pre-wrap">
+        {note.content || <span className="text-gray-400 italic">Note vide</span>}
+      </p>
+      <div>
+        <button
+          type="button"
+          onClick={startEditing}
+          className="px-4 py-2 rounded bg-blue-600 text-white"
+        >
+          Éditer
+        </button>
+      </div>
+    </article>
+  )
+}
+
+export default NoteEditor