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

src/App.tsx

@@ -7,19 +7,18 @@ import FloatingButton from './components/FloatingButton'
 function App() {
   const { notes, addNote, updateNote, deleteNote } = useNotes()
   const [selectedId, setSelectedId] = useState<number | null>(null)
-  const [createdId, setCreatedId] = useState<number | null>(null)
+  const [creating, setCreating] = useState(false)
 
-  const selectedNote = notes.find((note) => note.id === selectedId) ?? null
+  const selectedNote =
+    selectedId === null ? null : (notes.find((note) => note.id === selectedId) ?? null)
 
-  const createNote = () => {
-    const note = addNote()
+  const createNote = () => setCreating(true)
+  const cancelCreate = () => setCreating(false)
+
+  const handleCreate = (title: string, content: string) => {
+    const note = addNote(title, content)
+    setCreating(false)
     setSelectedId(note.id)
-    setCreatedId(note.id)
-  }
-
-  const handleUpdate = (id: number, patch: Parameters<typeof updateNote>[1]) => {
-    updateNote(id, patch)
-    if (id === createdId) setCreatedId(null)
   }
 
   const handleDelete = (id: number) => {
@@ -27,14 +26,19 @@ function App() {
     setSelectedId(null)
   }
 
+  const goBack = () => {
+    if (creating) cancelCreate()
+    else setSelectedId(null)
+  }
+
   return (
     <main className="mx-auto w-full max-w-2xl flex flex-col min-h-dvh pb-28">
       <header className="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3">
-        {selectedNote ? (
+        {creating || selectedNote ? (
           <div className="flex items-center gap-1">
             <button
               type="button"
-              onClick={() => setSelectedId(null)}
+              onClick={goBack}
               aria-label="Retour"
               className="flex items-center justify-center w-11 h-11 -ml-2 rounded-full text-xl text-gray-700 hover:bg-gray-100 active:bg-gray-200"
             >
@@ -48,12 +52,20 @@ function App() {
       </header>
 
       <section className="flex-1 px-4 py-4">
-        {selectedNote ? (
+        {creating ? (
           <NoteEditor
+            key="create"
+            mode="create"
+            onCreate={handleCreate}
+            onCancelCreate={cancelCreate}
+          />
+        ) : selectedNote ? (
+          <NoteEditor
+            key={selectedNote.id}
+            mode="edit"
             note={selectedNote}
-            onUpdate={handleUpdate}
+            onUpdate={updateNote}
             onDelete={handleDelete}
-            autoEdit={selectedId === createdId}
           />
         ) : (
           <NoteList notes={notes} onSelect={setSelectedId} />