diff --git a/react-project/public/zelda.json b/react-project/public/zelda.json index 91a61b4..1e9c6a8 100644 --- a/react-project/public/zelda.json +++ b/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 diff --git a/react-project/src/App.jsx b/react-project/src/App.jsx index b81b466..224f60c 100644 --- a/react-project/src/App.jsx +++ b/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

Chargement…

; + return ( <>
diff --git a/react-project/src/components/Carte.jsx b/react-project/src/components/Carte.jsx index daf975a..d418803 100644 --- a/react-project/src/components/Carte.jsx +++ b/react-project/src/components/Carte.jsx @@ -6,7 +6,7 @@ function Carte(props) {

{props.titre}

- {props.console} - {props.annee} - + {props.plateforme} - {props.annee} -

Voir les détails diff --git a/react-project/src/pages/Accueil.jsx b/react-project/src/pages/Accueil.jsx index de6ab20..6b569de 100644 --- a/react-project/src/pages/Accueil.jsx +++ b/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" /> +

+ +