enfance-libre
/
resistants
mirror of https://framagit.org/enfance-libre/resistants
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: ajoute un filtre par nom

proto-module-actu-react
Jalil Arfaoui 2023-01-30 01:33:46 +01:00
parent 65f2a848b3
commit b7b3dc1f54
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/routes/ListeResistants.tsx
View File

@ -40,15 +40,19 @@ function FiltreDepartement(props: { onChange: (event: React.ChangeEvent<HTMLSele
export const ListeResistants = () => { export const ListeResistants = () => {
const { resistants } = useLoaderData() as { resistants: Resistant[] } const { resistants } = useLoaderData() as { resistants: Resistant[] }
const [departement, setDepartement] = React.useState<string|null>(null) const [departement, setDepartement] = React.useState<string|null>(null)
const [nom, setNom] = React.useState<string|null>(null)
const filtreDepartements = (event: React.ChangeEvent<HTMLSelectElement>) => setDepartement(event.target.value) const filtreDepartements = (event: React.ChangeEvent<HTMLSelectElement>) => setDepartement(event.target.value)
const filtreNom = (event: React.ChangeEvent<HTMLInputElement>) => setNom(event.target.value)
return ( return (
<> <>
<div id="listeResistants"> <div id="listeResistants">
<input type="text" name=""/> Nom: <input type="text" name="" onChange={filtreNom}/>
&nbsp;
<FiltreDepartement onChange={filtreDepartements}/> <FiltreDepartement onChange={filtreDepartements}/>
{resistants {resistants
.filter(r => !nom || r.noms?.toLowerCase().includes(nom.toLowerCase()))
.filter(r => !departement || r.departement?.includes(departement)) .filter(r => !departement || r.departement?.includes(departement))
.map((r) => <ResistantRow resistant={r} key={r.noms}/>)} .map((r) => <ResistantRow resistant={r} key={r.noms}/>)}
<Outlet/> <Outlet/>