fixed bugs and installed react-router-dom

react-project/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.2.7",
-        "react-dom": "^19.2.7"
+        "react-dom": "^19.2.7",
+        "react-router-dom": "^7.18.0"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
@@ -1068,6 +1069,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2144,6 +2158,44 @@
         "react": "^19.2.7"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.0.tgz",
+      "integrity": "sha512-pTTGt8J+ji1NOmYnjzT+bAJy/1zD+Jp4ziO6cL7T3ZLvXKtusO7BpFqlRXitqpcPVqllsIXFHRMt+2/k3Xn6HQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.0.tgz",
+      "integrity": "sha512-Fi0yY6kgtKae/Th2xibdWK0KSdYZ4B53Gyf6wRtomOKWgpNm7H7+DyfDhncdz9FKbpS+1jmDhg3F4WoGJ+yFOA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.2.tgz",
@@ -2194,6 +2246,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

react-project/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

react-project/src/App.jsx

@@ -12,7 +12,8 @@ function App() {
   const [chargement, setChargement] = useState(true);
   const [titre, setTitre] = useState("");
   const [annee, setAnnee] = useState("");
-  const [console, setConsole] = useState("");
+  const [plateforme, setPlateforme] = useState("");
+  const [tri, setTri] = useState("titre");
 
   function ajouter(e) {
     e.preventDefault();
@@ -27,12 +28,16 @@ function App() {
     setJeux([...jeux, nouveau]);
     setTitre("");
     setAnnee("");
-    setConsole("");
+    setPlateforme("");
   }
 
-  const filtres = jeux.filter((j) =>
-    j.titre.toLowerCase().includes(recherche.toLowerCase()),
-  );
+  const affiches = [...jeux]
+    .filter((j) => j.titre.toLowerCase().includes(recherche.toLowerCase()))
+    .sort((a, b) => {
+      if (tri === "titre") return a.titre.localeCompare(b.titre);
+      if (tri === "annee") return a.annee - b.annee;
+      return 0;
+    });
 
   useEffect(() => {
     fetch("/zelda.json")
@@ -51,13 +56,17 @@ function App() {
       <Header />
 
       <BarreRecherche
-        value={recherche}
+        valeur={recherche}
         onChange={(e) => setRecherche(e.target.value)}
       />
+      <select value={tri} onChange={(e) => setTri(e.target.value)}>
+        <option value="titre">Titre (A→Z)</option>
+        <option value="annee">Année</option>
+      </select>
 
-      {filtres.length === 0 && <p>Aucun jeu trouvé 😕</p>}
+      {affiches.length === 0 && <p>Aucun jeu trouvé 😕</p>}
 
-      {filtres.map((jeu) => (
+      {affiches.map((jeu) => (
         <Carte
           key={jeu.id}
           gameId={jeu.id}
@@ -83,8 +92,8 @@ function App() {
           placeholder="Année"
         />
         <input
-          value={console}
-          onChange={(e) => setConsole(e.target.value)}
+          value={plateforme}
+          onChange={(e) => setPlateforme(e.target.value)}
           placeholder="Console"
         />
         <button type="submit">Ajouter</button>

react-project/src/components/Form.jsx

@@ -1,26 +0,0 @@
-import Carte from "./components/Carte";
-import { useState } from "react";
-
-const [tri, setTri] = useState("titre");
-
-const affiches = [...filtres].sort((a, b) => {
-  if (tri === "titre") return a.titre.localeCompare(b.titre);
-  if (tri === "annee") return a.annee - b.annee;
-  return 0;
-});
-
-function Form() {
-  return (
-    <>
-      <select value={tri} onChange={(e) => setTri(e.target.value)}>
-        <option value="titre">Titre (A→Z)</option>
-        <option value="annee">Année</option>
-      </select>
-      {affiches.map((jeu) => (
-        <Carte />
-      ))}
-    </>
-  );
-}
-
-export default Form;