Feat | Load more list

felixtanhm · May 2, 2024 · 868d183 · 868d183
1 parent 9010316
commit 868d183
Showing 1 changed file with 24 additions and 11 deletions.
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
@@ -56,20 +56,33 @@ function PokeList() {
     fetchList([]);
   }
 
-  if (state === "loading") {
-    return <p>loading...</p>;
-  }
+  // if (state === "loading") {
+  //   return <p>loading...</p>;
+  // }
 
   return (
     <div className="p-2 sm:p-6 lg:p-8 flex flex-col items-center gap-8 dark:bg-gray-800">
-      <div className="w-full max-w-7xl grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
-        {list.data.map((item) => {
-          return <PokeCard pokemon={item} key={item.id}></PokeCard>;
-        })}
-      </div>
-      <button className="px-3 py-2 w-fit min-w-32 rounded-md bg-gray-200 text-gray-900 hover:bg-gray-300 dark:hover:bg-gray-100 text-sm font-medium">
-        Load More
-      </button>
+      {state === "loading" && !list && <p>Loading...</p>}
+      {list && (
+        <>
+          <div className="w-full max-w-7xl grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
+            {list.data.map((item) => {
+              return <PokeCard pokemon={item} key={item.id}></PokeCard>;
+            })}
+          </div>
+          <button
+            className="px-3 py-2 w-fit min-w-32 rounded-md bg-gray-200 text-gray-900 hover:bg-gray-300 dark:hover:bg-gray-100 text-sm font-medium"
+            disabled={state === "loading"}
+            onClick={() => {
+              console.log(list.next);
+              setState("loading");
+              fetchList(list.data);
+            }}
+          >
+            {state === "loading" ? "Loading..." : "Load More"}
+          </button>
+        </>
+      )}
     </div>
   );
 }