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

extract FiltreDepartement in own file

proto-module-actu-react
Jalil Arfaoui 2023-02-07 01:05:45 +01:00
parent 3b2efbf0f6
commit 9f2f33cb87
4 changed files with 79 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/routes/Liste/FiltreDepartement.tsx Normal file
View File

@ -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"},
]}
/>;

0
src/routes/ListeResistants.css → src/routes/Liste/index.css
View File

45
src/routes/Liste/index.tsx Normal file
View File

@ -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>
</>
);
};

78
src/routes/ListeResistants.tsx
View File

@ -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>
</>
);
};