From 9f2f33cb877e6be16a66c033f3aa11264c8f11b3 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Tue, 7 Feb 2023 01:05:45 +0100
Subject: [PATCH] extract FiltreDepartement in own file

---
 src/routes/Liste/FiltreDepartement.tsx        | 34 ++++++++
 .../{ListeResistants.css => Liste/index.css}  |  0
 src/routes/Liste/index.tsx                    | 45 +++++++++++
 src/routes/ListeResistants.tsx                | 78 -------------------
 4 files changed, 79 insertions(+), 78 deletions(-)
 create mode 100644 src/routes/Liste/FiltreDepartement.tsx
 rename src/routes/{ListeResistants.css => Liste/index.css} (100%)
 create mode 100644 src/routes/Liste/index.tsx
 delete mode 100644 src/routes/ListeResistants.tsx

diff --git a/src/routes/Liste/FiltreDepartement.tsx b/src/routes/Liste/FiltreDepartement.tsx
new file mode 100644
index 0000000..4d28f82
--- /dev/null
+++ b/src/routes/Liste/FiltreDepartement.tsx
@@ -0,0 +1,34 @@
+import {Select} from "@mantine/core";
+import {IconMapPin} from "@tabler/icons-react";
+import React from "react";
+
+export const FiltreDepartement = (props: { onChange: (value: string) => void }) => <Select
+    placeholder="Filtrer par département"
+    onChange={props.onChange}
+    clearable
+    searchable
+    nothingFound="Aucun résistant ici"
+    icon={<IconMapPin/>}
+    data={[
+        {label: "Ariège", value: "Ariège"},
+        {label: "Ardèche", value: "Ardèche"},
+        {label: "Aude", value: "Aude"},
+        {label: "Aveyron", value: "Aveyron"},
+        {label: "Creuse", value: "Creuse"},
+        {label: "Deux-Sèvres", value: "Deux-Sèvres"},
+        {label: "Haute-Garonne", value: "Haute-Garonne"},
+        {label: "Haute-Savoie", value: "Haute-Savoie"},
+        {label: "Haute-Vienne", value: "Haute-Vienne"},
+        {label: "Ille-et-Vilaine", value: "Ille-et-Vilaine"},
+        {label: "Loire-Atlantique", value: "Loire-Atlantique"},
+        {label: "Lot", value: "Lot"},
+        {label: "Maine-et-Loire", value: "Maine-et-Loire"},
+        {label: "Meurthe-et-Moselle", value: "Meurthe-et-Moselle"},
+        {label: "Morbihan", value: "Morbihan"},
+        {label: "Puy-de-Dôme", value: "Puy-de-Dôme"},
+        {label: "Seine-et-Marne", value: "Seine-et-Marne"},
+        {label: "Tarn", value: "Tarn"},
+        {label: "Vaucluse", value: "Vaucluse"},
+        {label: "Vendée", value: "Vendée"},
+    ]}
+/>;
diff --git a/src/routes/ListeResistants.css b/src/routes/Liste/index.css
similarity index 100%
rename from src/routes/ListeResistants.css
rename to src/routes/Liste/index.css
diff --git a/src/routes/Liste/index.tsx b/src/routes/Liste/index.tsx
new file mode 100644
index 0000000..d986ab3
--- /dev/null
+++ b/src/routes/Liste/index.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import {Outlet, useLoaderData} from "react-router";
+import {ResistantRow} from "../ResistantRow";
+import {Resistant} from "../../Resistant";
+import {Group} from "@mantine/core";
+import {FiltreDepartement} from "./FiltreDepartement";
+
+export const resistantsLoader = async () => {
+    const spreadsheetId = '1GL1MBChnwNn0t8WtKK5M3PbtCJ_bTJRhoTwAI9jeWck'
+    let sheetName = "RésistantsW";
+    const parser = new PublicGoogleSheetsParser()
+    const resistants = await parser.parse(spreadsheetId, sheetName);
+    return { resistants }
+}
+
+const normalize = (text: string) => (text || "")
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+
+export const ListeResistants = () => {
+    const { resistants } = useLoaderData() as { resistants: Resistant[] }
+    const [departement, setDepartement] = React.useState<string|null>(null)
+    const [nom, setNom] = React.useState<string|undefined>(undefined)
+
+    const filtreNom = (event: React.ChangeEvent<HTMLInputElement>) => setNom(event.target.value)
+
+    return (
+        <>
+            <div id="listeResistants">
+                <Group>
+                    Nom: <input type="text" name="nom" value={nom} onChange={filtreNom}/>
+                    &nbsp;
+                    <FiltreDepartement onChange={setDepartement}/>
+                </Group>
+
+                {resistants
+                    .filter(r => !nom || normalize(r.noms).includes(normalize(nom.toLowerCase())))
+                    .filter(r => !departement || normalize(r.departement).includes(normalize(departement)))
+                    .map((r) => <ResistantRow resistant={r} key={r.noms}/>)}
+                <Outlet/>
+            </div>
+        </>
+    );
+};
diff --git a/src/routes/ListeResistants.tsx b/src/routes/ListeResistants.tsx
deleted file mode 100644
index 6f12543..0000000
--- a/src/routes/ListeResistants.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import { Outlet, useLoaderData } from "react-router";
-import {ResistantRow} from "./ResistantRow";
-import {Resistant} from "../Resistant";
-import {Group, Select} from "@mantine/core";
-import { IconMapPin } from "@tabler/icons-react";
-
-export const resistantsLoader = async () => {
-    const spreadsheetId = '1GL1MBChnwNn0t8WtKK5M3PbtCJ_bTJRhoTwAI9jeWck'
-    let sheetName = "RésistantsW";
-    const parser = new PublicGoogleSheetsParser()
-    const resistants = await parser.parse(spreadsheetId, sheetName);
-    return { resistants }
-}
-
-function FiltreDepartement(props: { onChange:  (value: string) => void }) {
-    return <Select
-        placeholder="Filtrer par département"
-        onChange={props.onChange}
-        clearable
-        searchable
-        nothingFound="Aucun résistant ici"
-        icon={<IconMapPin/>}
-        data={[
-            {label:"Ariège", value: "Ariège"},
-            {label:"Ardèche", value:"Ardèche"},
-            {label:"Aude", value:"Aude"},
-            {label:"Aveyron", value:"Aveyron"},
-            {label:"Creuse", value:"Creuse"},
-            {label:"Deux-Sèvres", value:"Deux-Sèvres"},
-            {label:"Haute-Garonne", value:"Haute-Garonne"},
-            {label:"Haute-Savoie", value:"Haute-Savoie"},
-            {label:"Haute-Vienne", value:"Haute-Vienne"},
-            {label:"Ille-et-Vilaine", value:"Ille-et-Vilaine"},
-            {label:"Loire-Atlantique", value:"Loire-Atlantique"},
-            {label:"Lot", value:"Lot"},
-            {label:"Maine-et-Loire", value:"Maine-et-Loire"},
-            {label:"Meurthe-et-Moselle", value:"Meurthe-et-Moselle"},
-            {label:"Morbihan", value:"Morbihan"},
-            {label:"Puy-de-Dôme", value:"Puy-de-Dôme"},
-            {label:"Seine-et-Marne", value:"Seine-et-Marne"},
-            {label:"Tarn", value:"Tarn"},
-            {label:"Vaucluse", value:"Vaucluse"},
-            {label:"Vendée", value:"Vendée"},
-        ]}
-    />
-}
-
-const normalize = (text: string) => (text || "")
-    .toLowerCase()
-    .normalize("NFD")
-    .replace(/\p{Diacritic}/gu, "")
-
-export const ListeResistants = () => {
-    const { resistants } = useLoaderData() as { resistants: Resistant[] }
-    const [departement, setDepartement] = React.useState<string|null>(null)
-    const [nom, setNom] = React.useState<string|undefined>(undefined)
-
-    const filtreNom = (event: React.ChangeEvent<HTMLInputElement>) => setNom(event.target.value)
-
-    return (
-        <>
-            <div id="listeResistants">
-                <Group>
-                    Nom: <input type="text" name="nom" value={nom} onChange={filtreNom}/>
-                    &nbsp;
-                    <FiltreDepartement onChange={setDepartement}/>
-                </Group>
-
-                {resistants
-                    .filter(r => !nom || normalize(r.noms).includes(normalize(nom.toLowerCase())))
-                    .filter(r => !departement || normalize(r.departement).includes(normalize(departement)))
-                    .map((r) => <ResistantRow resistant={r} key={r.noms}/>)}
-                <Outlet/>
-            </div>
-        </>
-    );
-};