fetch pokemon and data

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

@@ -1,23 +1,61 @@
-import { useState, useEffect } from "react";
-import useSWR from "swr";
+import { useState } from "react";
 
-async function fetchList(endpoint) {
-  const response = await fetch(endpoint);
-  const result = await response.json();
+function PokeList() {
+  const [list, setList] = useState(null);
+  const [state, setState] = useState("loading");
+  const [error, setError] = useState(null);
+  const endpoint = list ? list.next : `https://pokeapi.co/api/v2/pokemon/`;
+  console.log(list);
 
-  return result;
-}
+  async function fetchList() {
+    try {
+      const response = await fetch(endpoint);
+      const result = await response.json();
 
-function PokeList() {
-  const [list, setList] = useState({});
-  const endpoint = list.next ? list.next : `https://pokeapi.co/api/v2/pokemon/`;
+      if (result.results) {
+        const { count, next, previous } = { ...result };
+        const nextList = { count, next, previous, data: [] };
+        await Promise.all(
+          result.results.map(async (item) => {
+            try {
+              const singleResponse = await fetch(item.url);
+              const singleResult = await singleResponse.json();
+              item = { ...item, ...singleResult };
+              nextList.data.push(item);
+            } catch (error) {
+              console.log({ ...item, error });
+            }
+          })
+        );
+        setList(nextList);
+        setState("success");
+      }
+    } catch (error) {
+      console.log(error);
+      setState("error");
+      // setError(error);
+    }
+  }
+
+  if (state === "error") {
+    return <p>error</p>;
+  }
+
+  if (!list) {
+    console.log("api called");
+    fetchList();
+  }
+
+  if (state === "loading") {
+    return <p>loading...</p>;
+  }
 
-  const { data, error, isLoading } = useSWR(endpoint, fetchList);
-  console.log({ data, error, isLoading });
   return (
     <div>
-      <p>loading...</p>
-      <button onClick={fetchList}></button>
+      <p>success</p>
+      {list.data.map((item) => {
+        return <p key={item.id}>{item.name + " " + item.types[0].type.name}</p>;
+      })}
     </div>
   );
 }