addded persistent games but totallikes behave weirdly

react-project/public/zelda.json

@@ -2,7 +2,7 @@
   {
     "id": "1",
     "titre": "Oracle of ages",
-    "console": "Game Boy Color",
+    "plateforme": "Game Boy Color",
     "annee": "2001",
     "Type": "2d",
     "like": 0
@@ -10,7 +10,7 @@
   {
     "id": "2",
     "titre": "Breath of the Wild",
-    "console": "Switch",
+    "plateforme": "Switch",
     "annee": "2017",
     "Type": "3d",
     "like": 0
@@ -18,7 +18,7 @@
   {
     "id": "3",
     "titre": "Majora's Mask",
-    "console": "N64",
+    "plateforme": "N64",
     "annee": "2000",
     "Type": "3d",
     "like": 0
@@ -26,7 +26,7 @@
   {
     "id": "4",
     "titre": "Tears of the kingdom",
-    "console": "Switch",
+    "plateforme": "Switch",
     "annee": "2023",
     "Type": "3d",
     "like": 0
@@ -34,7 +34,7 @@
   {
     "id": "5",
     "titre": "Echoes of Wisdom",
-    "console": "Switch",
+    "plateforme": "Switch",
     "annee": "2024",
     "Type": "3d",
     "like": 0

react-project/src/App.jsx

@@ -7,17 +7,28 @@ import Detail from "./pages/Detail";
 import "./App.css";
 
 function App() {
-  const [jeux, setJeux] = useState([]);
+  const [jeux, setJeux] = useState(() => {
+    const stocke = localStorage.getItem("jeux");
+    return stocke ? JSON.parse(stocke) : null;
+  });
   const [likes, setLikes] = useState(() =>
     JSON.parse(localStorage.getItem("likes") || "{}"),
   );
 
   useEffect(() => {
-    fetch("/zelda.json")
-      .then((r) => r.json())
-      .then(setJeux);
+    if (jeux === null) {
+      fetch("/zelda.json")
+        .then((r) => r.json())
+        .then(setJeux);
+    }
   }, []);
 
+  useEffect(() => {
+    if (jeux !== null) {
+      localStorage.setItem("jeux", JSON.stringify(jeux));
+    }
+  }, [jeux]);
+
   useEffect(() => {
     localStorage.setItem("likes", JSON.stringify(likes));
   }, [likes]);
@@ -25,6 +36,9 @@ function App() {
   function liker(id) {
     setLikes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
   }
+
+  if (jeux === null) return <p>Chargement…</p>;
+
   return (
     <>
       <Header />

react-project/src/components/Carte.jsx

@@ -6,7 +6,7 @@ function Carte(props) {
     <div className="carte">
       <h2>{props.titre}</h2>
       <p>
-        {props.console} - {props.annee} - <Badge Type={props.Type} />
+        {props.plateforme} - {props.annee} - <Badge Type={props.Type} />
       </p>
       <Link to={`/jeu/${props.gameId}`}>Voir les détails</Link>
       <button onClick={props.onLike}>❤️ {props.likes}</button>

react-project/src/pages/Accueil.jsx

@@ -83,7 +83,7 @@ function Accueil({ jeux, setJeux, likes, onLike }) {
           key={jeu.id}
           gameId={jeu.id}
           titre={jeu.titre}
-          console={jeu.plateforme}
+          plateforme={jeu.plateforme}
           annee={jeu.annee}
           Type={jeu.Type}
           likes={likes[jeu.id] || 0}
@@ -117,6 +117,16 @@ function Accueil({ jeux, setJeux, likes, onLike }) {
           placeholder="Console"
         />
         <button type="submit">Ajouter</button>
+        <p>
+          <button
+            onClick={() => {
+              localStorage.removeItem("jeux");
+              location.reload();
+            }}
+          >
+            ♻️ Réinitialiser les jeux
+          </button>
+        </p>
         <section className="spacer"></section>
       </form>
     </>