fixed bugs

react-project/public/zelda.json

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

react-project/src/components/Carte.jsx

@@ -1,16 +1,7 @@
-import { useEffect } from "react";
 import Badge from "./Badge";
-import { useState } from "react";
 import { Link } from "react-router-dom";
 
 function Carte(props) {
-  const [likes, setLikes] = useState(
-    () => Number(localStorage.getItem("likes-" + props.gameId)) || 0,
-  );
-  useEffect(() => {
-    localStorage.setItem("likes-" + props.gameId, likes);
-  }, [likes]);
-
   return (
     <div className="carte">
       <h2>{props.titre}</h2>
@@ -18,14 +9,8 @@ function Carte(props) {
         {props.console} - {props.annee} - <Badge Type={props.Type} />
       </p>
       <Link to={`/jeu/${props.gameId}`}>Voir les détails</Link>
-      <button
-        onClick={() => {
-          setLikes(likes + 1);
-          props.onLike();
-        }}
-      >
-        ❤️ {likes}
-      </button>
+      <button onClick={props.onLike}>❤️ {props.likes}</button>
+      <button onClick={() => props.onDelete()}>🗑️</button>
       <section className="smallgap"></section>
     </div>
   );

react-project/src/pages/Accueil.jsx

@@ -15,6 +15,9 @@ function Accueil({ jeux, setJeux, likes, onLike }) {
   const anneeMoyenne = nbJeux
     ? Math.round(jeux.reduce((s, j) => s + Number(j.annee), 0) / nbJeux)
     : 0;
+  function supprimer(id) {
+    setJeux(jeux.filter((j) => j.id !== id));
+  }
 
   const top = [...jeux]
     .sort((a, b) => (likes[b.id] || 0) - (likes[a.id] || 0))
@@ -63,7 +66,7 @@ function Accueil({ jeux, setJeux, likes, onLike }) {
 
       {affiches.length === 0 && <p>Aucun jeu trouvé 😕</p>}
 
-      <section class="spacer"></section>
+      <section className="spacer"></section>
 
       <div className="hall">
         {top.map((j, index) => (
@@ -73,7 +76,7 @@ function Accueil({ jeux, setJeux, likes, onLike }) {
         ))}
       </div>
 
-      <section class="spacer"></section>
+      <section className="spacer"></section>
 
       {affiches.map((jeu) => (
         <Carte
@@ -85,16 +88,17 @@ function Accueil({ jeux, setJeux, likes, onLike }) {
           Type={jeu.Type}
           likes={likes[jeu.id] || 0}
           onLike={() => onLike(jeu.id)}
+          onDelete={() => supprimer(jeu.id)}
         />
       ))}
 
-      <section class="spacer"></section>
+      <section className="spacer"></section>
 
       <p>
         {nbJeux} jeux · {totalLikes} likes · année moyenne {anneeMoyenne}
       </p>
 
-      <section class="spacer"></section>
+      <section className="spacer"></section>
 
       <form onSubmit={ajouter}>
         <input
@@ -113,7 +117,7 @@ function Accueil({ jeux, setJeux, likes, onLike }) {
           placeholder="Console"
         />
         <button type="submit">Ajouter</button>
-        <section class="spacer"></section>
+        <section className="spacer"></section>
       </form>
     </>
   );