From 8d3238d0fb7bd8b38dbe2ed1554f51999de7e4b8 Mon Sep 17 00:00:00 2001
From: felixtanhm <felixtanhm@gmail.com>
Date: Wed, 8 May 2024 13:40:51 +0800
Subject: [PATCH] feat: prev next navigation for pokedetails page

---
 .../client/src/components/Button.jsx          | 13 +++++
 .../client/src/components/PokeDetails.jsx     | 50 ++++++++++++-------
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/full-stack-javascript/21-inventory-application/client/src/components/Button.jsx b/full-stack-javascript/21-inventory-application/client/src/components/Button.jsx
index e69de29..820dd3a 100644
--- a/full-stack-javascript/21-inventory-application/client/src/components/Button.jsx
+++ b/full-stack-javascript/21-inventory-application/client/src/components/Button.jsx
@@ -0,0 +1,13 @@
+function Button({ onClick, isDisabled, text }) {
+  return (
+    <button
+      className="w-20 rounded-md bg-gray-50 px-3 py-2 text-sm font-medium text-gray-900 enabled:bg-gray-200 enabled:hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:enabled:bg-gray-500/20 dark:enabled:hover:bg-gray-700"
+      disabled={isDisabled}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+}
+
+export default Button;
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 e63bf29..091bdc9 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,30 @@
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useState } from "react";
 import PokeType from "./PokeType";
+import Button from "./Button";
 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 navigate = useNavigate();
   const [currPokemon, setCurrPokemon] = useState(null);
   const [state, setState] = useState("loading");
 
-  function toggleFavorite(e, dexId) {
-    e.stopPropagation();
+  function toggleFavorite(dexId) {
     console.log(dexId);
   }
 
-  async function fetchPokemon() {
+  function handleNav(dexId, isPrev) {
+    const nextDexId = isPrev ? dexId - 1 : dexId + 1;
+    navigate(`/pokemon/${nextDexId}`);
+    fetchPokemon(nextDexId);
+  }
+
+  async function fetchPokemon(dexId) {
     try {
-      const response = await fetch(
-        `http://localhost:3000/pokemon/${params.dexId}`,
-      );
+      const response = await fetch(`http://localhost:3000/pokemon/${dexId}`);
 
       if (!response.ok) {
         let errorMessage = `Failed to fetch data. Status: ${response.status}`;
@@ -38,7 +43,7 @@ function PokeDetails() {
     }
   }
 
-  if (!currPokemon) fetchPokemon();
+  if (!currPokemon) fetchPokemon(params.dexId);
 
   return (
     <div className="flex flex-col items-center gap-4 p-4 pb-12 sm:p-6 lg:p-8 dark:bg-gray-800">
@@ -50,22 +55,31 @@ function PokeDetails() {
         <>
           {/* Buttons */}
           <div className="flex w-full justify-between gap-4 md:w-96">
-            <button className="w-20 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-500/20 dark:text-gray-300 dark:hover:bg-gray-700">
-              Previous
-            </button>
+            <Button
+              isDisabled={currPokemon.dexId === 1}
+              onClick={() => {
+                handleNav(currPokemon.dexId, true);
+              }}
+              text={"Previous"}
+            />
             <button
               type="button"
-              className="w-32 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-500/20 dark:text-gray-300 dark:hover:bg-gray-700"
-              onClick={(e) => {
-                toggleFavorite(e, currPokemon.dexId);
+              className="flex w-36 items-center justify-center gap-1 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-500/20 dark:text-gray-300 dark:hover:bg-gray-700"
+              onClick={() => {
+                toggleFavorite(currPokemon.dexId);
               }}
             >
               <span className="sr-only">Favorite Pokemon</span>
-              <HeartIconOutline className="h-6 w-full" aria-hidden="true" />
-            </button>
-            <button className="w-20 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-500/20 dark:text-gray-300 dark:hover:bg-gray-700">
-              Next
+              <HeartIconOutline className="h-5" aria-hidden="true" />
+              Add Favorite
             </button>
+            <Button
+              isDisabled={currPokemon.dexId === 151}
+              onClick={() => {
+                handleNav(currPokemon.dexId, false);
+              }}
+              text={"Next"}
+            />
           </div>
           <img
             className="mt-6 min-w-28 max-w-24"