Feat | routing to individual pokemon page

felixtanhm · May 3, 2024 · f33e14b · f33e14b
1 parent 9ec2d8e
commit f33e14b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
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
@@ -2,20 +2,34 @@ import capitalise from "../utils/capitalise";
 import { HeartIcon as HeartIconOutline } from "@heroicons/react/24/outline";
 import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
 import PokemonType from "./PokemonType";
+import { useNavigate } from "react-router-dom";
 
 function PokeCard({ pokemon }) {
-  function handleClick(e) {
+  const navigate = useNavigate();
+  function toggleFavorite(e, pokemonId) {
+    e.stopPropagation();
+    console.log(pokemonId);
+  }
+
+  function displayPokemon(e, pokemonId) {
     console.log(e);
+    console.log(pokemonId);
+    navigate(`/pokemon/${pokemonId}`);
   }
 
   return (
-    <div className="flex flex-col items-center rounded-md bg-gray-500/20 p-4">
+    <div
+      className="flex cursor-pointer flex-col items-center rounded-md bg-gray-200 p-4 dark:bg-gray-500/20"
+      onClick={(e) => {
+        displayPokemon(e, pokemon.id);
+      }}
+    >
       <div className="absolute self-end">
         <button
           type="button"
           className="relative rounded-full p-1 text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-white dark:focus:ring-white dark:focus:ring-offset-gray-800"
-          onClick={() => {
-            handleClick(pokemon.id);
+          onClick={(e) => {
+            toggleFavorite(e, pokemon.id);
           }}
         >
           <span className="sr-only">Favorite Pokemon</span>
@@ -24,7 +38,7 @@ function PokeCard({ pokemon }) {
       </div>
       <img className="mt-6 max-w-24" src={pokemon.sprites.front_default}></img>
       <div className="flex flex-col items-center gap-2 p-2">
-        <p className="text-xl font-bold text-gray-300">
+        <p className="text-xl font-bold text-gray-900 dark:text-gray-300">
           {capitalise(pokemon.name)}
         </p>
         <div className="flex gap-2">

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
@@ -69,8 +69,8 @@ function PokeList() {
           <button
             className="w-fit min-w-32 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-300 dark:hover:bg-gray-100"
             disabled={state === "loading"}
-            onClick={() => {
-              console.log(list.next);
+            onClick={(e) => {
+              console.log(e);
               setState("loading");
               fetchList(list.data);
             }}