felix-vi
91 lines
2.3 KiB
React
91 lines
2.3 KiB
React
import { useState } from 'react'
|
|
|
|
const emptyForm = () => ({
|
|
title: '',
|
|
author: '',
|
|
year: new Date().getFullYear(),
|
|
genre: '',
|
|
read: false,
|
|
})
|
|
|
|
export function BookForm({ onSubmit }) {
|
|
const [form, setForm] = useState(() => emptyForm())
|
|
|
|
function handleSubmit(e) {
|
|
e.preventDefault()
|
|
if (!form.title.trim() || !form.author.trim()) return
|
|
onSubmit(form)
|
|
setForm(emptyForm())
|
|
}
|
|
|
|
return (
|
|
<form className="book-form" onSubmit={handleSubmit}>
|
|
<h2>Enregistrer un nouveau livre</h2>
|
|
<p className="book-form-story">Je veux enregistrer un nouveau livre</p>
|
|
<p className="book-form-api">
|
|
<code>POST /api/books</code>
|
|
<span className="book-form-api-note">
|
|
{' '}
|
|
(dans cette appli : enregistrement local, pas de serveur)
|
|
</span>
|
|
</p>
|
|
<div className="form-grid">
|
|
<label>
|
|
Titre
|
|
<input
|
|
required
|
|
value={form.title}
|
|
onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
|
|
placeholder="Ex. Les Misérables"
|
|
/>
|
|
</label>
|
|
<label>
|
|
Auteur·ice
|
|
<input
|
|
required
|
|
value={form.author}
|
|
onChange={(e) => setForm((f) => ({ ...f, author: e.target.value }))}
|
|
placeholder="Ex. Victor Hugo"
|
|
/>
|
|
</label>
|
|
<label>
|
|
Année
|
|
<input
|
|
type="number"
|
|
min={1000}
|
|
max={2100}
|
|
value={form.year}
|
|
onChange={(e) =>
|
|
setForm((f) => ({
|
|
...f,
|
|
year: Number(e.target.value) || f.year,
|
|
}))
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Genre
|
|
<input
|
|
value={form.genre}
|
|
onChange={(e) => setForm((f) => ({ ...f, genre: e.target.value }))}
|
|
placeholder="Roman, essai…"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label className="checkbox-row">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.read}
|
|
onChange={(e) => setForm((f) => ({ ...f, read: e.target.checked }))}
|
|
/>
|
|
Déjà lu
|
|
</label>
|
|
<div className="form-actions">
|
|
<button type="submit" className="btn primary">
|
|
Enregistrer (POST)
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|