Introuvable đ€· â retour
Introuvable â retour
đčïž {jeu.console} â đ {jeu.annee} â đź {jeu.Type}
{jeu.console} â {jeu.annee} â {jeu.Type}
â€ïž Likes : {likes[jeu.id] || 0}
{medailles[index]} {j.titre} â {likes[j.id] || 0} â€ïž
` qui annonce le gagnant. + +> Attention au type de la valeur d'un `` (elle revient en chaĂźne) : compare avec `String(...)` des deux cĂŽtĂ©s. + +**Test :** change les deux menus â le verdict se met Ă jour tout seul. + +--- + +## Module R â Filtre par Type + +Tes jeux ont un champ `Type` (`"2d"` / `"3d"`). Ajoute trois boutons (Tous / 2d / 3d) qui filtrent la liste, en plus de ta recherche. + +```jsx +const [filtreType, setFiltreType] = useState("tous"); + +// dans ta chaĂźne filtre â tri â map, ajoute une Ă©tape : +const affiches = [...jeux] + .filter((j) => j.titre.toLowerCase().includes(recherche.toLowerCase())) + .filter((j) => filtreType === "tous" || j.Type === filtreType) + .sort(/* ... */); + +// setFiltreType("tous")}>Tous +// setFiltreType("2d")}>2D +// setFiltreType("3d")}>3D +``` + +> On enchaĂźne deux `.filter()` : recherche **puis** type. Chaque filtre renvoie un nouveau tableau, on les compose tranquillement. + +**Test :** clique « 2D » â seuls les jeux 2d restent, et la recherche marche toujours par-dessus. + +--- + +## Module S â Statistiques + +Une petite barre de stats calculĂ©e Ă partir des donnĂ©es. On muscle `reduce`. + +```jsx +const nbJeux = jeux.length; +const totalLikes = Object.values(likes).reduce((s, n) => s + n, 0); +const anneeMoyenne = nbJeux + ? Math.round(jeux.reduce((s, j) => s + Number(j.annee), 0) / nbJeux) + : 0; +// {nbJeux} jeux · {totalLikes} likes · annĂ©e moyenne {anneeMoyenne} +``` + +> `reduce` rĂ©duit un tableau Ă **une seule** valeur en accumulant. Ici on additionne likes et annĂ©es. + +**Test :** ajoute/like des jeux â les chiffres bougent. + +--- + +## Module T â Page « 404 » + +Que se passe-t-il si on tape `/jeu/banane` ou une URL qui n'existe pas ? Rien d'affichĂ©. On ajoute une route attrape-tout. + +```jsx +import { Link } from "react-router-dom"; +function NotFound() { + return 404 â page introuvableRetour Ă l'accueil; +} +// dans , en DERNIER : +// } /> +``` + +> `path="*"` = « toutes les URL non reconnues ». Ă mettre **en dernier**, sinon il attrape tout avant les autres. + +**Test :** tape une URL bidon â la page 404 s'affiche. + +--- + +## Module U â Tri ascendant â descendant + +Ajoute un bouton qui inverse l'ordre du tri en cours. + +```jsx +const [ordre, setOrdre] = useState("asc"); +// aprĂšs ton .sort(...) : +const affiches = [...maListeTriee]; +if (ordre === "desc") affiches.reverse(); +// setOrdre(ordre === "asc" ? "desc" : "asc")}> +// {ordre === "asc" ? "AâZ" : "ZâA"} +// +``` + +**Test :** clique le bouton â l'ordre des cartes s'inverse. + +--- + +## Module V â Custom hook `useLocalStorage` (refacto) + +Tu rĂ©pĂštes le mĂȘme schĂ©ma `useState` + `useEffect(localStorageâŠ)` pour les likes et le thĂšme. On range ça dans **un hook rĂ©utilisable**. + +```jsx +// src/useLocalStorage.js +import { useState, useEffect } from "react"; + +export function useLocalStorage(cle, valeurParDefaut) { + const [valeur, setValeur] = useState(() => { + const stockee = localStorage.getItem(cle); + return stockee !== null ? JSON.parse(stockee) : valeurParDefaut; + }); + useEffect(() => { + localStorage.setItem(cle, JSON.stringify(valeur)); + }, [cle, valeur]); + return [valeur, setValeur]; +} +``` +Puis dans `App` : `const [likes, setLikes] = useLocalStorage("likes", {});` remplace les deux blocs likes d'un coup. + +> Un custom hook, c'est juste une fonction qui commence par `use` et qui utilise d'autres hooks. Ăa permet de **rĂ©utiliser de la logique** entre composants. + +**Test :** like des jeux â recharge â les likes sont toujours lĂ , mais avec deux fois moins de code. + +--- + +## â Checklist +- [ ] L â `fetch` + `jeux` + `likes` remontĂ©s dans `App`, page dĂ©tail complĂšte *(obligatoire)* +- [ ] M â au hasard · [ ] N â Hall of Fame · [ ] O â supprimer · [ ] P â thĂšme sombre +- [ ] Q â versus · [ ] R â filtre Type · [ ] S â stats · [ ] T â page 404 +- [ ] U â tri inversĂ© · [ ] V â custom hook + +## đ§ Concepts rencontrĂ©s aujourd'hui +`useNavigate` · `fetch` + Ă©tat remontĂ©s au niveau du routeur + props passĂ©es Ă une `` · likes **centralisĂ©s** dans un objet · `filter` (supprimer, filtrer) · `sort`/`slice`/`index` (classement) · `reduce` (stats) · route attrape-tout `path="*"` · CSS pilotĂ© par le state · **custom hook**. + +Bravo pour ces deux semaines. Montre-moi tes modules battus quand tu en tiens un.
{nbJeux} jeux · {totalLikes} likes · année moyenne {anneeMoyenne}