Aubert Marvin
95 lines
2.7 KiB
React
95 lines
2.7 KiB
React
import { useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useGroups } from '../context/GroupsContext.jsx'
|
|
|
|
function formatDate(iso) {
|
|
try {
|
|
return new Intl.DateTimeFormat('fr-FR', {
|
|
dateStyle: 'short',
|
|
timeStyle: 'short',
|
|
}).format(new Date(iso))
|
|
} catch {
|
|
return iso || '—'
|
|
}
|
|
}
|
|
|
|
export default function GroupesPage() {
|
|
const { groups, groupTotalEuros, createGroup } = useGroups()
|
|
const [name, setName] = useState('')
|
|
const [err, setErr] = useState(null)
|
|
const [ok, setOk] = useState(null)
|
|
|
|
const sorted = [...groups].sort((a, b) =>
|
|
String(b.createdAt).localeCompare(String(a.createdAt)),
|
|
)
|
|
|
|
function handleCreate(e) {
|
|
e.preventDefault()
|
|
setErr(null)
|
|
setOk(null)
|
|
try {
|
|
const g = createGroup(name)
|
|
setName('')
|
|
setOk(`Groupe « ${g.name} » créé.`)
|
|
} catch (ex) {
|
|
setErr(ex?.message || 'Impossible de créer le groupe.')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="groupes-page">
|
|
<h2 className="page-title">Commandes groupées</h2>
|
|
<p className="page-lead">
|
|
Équivalent local de <code>POST /api/groups/:id/orders</code> : tu crées
|
|
un groupe, puis chacun ajoute sa « ligne » (montant + message). Stocké
|
|
dans <code>librairie-groups-v1</code>.
|
|
</p>
|
|
|
|
{err ? (
|
|
<p className="form-error" role="alert">
|
|
{err}
|
|
</p>
|
|
) : null}
|
|
{ok ? <p className="form-notice">{ok}</p> : null}
|
|
|
|
<section className="order-panel">
|
|
<h3 className="panel-title">Nouveau groupe</h3>
|
|
<form className="promo-form" onSubmit={handleCreate}>
|
|
<label>
|
|
Nom du groupe (ex. promo rentrée)
|
|
<input
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Lecteurs du 8e étage"
|
|
/>
|
|
</label>
|
|
<button type="submit" className="btn primary">
|
|
Créer le groupe
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section className="order-panel">
|
|
<h3 className="panel-title">Tes groupes</h3>
|
|
{sorted.length === 0 ? (
|
|
<p className="empty-state">Aucun groupe encore.</p>
|
|
) : (
|
|
<ul className="reviews-list">
|
|
{sorted.map((g) => (
|
|
<li key={g.id} className="reviews-item">
|
|
<p className="reviews-meta">{formatDate(g.createdAt)}</p>
|
|
<p className="reviews-text">
|
|
<Link to={`/groupes/${g.id}`}>{g.name}</Link>
|
|
{' · '}
|
|
Pool actuel ~{' '}
|
|
<strong>{groupTotalEuros(g.id).toFixed(2)} €</strong>
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|