fix: Render diff buttons when pokemon is a fav

felixtanhm · May 8, 2024 · 713ca5b · 713ca5b
1 parent 973a6f4
commit 713ca5b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 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
@@ -12,7 +12,7 @@ function App() {
     window.matchMedia("(prefers-color-scheme: dark)").matches,
   );
   const [user, setUser] = useState(null);
-  console.log(user);
+
   async function fetchUser() {
     try {
       const response = await fetch(`http://localhost:3000/users`);

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
@@ -4,12 +4,8 @@ import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
 import PokeType from "./PokeType";
 import { useNavigate } from "react-router-dom";
 
-function PokeCard({ pokemon, isFav }) {
+function PokeCard({ pokemon, isFav, toggleFavorite }) {
   const navigate = useNavigate();
-  function toggleFavorite(e, dexId) {
-    e.stopPropagation();
-    console.log(dexId);
-  }
 
   return (
     <div

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
@@ -10,17 +10,26 @@ import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
 function PokeDetails() {
   const params = useParams();
   const navigate = useNavigate();
+  const { user, setUser } = useContext(UserContext);
   const [currPokemon, setCurrPokemon] = useState(null);
   const [state, setState] = useState("loading");
-  const { user, setUser } = useContext(UserContext);
-  const isFav = user.favorites.includes(currPokemon._id);
+  let isFav = null;
 
-  function toggleFavorite(dexId) {
-    console.log(dexId);
-    const nextFavs = user.favorites
-      ? [...user.favorites, currPokemon._id]
-      : [currPokemon._id];
-    setUser({ ...user, favorites: nextFavs });
+  if (user) {
+    if (user.favorites) {
+      isFav = user.favorites.includes(currPokemon._id);
+    } else isFav = false;
+  }
+
+  function toggleFavorite() {
+    if (isFav) {
+      // remove from favs
+    } else {
+      const nextFavs = user.favorites
+        ? [...user.favorites, currPokemon._id]
+        : [currPokemon._id];
+      setUser({ ...user, favorites: nextFavs });
+    }
   }
 
   function handleNav(dexId, isPrev) {
@@ -73,7 +82,7 @@ function PokeDetails() {
               type="button"
               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);
+                toggleFavorite();
               }}
             >
               <span className="sr-only">Favorite Pokemon</span>
@@ -86,7 +95,7 @@ function PokeDetails() {
               {!isFav && (
                 <HeartIconOutline className="h-5" aria-hidden="true" />
               )}
-              Add Favorite
+              {isFav ? "Favorited" : "Add Favorite"}
             </button>
             <Button
               isDisabled={currPokemon.dexId === 151}

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
@@ -42,6 +42,11 @@ function PokeList() {
     }
   }
 
+  function toggleFavorite(e, dexId) {
+    e.stopPropagation();
+    console.log(dexId);
+  }
+
   if (!list) {
     fetchList([]);
   }
@@ -55,7 +60,12 @@ function PokeList() {
           <div className="grid w-full max-w-7xl grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
             {list.data.map((item) => {
               return (
-                <PokeCard pokemon={item} isFav={true} key={item._id}></PokeCard>
+                <PokeCard
+                  pokemon={item}
+                  isFav={true}
+                  toggleFavorite={toggleFavorite}
+                  key={item._id}
+                ></PokeCard>
               );
             })}
           </div>