From 05d3144cf83ce3c3a1f55fb8a6328e2fef0caf83 Mon Sep 17 00:00:00 2001 From: felixtanhm Date: Tue, 7 May 2024 17:23:10 +0800 Subject: [PATCH] feat: pokemon details page display --- .../client/src/App.jsx | 8 +- .../client/src/components/Home.jsx | 6 +- .../client/src/components/PokeCard.jsx | 10 +- .../client/src/components/PokeDetails.jsx | 170 +++++++++++++++++- .../client/src/components/PokeList.jsx | 36 ++-- .../client/src/main.jsx | 2 +- .../client/tailwind.config.js | 2 +- 7 files changed, 188 insertions(+), 46 deletions(-) diff --git a/full-stack-javascript/21-inventory-application/client/src/App.jsx b/full-stack-javascript/21-inventory-application/client/src/App.jsx index 9bc39fb..494df82 100644 --- a/full-stack-javascript/21-inventory-application/client/src/App.jsx +++ b/full-stack-javascript/21-inventory-application/client/src/App.jsx @@ -8,17 +8,15 @@ function App() { const urlPath = useLocation().pathname.split("/")[1]; const root = document.getElementById("root"); const [darkMode, setDarkMode] = useState( - window.matchMedia("(prefers-color-scheme: dark)").matches + window.matchMedia("(prefers-color-scheme: dark)").matches, ); darkMode ? root.classList.add("dark") : root.classList.remove("dark"); return ( -
- - -
+ + ); } diff --git a/full-stack-javascript/21-inventory-application/client/src/components/Home.jsx b/full-stack-javascript/21-inventory-application/client/src/components/Home.jsx index a3055b0..2cd7ce7 100644 --- a/full-stack-javascript/21-inventory-application/client/src/components/Home.jsx +++ b/full-stack-javascript/21-inventory-application/client/src/components/Home.jsx @@ -1,11 +1,7 @@ import PokeList from "./PokeList"; function Home() { - return ( -
- -
- ); + return ; } export default Home; diff --git a/full-stack-javascript/21-inventory-application/client/src/components/PokeCard.jsx b/full-stack-javascript/21-inventory-application/client/src/components/PokeCard.jsx index 1de7d0d..44657f8 100644 --- a/full-stack-javascript/21-inventory-application/client/src/components/PokeCard.jsx +++ b/full-stack-javascript/21-inventory-application/client/src/components/PokeCard.jsx @@ -11,17 +11,11 @@ function PokeCard({ pokemon }) { console.log(dexId); } - function displayPokemon(e, dexId) { - console.log(e); - console.log(dexId); - navigate(`/pokemon/${dexId}`); - } - return (
{ - displayPokemon(e, pokemon.dexId); + onClick={() => { + navigate(`/pokemon/${pokemon.dexId}`); }} >
diff --git a/full-stack-javascript/21-inventory-application/client/src/components/PokeDetails.jsx b/full-stack-javascript/21-inventory-application/client/src/components/PokeDetails.jsx index b76ebee..e63bf29 100644 --- a/full-stack-javascript/21-inventory-application/client/src/components/PokeDetails.jsx +++ b/full-stack-javascript/21-inventory-application/client/src/components/PokeDetails.jsx @@ -1,25 +1,179 @@ import { useParams } from "react-router-dom"; +import { useState } from "react"; +import PokeType from "./PokeType"; +import capitalise from "../utils/capitalise"; +import { HeartIcon as HeartIconOutline } from "@heroicons/react/24/outline"; +import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid"; function PokeDetails() { const params = useParams(); - const endpoint = "http://localhost:3000/pokemon/" + params.pokemonId; + const [currPokemon, setCurrPokemon] = useState(null); + const [state, setState] = useState("loading"); + + function toggleFavorite(e, dexId) { + e.stopPropagation(); + console.log(dexId); + } + async function fetchPokemon() { try { - const response = await fetch(endpoint); - const result = await response.json(); + const response = await fetch( + `http://localhost:3000/pokemon/${params.dexId}`, + ); + + if (!response.ok) { + let errorMessage = `Failed to fetch data. Status: ${response.status}`; + if (response.statusText) { + errorMessage += `, Message: ${response.statusText}`; + } + throw new Error(errorMessage); + } - console.log(result); + const result = await response.json(); + setCurrPokemon(result); + setState("success"); } catch (error) { console.log(error); + setState("error"); } } - fetchPokemon(); + if (!currPokemon) fetchPokemon(); return ( -
-
Main Details
-
Pokemon: {params.pokemonId}
+
+ {state === "error" &&

Error para

} + {state === "loading" && !currPokemon && ( +

Loading...

+ )} + {currPokemon && ( + <> + {/* Buttons */} +
+ + + +
+ + {/* Name and Types */} +
+

+ {capitalise(currPokemon.name)} +

+
+ {currPokemon.types.map((type) => { + return ; + })} +
+
+ {/* Details */} +
+
+

+ Height: +

+

+ {currPokemon.details.height / 10 + " m"} +

+
+
+

+ Weight: +

+

+ {currPokemon.details.weight / 10 + " kg"} +

+
+
+

+ Abilities: +

+

+ {currPokemon.details.abilities + .map((ability) => { + return capitalise(ability); + }) + .join(", ")} +

+
+
+

+ Gender: +

+

+ {currPokemon.details.has_gender ? "♂️ / ♀️" : ""} +

+
+
+ {/* Stats */} +
+
+

+ HP: +

+

+ {currPokemon.details.hp} +

+
+
+

+ Attack: +

+

+ {currPokemon.details.attack} +

+
+
+

+ Defense: +

+

+ {currPokemon.details.defense} +

+
+
+

+ Special Attack: +

+

+ {currPokemon.details.special_attack} +

+
+
+

+ Special Defense: +

+

+ {currPokemon.details.special_defense} +

+
+
+

+ Speed: +

+

+ {currPokemon.details.speed} +

+
+
+ + )}
); } diff --git a/full-stack-javascript/21-inventory-application/client/src/components/PokeList.jsx b/full-stack-javascript/21-inventory-application/client/src/components/PokeList.jsx index a566c1a..71f2d55 100644 --- a/full-stack-javascript/21-inventory-application/client/src/components/PokeList.jsx +++ b/full-stack-javascript/21-inventory-application/client/src/components/PokeList.jsx @@ -5,12 +5,13 @@ function PokeList() { const [list, setList] = useState(null); const [state, setState] = useState("loading"); const [error, setError] = useState(null); - console.log("list"); - console.log(list); async function fetchList(currData) { try { - const nextId = currData.length; + const nextId = currData.length + ? currData[currData.length - 1]?.dexId + : currData.length; + const response = await fetch( `http://localhost:3000/pokemon?cursor=${nextId}`, ); @@ -39,17 +40,14 @@ function PokeList() { } } - if (state === "error") { - return

error

; - } - if (!list) { fetchList([]); } return (
- {state === "loading" && !list &&

Loading...

} + {state === "error" &&

Error

} + {state === "loading" && !list &&

Loading...

} {list && ( <>
@@ -57,16 +55,18 @@ function PokeList() { return ; })}
- + {list.data.length < 151 && ( + + )} )}
diff --git a/full-stack-javascript/21-inventory-application/client/src/main.jsx b/full-stack-javascript/21-inventory-application/client/src/main.jsx index 686a457..0333d06 100644 --- a/full-stack-javascript/21-inventory-application/client/src/main.jsx +++ b/full-stack-javascript/21-inventory-application/client/src/main.jsx @@ -17,7 +17,7 @@ const router = createBrowserRouter( createRoutesFromElements( }> }> - }> + }> }> , ), diff --git a/full-stack-javascript/21-inventory-application/client/tailwind.config.js b/full-stack-javascript/21-inventory-application/client/tailwind.config.js index 4d6ed5f..d5b1bf1 100644 --- a/full-stack-javascript/21-inventory-application/client/tailwind.config.js +++ b/full-stack-javascript/21-inventory-application/client/tailwind.config.js @@ -18,7 +18,7 @@ export default { ice: "#98D8D8", fairy: "#F0B6BC", poison: "#A040A0", - psychic: "#F8588", + psychic: "#F85888", dark: "#705848", fighting: "#C03028", dragon: "#7038F8",