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 département

proto-module-actu-react
Jalil Arfaoui 2023-01-30 01:26:39 +01:00
parent 63931a3660
commit 65f2a848b3
2 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/routes/ListeResistants.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import { Outlet, useLoaderData } from "react-router";
import {ResistantRow} from "./ResistantRow";
import {Resistant} from "../Resistant";
@ -10,14 +11,47 @@ export const resistantsLoader = async () => {
return { resistants }
}
function FiltreDepartement(props: { onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void }) {
return <select name="département" onChange={props.onChange}>
<option value="">Tous les départements</option>
<option value="Ariège">Ariège</option>
<option value="Ardèche">Ardèche</option>
<option value="Aude">Aude</option>
<option value="Aveyron">Aveyron</option>
<option value="Creuse">Creuse</option>
<option value="Sèvres">Deux-Sèvres</option>
<option value="Garonne">Haute-Garonne</option>
<option value="Savoie">Haute-Savoie</option>
<option value="Vienne">Haute-Vienne</option>
<option value="Vilaine">Ille-et-Vilaine</option>
<option value="Atlantique">Loire-Atlantique</option>
<option value="Lot">Lot</option>
<option value="Loire">Maine-et-Loire</option>
<option value="Moselle">Meurthe-et-Moselle</option>
<option value="Morbihan">Morbihan</option>
<option value="Dôme">Puy-de-Dôme</option>
<option value="Marne">Seine-et-Marne</option>
<option value="Tarn">Tarn</option>
<option value="Vaucluse">Vaucluse</option>
<option value="Vendée">Vendée</option>
</select>;
}
export const ListeResistants = () => {
const { resistants } = useLoaderData() as { resistants: Resistant[] }
const [departement, setDepartement] = React.useState<string|null>(null)
const filtreDepartements = (event: React.ChangeEvent<HTMLSelectElement>) => setDepartement(event.target.value)
return (
<>
<div id="listeResistants">
{resistants.map((r) => <ResistantRow resistant={r} key={r.noms} />)}
<Outlet />
<input type="text" name=""/>
<FiltreDepartement onChange={filtreDepartements}/>
{resistants
.filter(r => !departement || r.departement?.includes(departement))
.map((r) => <ResistantRow resistant={r} key={r.noms}/>)}
<Outlet/>
</div>
</>
);

2
src/routes/ResistantRow.tsx
View File

@ -13,7 +13,7 @@ export const ResistantRow = ({resistant}: Props) => {
<div className="sqs-block-content" id="yui_3_17_2_1_1674987238932_137">
<div className="image-block-outer-wrapper layout-caption-below design-layout-inline combination-animation-none individual-animation-none individual-text-animation-none sqs-narrow-width" data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1674987238932_136">
<figure className="sqs-block-image-figure intrinsic " style={{maxWidth: "2048px;"}} id="yui_3_17_2_1_1674987238932_135">
<figure className="sqs-block-image-figure intrinsic " style={{maxWidth: "2048px"}} id="yui_3_17_2_1_1674987238932_135">
<div className="image-block-wrapper" data-animation-role="image" id="yui_3_17_2_1_1674987238932_134">
<div className="sqs-image-shape-container-element has-aspect-ratio "