fixed bug annd linked app, accueil and detail together

react-project/src/App.jsx

@@ -1,117 +1,18 @@
 import Header from "./components/Header";
 import Footer from "./components/Footer";
-import Carte from "./components/Carte";
-import BarreRecherche from "./components/BarreRecherche";
-import { useState, useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
-import { useParams } from "react-router-dom";
+import Accueil from "./pages/Accueil";
+import Detail from "./pages/Detail";
 import "./App.css";
 
 function App() {
-  const [recherche, setRecherche] = useState("");
-  const [total, setTotal] = useState(0);
-  const [jeux, setJeux] = useState([]);
-  const [chargement, setChargement] = useState(true);
-  const [titre, setTitre] = useState("");
-  const [annee, setAnnee] = useState("");
-  const [plateforme, setPlateforme] = useState("");
-  const [tri, setTri] = useState("titre");
-
-  function ajouter(e) {
-    e.preventDefault();
-    if (titre.trim() === "") return;
-    const nouveau = {
-      id: Date.now(),
-      titre,
-      annee: Number(annee),
-      console,
-      Type: "3d",
-    };
-    setJeux([...jeux, nouveau]);
-    setTitre("");
-    setAnnee("");
-    setPlateforme("");
-  }
-
-  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")
-      .then((r) => r.json())
-      .then((data) => {
-        setJeux(data);
-        document.title = `${data.length} jeux Zelda`;
-        setChargement(false);
-      });
-  }, []);
-
-  if (chargement) return <p>Chargement…</p>;
-
-  function Detail() {
-    const { id } = useParams();
-    return <h1>Détails du jeu {id}</h1>;
-  }
-
   return (
     <>
+      <Header />
       <Routes>
         <Route path="/" element={<Accueil />} />
         <Route path="/jeu/:id" element={<Detail />} />
       </Routes>
-
-      <Header />
-
-      <BarreRecherche
-        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>
-
-      {affiches.length === 0 && <p>Aucun jeu trouvé 😕</p>}
-
-      {affiches.map((jeu) => (
-        <Carte
-          key={jeu.id}
-          gameId={jeu.id}
-          titre={jeu.titre}
-          console={jeu.console}
-          annee={jeu.annee}
-          Type={jeu.Type}
-          onLike={() => setTotal((t) => t + 1)}
-        />
-      ))}
-
-      <p> Total de likes : {total}</p>
-
-      <form onSubmit={ajouter}>
-        <input
-          value={titre}
-          onChange={(e) => setTitre(e.target.value)}
-          placeholder="Titre du jeu"
-        />
-        <input
-          value={annee}
-          onChange={(e) => setAnnee(e.target.value)}
-          placeholder="Année"
-        />
-        <input
-          value={plateforme}
-          onChange={(e) => setPlateforme(e.target.value)}
-          placeholder="Console"
-        />
-        <button type="submit">Ajouter</button>
-      </form>
-
-      <section id="spacer"></section>
       <Footer />
     </>
   );

react-project/src/main.jsx

@@ -6,11 +6,8 @@ import App from "./App.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 );
-createRoot(document.getElementById("root")).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-);

react-project/src/pages/Accueil.jsx

@@ -19,7 +19,7 @@ function Accueil() {
       id: Date.now(),
       titre,
       annee: Number(annee),
-      console,
+      plateforme,
       Type: "3d",
     };
     setJeux([...jeux, nouveau]);
@@ -47,12 +47,6 @@ function Accueil() {
   }, []);
 
   if (chargement) return <p>Chargement…</p>;
-
-  function Detail() {
-    const { id } = useParams();
-    return <h1>Détails du jeu {id}</h1>;
-  }
-
   return (
     <>
       <BarreRecherche
@@ -97,8 +91,6 @@ function Accueil() {
           placeholder="Console"
         />
         <button type="submit">Ajouter</button>
-
-        <section id="spacer"></section>
         <section id="spacer"></section>
       </form>
     </>