From 65f2a848b37e847a3b008d3846f13e1021a17bc7 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 30 Jan 2023 01:26:39 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20ajoute=20un=20filtre=20d=C3=A9partement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/ListeResistants.tsx | 38 ++++++++++++++++++++++++++++++++--
 src/routes/ResistantRow.tsx    |  2 +-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/routes/ListeResistants.tsx b/src/routes/ListeResistants.tsx
index 2fcb09e..27e0812 100644
--- a/src/routes/ListeResistants.tsx
+++ b/src/routes/ListeResistants.tsx
@@ -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>
         </>
     );
diff --git a/src/routes/ResistantRow.tsx b/src/routes/ResistantRow.tsx
index 19270ab..ac56960 100644
--- a/src/routes/ResistantRow.tsx
+++ b/src/routes/ResistantRow.tsx
@@ -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 "