refactor: automate departement values in Select

src/routes/Liste/FiltreDepartement.tsx

@@ -1,34 +1,22 @@
 import {Select} from "@mantine/core";
 import {IconMapPin} from "@tabler/icons-react";
 import React from "react";
+import {Resistant} from "../../Resistant";
 
-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"},
-    ]}
-/>;
+interface Props {
+        resistants: Resistant[]
+        onChange: (value: string) => void
+}
+export const FiltreDepartement = ({resistants, onChange}: Props) =>
+    <Select
+        placeholder="Filtrer par département"
+        onChange={onChange}
+        clearable
+        searchable
+        nothingFound="Aucun résistant ici"
+        icon={<IconMapPin/>}
+        data={[...new Set(resistants.map(r => r.departement))]
+            .filter(Boolean)
+            .map(d => ({label: d, value: d}))
+        }
+    />

src/routes/Liste/index.tsx

@@ -32,7 +32,7 @@ export const ListeResistants = () => {
             <div id="listeResistants">
                 <Group position="center">
                     <TextInput icon={<IconUsers />} placeholder="Nom" onChange={filtreNom}/>
-                    <FiltreDepartement onChange={setDepartement}/>
+                    <FiltreDepartement resistants={resistants} onChange={setDepartement}/>
                 </Group>
 
                 <Separator />