feat(notes): require a title to create a note

src/components/NoteEditor.test.tsx

@@ -5,16 +5,30 @@ import type { Note } from '../types'
 
 const note: Note = { id: 42, title: 'Courses', content: 'Lait\nOeufs' }
 
-const renderEditor = (overrides: Partial<Note> = {}) => {
+const renderEdit = (overrides: Partial<Note> = {}) => {
   const onUpdate = vi.fn()
   const onDelete = vi.fn()
-  render(<NoteEditor note={{ ...note, ...overrides }} onUpdate={onUpdate} onDelete={onDelete} />)
+  render(
+    <NoteEditor
+      mode="edit"
+      note={{ ...note, ...overrides }}
+      onUpdate={onUpdate}
+      onDelete={onDelete}
+    />,
+  )
   return { onUpdate, onDelete }
 }
 
-describe('NoteEditor', () => {
+const renderCreate = () => {
+  const onCreate = vi.fn()
+  const onCancelCreate = vi.fn()
+  render(<NoteEditor mode="create" onCreate={onCreate} onCancelCreate={onCancelCreate} />)
+  return { onCreate, onCancelCreate }
+}
+
+describe('NoteEditor in edit mode', () => {
   it('displays the note title and content in read mode', () => {
-    renderEditor()
+    renderEdit()
 
     expect(screen.getByText('Courses')).toBeInTheDocument()
     expect(screen.getByText('Lait Oeufs')).toBeInTheDocument()
@@ -22,14 +36,14 @@ describe('NoteEditor', () => {
   })
 
   it('shows placeholders for a note without title or content', () => {
-    renderEditor({ title: '', content: '' })
+    renderEdit({ title: '', content: '' })
 
     expect(screen.getByText('Sans titre')).toBeInTheDocument()
     expect(screen.getByText('Note vide')).toBeInTheDocument()
   })
 
   it('switches to edit mode with prefilled fields', () => {
-    renderEditor()
+    renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
 
@@ -40,7 +54,7 @@ describe('NoteEditor', () => {
   })
 
   it('saves edits and calls onUpdate with the updated values', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Liste de courses' } })
@@ -52,7 +66,7 @@ describe('NoteEditor', () => {
   })
 
   it('saves when the form is submitted', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     const form = screen.getByLabelText('Titre').closest('form')!
@@ -61,8 +75,43 @@ describe('NoteEditor', () => {
     expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
   })
 
+  it('trims the title on save', () => {
+    const { onUpdate } = renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '  Courses  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
+  })
+
+  it('refuses saving when the title is empty', () => {
+    const { onUpdate } = renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+    expect(screen.getByLabelText('Titre')).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('clears the title error once a title is typed', () => {
+    renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Rempli' } })
+
+    expect(screen.queryByText('Le titre est obligatoire.')).not.toBeInTheDocument()
+  })
+
   it('cancels editing without calling onUpdate', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Non sauvegardé' } })
@@ -73,7 +122,7 @@ describe('NoteEditor', () => {
   })
 
   it('opens the delete confirmation when the × button is clicked', () => {
-    renderEditor()
+    renderEdit()
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
@@ -82,7 +131,7 @@ describe('NoteEditor', () => {
   })
 
   it('deletes the note after confirmation', () => {
-    const { onDelete } = renderEditor()
+    const { onDelete } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer' }))
@@ -92,7 +141,7 @@ describe('NoteEditor', () => {
   })
 
   it('does not delete when the confirmation is cancelled', () => {
-    const { onDelete } = renderEditor()
+    const { onDelete } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
@@ -101,3 +150,52 @@ describe('NoteEditor', () => {
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
   })
 })
+
+describe('NoteEditor in create mode', () => {
+  it('renders an empty form without read view or delete button', () => {
+    renderCreate()
+
+    expect(screen.getByLabelText('Titre')).toHaveValue('')
+    expect(screen.getByLabelText('Contenu')).toHaveValue('')
+    expect(screen.getByRole('button', { name: 'Enregistrer' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Éditer' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Supprimer la note' })).not.toBeInTheDocument()
+  })
+
+  it('creates the note with title and content on save', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Courses' } })
+    fireEvent.change(screen.getByLabelText('Contenu'), { target: { value: 'Lait' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).toHaveBeenCalledWith('Courses', 'Lait')
+  })
+
+  it('trims the title on create', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '  Courses  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).toHaveBeenCalledWith('Courses', '')
+  })
+
+  it('refuses creation when the title is empty', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+  })
+
+  it('cancels creation without creating the note', () => {
+    const { onCreate, onCancelCreate } = renderCreate()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(onCancelCreate).toHaveBeenCalled()
+  })
+})

src/components/NoteEditor.tsx

@@ -2,80 +2,142 @@ import { useState } from 'react'
 import type { Note } from '../types'
 import DeleteModal from './DeleteModal'
 
-interface NoteEditorProps {
+interface EditEditorProps {
+  mode: 'edit'
   note: Note
   onUpdate: (id: number, patch: Partial<Pick<Note, 'title' | 'content'>>) => void
   onDelete: (id: number) => void
-  autoEdit?: boolean
 }
 
-function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorProps) {
-  const [editing, setEditing] = useState(autoEdit)
+interface CreateEditorProps {
+  mode: 'create'
+  onCreate: (title: string, content: string) => void
+  onCancelCreate: () => void
+}
+
+type NoteEditorProps = EditEditorProps | CreateEditorProps
+
+interface NoteFormProps {
+  title: string
+  content: string
+  titleMissing: boolean
+  cancelLabel: string
+  onTitleChange: (value: string) => void
+  onContentChange: (value: string) => void
+  onCancel: () => void
+  onSubmit: () => void
+}
+
+const TITLE_REQUIRED_MESSAGE = 'Le titre est obligatoire.'
+
+function NoteForm({
+  title,
+  content,
+  titleMissing,
+  cancelLabel,
+  onTitleChange,
+  onContentChange,
+  onCancel,
+  onSubmit,
+}: NoteFormProps) {
+  return (
+    <form
+      className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
+      onSubmit={(event) => {
+        event.preventDefault()
+        onSubmit()
+      }}
+    >
+      <label className="flex flex-col gap-1">
+        <span className="text-sm font-medium text-gray-500">Titre</span>
+        <input
+          value={title}
+          onChange={(event) => onTitleChange(event.target.value)}
+          autoFocus
+          aria-invalid={titleMissing}
+          className={`w-full rounded-lg border px-3 py-3 text-base focus:outline-none focus:ring-2 ${
+            titleMissing
+              ? 'border-red-500 focus:ring-red-500/30'
+              : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/30'
+          }`}
+          placeholder="Sans titre"
+        />
+      </label>
+      {titleMissing && (
+        <span role="alert" className="text-sm text-red-600">
+          {TITLE_REQUIRED_MESSAGE}
+        </span>
+      )}
+      <label className="flex flex-col gap-1">
+        <span className="text-sm font-medium text-gray-500">Contenu</span>
+        <textarea
+          value={content}
+          onChange={(event) => onContentChange(event.target.value)}
+          className="w-full min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+          placeholder="Écrire ici…"
+        />
+      </label>
+      <div className="flex justify-end gap-3">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          type="submit"
+          className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
+        >
+          Enregistrer
+        </button>
+      </div>
+    </form>
+  )
+}
+
+function NoteEditor(props: NoteEditorProps) {
+  const [editing, setEditing] = useState(props.mode === 'create')
+  const [title, setTitle] = useState(props.mode === 'edit' ? props.note.title : '')
+  const [content, setContent] = useState(props.mode === 'edit' ? props.note.content : '')
+  const [titleMissing, setTitleMissing] = useState(false)
   const [confirmDelete, setConfirmDelete] = 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 handleTitleChange = (value: string) => {
+    setTitle(value)
+    if (titleMissing && value.trim() !== '') setTitleMissing(false)
   }
 
-  const cancel = () => {
-    setEditing(false)
+  const handleSubmit = () => {
+    if (title.trim() === '') {
+      setTitleMissing(true)
+      return
+    }
+    const safeTitle = title.trim()
+    if (props.mode === 'create') {
+      props.onCreate(safeTitle, content)
+    } else {
+      props.onUpdate(props.note.id, { title: safeTitle, content })
+      setEditing(false)
+    }
   }
 
-  const save = () => {
-    onUpdate(note.id, { title, content })
-    setEditing(false)
-  }
-
-  if (editing) {
+  if (props.mode === 'create' || editing) {
     return (
-      <form
-        className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
-        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 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
-            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 min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
-            placeholder="Écrire ici…"
-          />
-        </label>
-        <div className="flex justify-end gap-3">
-          <button
-            type="button"
-            onClick={cancel}
-            className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
-          >
-            Annuler
-          </button>
-          <button
-            type="submit"
-            className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
-          >
-            Enregistrer
-          </button>
-        </div>
-      </form>
+      <NoteForm
+        title={title}
+        content={content}
+        titleMissing={titleMissing}
+        cancelLabel="Annuler"
+        onTitleChange={handleTitleChange}
+        onContentChange={setContent}
+        onCancel={props.mode === 'create' ? props.onCancelCreate : () => setEditing(false)}
+        onSubmit={handleSubmit}
+      />
     )
   }
 
+  const { note } = props
   return (
     <article className="flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
       <div className="flex items-start justify-between gap-4">
@@ -95,7 +157,11 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
       <div className="flex justify-end">
         <button
           type="button"
-          onClick={startEditing}
+          onClick={() => {
+            setTitle(props.note.title)
+            setContent(props.note.content)
+            setEditing(true)
+          }}
           className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
         >
           Éditer
@@ -106,7 +172,7 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
         title={note.title}
         onConfirm={() => {
           setConfirmDelete(false)
-          onDelete(note.id)
+          props.onDelete(note.id)
         }}
         onCancel={() => setConfirmDelete(false)}
       />