feat: remove list on home, and always open resistant in resistant page

Also:
use resistant.id in path instead of name
chande resistant ids to first names
proto-module-actu-react
Jalil Arfaoui 2023-05-13 23:06:58 +02:00
parent ef5ba738cb
commit 3db267acef
11 changed files with 112 additions and 71 deletions

View File

@ -2,6 +2,7 @@ import React from "react";
import { RouterProvider } from "react-router-dom";
import { ViewMode } from "./routes/ViewMode";
import { DisplayModeContext } from "./context/DisplayModeContext";
import { HomeContext } from "./context/HomeContext";
import { router } from "./router";
import "mapbox-gl/dist/mapbox-gl.css";
import "./style/SquareSpace/vars.css";
@ -16,16 +17,19 @@ import "./declarations";
interface Props {
defaultViewMode: ViewMode;
home: boolean;
}
export const App = ({ defaultViewMode }: Props) => {
export const App = ({ defaultViewMode, home }: Props) => {
const [viewMode, setViewMode] = React.useState<ViewMode>(defaultViewMode);
return (
<DisplayModeContext.Provider
value={{ mode: viewMode, setMode: setViewMode }}
>
<HomeContext.Provider value={{ isHome: home, setMode: () => {} }}>
<RouterProvider router={router} />
</HomeContext.Provider>
</DisplayModeContext.Provider>
);
};

View File

@ -0,0 +1,13 @@
import React from "react";
const defaultValue: HomeContextType = {
isHome: false,
setMode: () => {},
};
interface HomeContextType {
isHome: boolean;
setMode: (isHome: boolean) => void;
}
export const HomeContext = React.createContext<HomeContextType>(defaultValue);

View File

@ -0,0 +1,4 @@
import { Resistant } from "./Resistant";
export const getResistantPageUrl = (resistant: Resistant) =>
`https://www.enfance-libre.fr/#/${resistant.id}`;

View File

@ -3,20 +3,20 @@ import ReactDOM from "react-dom/client";
import { App } from "./App";
import { ViewMode } from "./routes/ViewMode";
const renderResistants = (defaultViewMode: ViewMode) => {
const renderResistants = (defaultViewMode: ViewMode, isHome: boolean) => {
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App defaultViewMode={defaultViewMode} />
<App defaultViewMode={defaultViewMode} home={isHome} />
</React.StrictMode>
);
};
const render = () => {
const defaultViewMode: ViewMode = location.href.includes("resistants")
? "photos"
: "map";
const isOnPageResistants = location.href.includes("resistants");
const defaultViewMode: ViewMode = isOnPageResistants ? "photos" : "map";
const isHome = !isOnPageResistants;
renderResistants(defaultViewMode);
renderResistants(defaultViewMode, isHome);
};
if ("Squarespace" in window) {

View File

@ -3,7 +3,7 @@ import { getResistantDeclarationUrl } from "./getResistantDeclarationUrl";
export const resistants: Resistant[] = [
{
id: "farhangi-bautista",
id: "ramin-marjorie",
noms: "Ramïn Farhangi et Marjorie Bautista",
enfants: "Zeÿa",
departement: "Ariège",
@ -19,7 +19,7 @@ export const resistants: Resistant[] = [
longitude: 1.40833,
},
{
id: "attias-perez",
id: "jonathan-caroline",
noms: "Jonathan Attias et Caroline Perez",
enfants: "Lia et Mani",
departement: "Haute-Vienne",
@ -35,7 +35,7 @@ export const resistants: Resistant[] = [
longitude: 0.79877,
},
{
id: "taveneau-blondeau",
id: "amelie-vincent",
noms: "Amélie Taveneau et Vincent Blondeau",
enfants: "Simon",
departement: "Maine-et-Loire",
@ -51,7 +51,7 @@ export const resistants: Resistant[] = [
longitude: -0.67314,
},
{
id: "vuillaume",
id: "marlene-benjamin",
noms: "Marlène et Benjamin Vuillaume",
enfants: "cinq enfants",
departement: "Meurthe et Moselle",
@ -66,7 +66,7 @@ export const resistants: Resistant[] = [
longitude: 6.06438,
},
{
id: "delhommeau",
id: "audreyanne-michael",
noms: "Audrey-Anne et Michaël Delhommeau",
enfants: "Inessa et Gatien",
departement: "Loire-Atlantique",
@ -82,7 +82,7 @@ export const resistants: Resistant[] = [
longitude: -1.43546,
},
{
id: "renaudeau",
id: "david-coralie",
noms: "David et Coralie Renaudeau",
enfants: "Lilou, Noa et Soan",
departement: "Deux-Sèvres",
@ -98,7 +98,7 @@ export const resistants: Resistant[] = [
longitude: -0.74299,
},
{
id: "chatelain",
id: "myriam-timothee",
noms: "Myriam et Timothée Chatelain",
enfants: "Sam et Mayan",
departement: "Haute-Savoie",
@ -113,7 +113,7 @@ export const resistants: Resistant[] = [
longitude: 5.93189,
},
{
id: "fremeaux",
id: "helene-f",
noms: "Hélène Frémeaux",
enfants: "Liyah et Ylann",
departement: "Seine-et-Marne",
@ -129,7 +129,7 @@ export const resistants: Resistant[] = [
longitude: 2.59012,
},
{
id: "delquie",
id: "sarah-jerome",
noms: "Sarah Piquart Delquié et Jérôme Delquié",
enfants: "Elouan et Liam",
departement: "Aude",
@ -145,7 +145,7 @@ export const resistants: Resistant[] = [
longitude: 2.39191,
},
{
id: "godart",
id: "florence-alexis",
noms: "Florence et Alexis Godart",
enfants: "Alissa et de Mélina",
departement: "Ille-et-Vilaine",
@ -161,7 +161,7 @@ export const resistants: Resistant[] = [
longitude: -2.06637,
},
{
id: "gondange",
id: "roseline-jonathan",
noms: "Roseline et Jonathan Gondange",
enfants: "Hanaé, Éline, Nael et Timoté",
departement: "Vaucluse",
@ -176,7 +176,7 @@ export const resistants: Resistant[] = [
longitude: 5.242,
},
{
id: "chapleau-lacot",
id: "emmanuelle-philippe",
noms: "Emmanuelle Chapleau et Philippe Lacot",
enfants: "Salma, Soren, Ezra et Romy",
departement: "Puy-de-Dôme",
@ -192,7 +192,7 @@ export const resistants: Resistant[] = [
longitude: 2.7651,
},
{
id: "bargibant",
id: "sita-pascal",
noms: "Sita et Pascal Bargibant",
enfants: "Aluna et Liara",
departement: "Morbihan",
@ -208,7 +208,7 @@ export const resistants: Resistant[] = [
longitude: -3.16379,
},
{
id: "vannier",
id: "mathilde-cyril",
noms: "Mathilde et Cyril Vannier",
enfants: "Naïs, Ëvy et Saël",
departement: "Ille-et-Vilaine",
@ -223,7 +223,7 @@ export const resistants: Resistant[] = [
longitude: -1.90139,
},
{
id: "couge",
id: "sylvaine-olivier",
noms: "Sylvaine et Olivier Cougé",
enfants: "Tanaë, Côme et Lune",
departement: "Vendée",
@ -239,7 +239,7 @@ export const resistants: Resistant[] = [
longitude: -1.57619,
},
{
id: "reboutier",
id: "julie-jeanchristophe",
noms: "Julie et Jean-Christophe Reboutier",
enfants: "Mona, Ewenn et Lukaz",
departement: "Morbihan",
@ -255,7 +255,7 @@ export const resistants: Resistant[] = [
longitude: -3.07123,
},
{
id: "cramer-gaudillere",
id: "marianne-denis",
noms: "Marianne Cramer et Denis Gaudillère",
enfants: "Amy et Nathan",
departement: "Tarn",
@ -271,7 +271,7 @@ export const resistants: Resistant[] = [
longitude: 2.31513,
},
{
id: "catalifaud-bouchet",
id: "mathilde-dorian",
noms: "Mathilde Catalifaud et Dorian Bouchet",
enfants: "Owen, Livia et Mira",
departement: "Lot",
@ -287,7 +287,7 @@ export const resistants: Resistant[] = [
longitude: 2.10137,
},
{
id: "arfaoui",
id: "karene-jalil",
noms: "Karène et Jalil Arfaoui",
enfants: "Jade et Nora",
departement: "Tarn",
@ -303,7 +303,7 @@ export const resistants: Resistant[] = [
longitude: 2.14432,
},
{
id: "verrier-duchesne",
id: "nicolas-elodie",
noms: "Nicolas Verrier et Elodie Duchesne",
enfants: "Rayan, Maylie et Aaron",
departement: "Haute Garonne",
@ -319,7 +319,7 @@ export const resistants: Resistant[] = [
longitude: 0.64606,
},
{
id: "poiroux",
id: "jerome-gwenaelle",
noms: "Jérôme et Gwénaëlle Poiroux",
enfants: "Manon, Océane et Chloé",
departement: "Aveyron",
@ -335,7 +335,7 @@ export const resistants: Resistant[] = [
longitude: 2.39564,
},
{
id: "sibert",
id: "isabelle-nicolas",
noms: "Isabelle et Nicolas Sibert",
enfants: "Pauline, Flora, Jérémie et Athina",
departement: "Creuse",
@ -351,7 +351,7 @@ export const resistants: Resistant[] = [
longitude: 1.98893,
},
{
id: "drulhe",
id: "helene-d",
noms: "Hélène Drulhe",
enfants: "Kin Rosalie",
departement: "Aveyron",
@ -367,7 +367,7 @@ export const resistants: Resistant[] = [
longitude: 2.53359,
},
{
id: "muller",
id: "deborah-florian",
noms: "Déborah et Florian Muller",
enfants: "Zoé, Zendé, et Zora",
departement: "Ardèche",
@ -383,7 +383,7 @@ export const resistants: Resistant[] = [
longitude: 4.60679,
},
{
id: "singeot-bouvet",
id: "ophelie-sylvain",
noms: "Ophélie Singeot et Sylvain Bouvet",
enfants: "Enakiel, Aïnoura et Yoéli",
departement: "Aveyron",
@ -399,7 +399,7 @@ export const resistants: Resistant[] = [
longitude: 2.7699,
},
{
id: "cremers-blanpain",
id: "marina-frederic",
noms: "Marina Cremers et Frederic Blanpain",
enfants: "Léo-Pol, Joa-Louca, Lili-Rose, Luna-Violette et Emilien",
departement: "Creuse",
@ -415,7 +415,7 @@ export const resistants: Resistant[] = [
longitude: 2.33353,
},
{
id: "herbiet",
id: "sonia-jeanchristophe",
noms: "Sonia et Jean-Christophe Herbiet",
enfants: "Uwe, Keza et Aïna",
departement: "Meurthe et Moselle",
@ -431,7 +431,7 @@ export const resistants: Resistant[] = [
longitude: 6.19711,
},
{
id: "lourenco-porcel",
id: "alexandre-julie",
noms: "Alexandre Lourenço et Julie Porcel",
enfants: "Ulyssandra",
departement: "Landes",

View File

@ -16,7 +16,7 @@ export const router = createHashRouter([
element: <ListeResistants />,
},
{
path: ":nomResistant",
path: ":idResistant",
element: <PageResistant />,
},
],

View File

@ -14,7 +14,7 @@ export const ResistantRow = ({ resistant }: Props) => {
<>
<div
className="row sqs-row resistant-row"
onClick={() => navigate(resistant.noms)}
onClick={() => navigate(resistant.id)}
>
<div
className="col sqs-col-4 span-4"

View File

@ -2,14 +2,19 @@ import React from "react";
import { useNavigate } from "react-router";
import { Resistant } from "../../../Resistant";
import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl";
import { HomeContext } from "../../../context/HomeContext";
import { getResistantPageUrl } from "../../../getResistantPageUrl";
export const PopupContent = ({ resistant }: { resistant: Resistant }) => {
const navigate = useNavigate();
const { isHome } = React.useContext(HomeContext);
return (
<div
style={{ minWidth: "30em", minHeight: "15em" }}
onClick={() => navigate(resistant.noms)}
onClick={() =>
navigate(isHome ? getResistantPageUrl(resistant) : resistant.id)
}
>
<img
src={getResistantPhotoUrl(resistant)}

View File

@ -2,6 +2,9 @@ import { useNavigate } from "react-router";
import { BackgroundImage, Text } from "@mantine/core";
import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl";
import { Resistant } from "../../../Resistant";
import React from "react";
import { HomeContext } from "../../../context/HomeContext";
import { getResistantPageUrl } from "../../../getResistantPageUrl";
interface Props {
resistant: Resistant;
@ -9,6 +12,7 @@ interface Props {
export const ResistantThumb = ({ resistant }: Props) => {
const navigate = useNavigate();
const { isHome } = React.useContext(HomeContext);
return (
<BackgroundImage
@ -17,7 +21,9 @@ export const ResistantThumb = ({ resistant }: Props) => {
>
<div
className="thumb resistant-thumb"
onClick={() => navigate(resistant.noms)}
onClick={() =>
navigate(isHome ? getResistantPageUrl(resistant) : resistant.id)
}
style={{ position: "relative" }}
>
<div className="thumb-name">

View File

@ -16,6 +16,7 @@ import { ResistantsMap } from "./Map/ResistantsMap";
import { ResistantsThumbs } from "./Thumbs/ResistantsThumbs";
import { FiltreDepartement } from "./FiltreDepartement";
import { ResistantRow } from "./List/ResistantRow";
import { HomeContext } from "../../context/HomeContext";
const normalize = (text: string) =>
(text || "")
@ -25,6 +26,7 @@ const normalize = (text: string) =>
export const ListeResistants = () => {
const { mode, setMode } = React.useContext(DisplayModeContext);
const { isHome } = React.useContext(HomeContext);
const [departement, setDepartement] = React.useState<string | null>(null);
const [academie, setAcademie] = React.useState<string | null>(null);
@ -51,8 +53,11 @@ export const ListeResistants = () => {
<div id="listeResistants">
<Group position="center">
<SegmentedControl
data={[
{
data={
[
isHome
? "undefined"
: {
value: "list",
label: (
<Center>
@ -79,7 +84,11 @@ export const ListeResistants = () => {
</Center>
),
},
]}
].filter(Boolean) as Array<{
value: string;
label: React.ReactNode;
}>
}
size="xs"
value={mode}
onChange={(value) => setMode(value as ViewMode)}

View File

@ -3,10 +3,10 @@ import { getResistantPhotoUrl } from "../getResistantPhotoUrl";
import { resistants } from "../resistants";
export const PageResistant = () => {
const { nomResistant } = useParams();
const { idResistant } = useParams();
const navigate = useNavigate();
const resistant = resistants.find((r) => r.noms === nomResistant);
const resistant = resistants.find((r) => r.id === idResistant);
if (!resistant) return <>Résistant introuvable</>;