86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import { useState } from 'react'
|
|
import type { NotePatch } from './types/note'
|
|
import { useNotes } from './hooks/useNotes'
|
|
import NoteList from './components/NoteList'
|
|
import NoteEditor from './components/NoteEditor'
|
|
import FloatingButton from './components/FloatingButton'
|
|
|
|
function App() {
|
|
const { notes, addNote, updateNote, deleteNote } = useNotes()
|
|
const [selectedId, setSelectedId] = useState<number | null>(null)
|
|
const [creating, setCreating] = useState(false)
|
|
|
|
const selectedNote =
|
|
selectedId === null ? null : (notes.find((note) => note.id === selectedId) ?? null)
|
|
|
|
const createNote = () => setCreating(true)
|
|
const cancelCreate = () => setCreating(false)
|
|
|
|
const handleCreate = (title: string, content: string) => {
|
|
addNote(title, content)
|
|
setCreating(false)
|
|
}
|
|
|
|
const handleUpdate = (id: number, patch: NotePatch) => {
|
|
updateNote(id, patch)
|
|
setSelectedId(null)
|
|
}
|
|
|
|
const handleDelete = (id: number) => {
|
|
deleteNote(id)
|
|
setSelectedId(null)
|
|
}
|
|
|
|
const goBack = () => {
|
|
if (creating) cancelCreate()
|
|
else setSelectedId(null)
|
|
}
|
|
|
|
return (
|
|
<main className="mx-auto flex w-full max-w-2xl min-h-dvh flex-col pb-[calc(env(safe-area-inset-bottom)+7rem)]">
|
|
<header className="sticky top-0 z-10 border-b border-gray-200 bg-white/95 px-4 pb-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] backdrop-blur">
|
|
{creating || selectedNote ? (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
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"
|
|
>
|
|
←
|
|
</button>
|
|
<h1 className="text-lg font-semibold">Notes</h1>
|
|
</div>
|
|
) : (
|
|
<h1 className="text-lg font-semibold">Notes</h1>
|
|
)}
|
|
</header>
|
|
|
|
<section className="flex-1 px-4 py-4">
|
|
{creating ? (
|
|
<NoteEditor
|
|
key="create"
|
|
mode="create"
|
|
onCreate={handleCreate}
|
|
onCancelCreate={cancelCreate}
|
|
/>
|
|
) : selectedNote ? (
|
|
<NoteEditor
|
|
key={selectedNote.id}
|
|
mode="edit"
|
|
note={selectedNote}
|
|
onUpdate={handleUpdate}
|
|
onDelete={handleDelete}
|
|
/>
|
|
) : (
|
|
<NoteList notes={notes} onSelect={setSelectedId} />
|
|
)}
|
|
</section>
|
|
|
|
<FloatingButton onClick={createNote} />
|
|
</main>
|
|
)
|
|
}
|
|
|
|
export default App
|