rf: handle response from server for pokelist

full-stack-javascript/21-inventory-application/client/src/components/PokeCard.jsx

@@ -6,49 +6,44 @@ import { useNavigate } from "react-router-dom";
 
 function PokeCard({ pokemon }) {
   const navigate = useNavigate();
-  function toggleFavorite(e, pokemonId) {
+  function toggleFavorite(e, dexId) {
     e.stopPropagation();
-    console.log(pokemonId);
+    console.log(dexId);
   }
 
-  function displayPokemon(e, pokemonId) {
+  function displayPokemon(e, dexId) {
     console.log(e);
-    console.log(pokemonId);
-    navigate(`/pokemon/${pokemonId}`);
+    console.log(dexId);
+    navigate(`/pokemon/${dexId}`);
   }
 
   return (
     <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);
+        displayPokemon(e, pokemon.dexId);
       }}
     >
       <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={(e) => {
-            toggleFavorite(e, pokemon.id);
+            toggleFavorite(e, pokemon.dexId);
           }}
         >
           <span className="sr-only">Favorite Pokemon</span>
           <HeartIconOutline className="h-6 w-6" aria-hidden="true" />
         </button>
       </div>
-      <img className="mt-6 max-w-24" src={pokemon.sprites.front_default}></img>
+      <img className="mt-6 max-w-24" src={pokemon.avatar}></img>
       <div className="flex flex-col items-center gap-2 p-2">
         <p className="text-xl font-bold text-gray-900 dark:text-gray-300">
           {capitalise(pokemon.name)}
         </p>
         <div className="flex gap-2">
-          {pokemon.types.map((typeObj) => {
-            return (
-              <PokeType
-                key={typeObj.type.name}
-                type={capitalise(typeObj.type.name)}
-              />
-            );
+          {pokemon.types.map((type) => {
+            return <PokeType key={type} type={capitalise(type)} />;
           })}
         </div>
       </div>

full-stack-javascript/21-inventory-application/client/src/components/PokeList.jsx

@@ -5,47 +5,33 @@ 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 endpoint = list
-        ? list.next
-        : `https://pokeapi.co/api/v2/pokemon/?limit=24`;
-      const response = await fetch(endpoint);
-      const result = await response.json();
-
-      // const response2 = await fetch("http://localhost:3000/pokemon/");
-      // const result2 = await response2.json();
-      // console.log("result2");
-      // console.log(result2);
-
-      if (result.results) {
-        const { count, next, previous } = { ...result };
-        const nextList = {
-          count,
-          next,
-          previous,
-          data: [...currData],
-        };
+      const nextId = currData.length;
+      const response = await fetch(
+        `http://localhost:3000/pokemon?cursor=${nextId}`,
+      );
 
-        const expandList = await Promise.all(
-          result.results.map(async (item) => {
-            try {
-              const singleResponse = await fetch(item.url);
-              const singleResult = await singleResponse.json();
-              item = { ...item, ...singleResult };
-              return item;
-            } catch (error) {
-              console.log({ ...item, error });
-            }
-          }),
-        );
+      if (!response.ok) {
+        let errorMessage = `Failed to fetch data. Status: ${response.status}`;
+        if (response.statusText) {
+          errorMessage += `, Message: ${response.statusText}`;
+        }
+        throw new Error(errorMessage);
+      }
 
-        nextList.data = [...currData, ...expandList];
+      const result = await response.json();
+      const nextList = {
+        totalCount: result.totalCount,
+        data: [...currData, ...result.data],
+      };
 
-        setList(nextList);
-        setState("success");
-      }
+      setList(nextList);
+      setState("success");
+      // }
     } catch (error) {
       console.log(error);
       setState("error");
@@ -68,7 +54,7 @@ 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} key={item.id}></PokeCard>;
+              return <PokeCard pokemon={item} key={item._id}></PokeCard>;
             })}
           </div>
           <button