Add fetching logic to API components. It will keep calling the API un…

…til it retrieves all values
Pipexlul · Jan 18, 2023 · d0497fd · d0497fd
1 parent a826fdc
commit d0497fd
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 24 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -98,12 +98,18 @@ function App() {
       if (mainBlock) {
         const finalApiValues = [];
 
+        const finalApiData = {
+          resultsField: value.resultsField,
+          continueField: value.continueField,
+          apiValues: finalApiValues,
+        };
+
         if (!initialData.apidata[value.apiName]) {
-          initialData.apidata[value.apiName] = finalApiValues;
+          initialData.apidata[value.apiName] = finalApiData;
         }
 
         if (!initialData.apidata[fileName]) {
-          initialData.apidata[fileName] = finalApiValues;
+          initialData.apidata[fileName] = finalApiData;
         }
 
         value.endpoints.forEach((item) => {
@@ -121,10 +127,13 @@ function App() {
 
       if (fileName === "General") {
         initialData.howtouse.push(value);
-      } else if (mainBlock && initialData.apidata[fileName].length > 0) {
+      } else if (
+        mainBlock &&
+        initialData.apidata[fileName].apiValues.length > 0
+      ) {
         const dataCopy = structuredClone(value);
 
-        initialData.apidata[fileName].forEach((item) => {
+        initialData.apidata[fileName].apiValues.forEach((item) => {
           if (item.enabled) {
             const fieldsObjects = item.fields.map((field) => {
               return {

diff --git a/src/components/APIHandler.jsx b/src/components/APIHandler.jsx
@@ -10,7 +10,12 @@ import Separator from "./Separator";
 
 const APIHandler = ({ mainData, apiData }) => {
   const [limitedResults, setLimitedResults] = useState(0);
-  const [selectedAPI, setSelectedAPI] = useState({ idx: -1, apiName: "" });
+  const [selectedAPI, setSelectedAPI] = useState({
+    idx: -1,
+    apiName: "",
+    apiResultsField: "",
+    apiContinueField: "",
+  });
   const [canClick, setCanClick] = useState(true);
   const [endpoints, setEndpoints] = useState([]);
   const [endpointURL, setEndpointURL] = useState("");
@@ -21,7 +26,7 @@ const APIHandler = ({ mainData, apiData }) => {
       const apiBlock = apiData[selectedAPI.apiName];
 
       if (apiBlock) {
-        setEndpoints(apiBlock);
+        setEndpoints(apiBlock.apiValues);
       }
     }
   }, [selectedAPI.idx]);
@@ -38,21 +43,41 @@ const APIHandler = ({ mainData, apiData }) => {
 
   useEffect(() => {
     if (endpointURL) {
-      console.log("Fetching", endpointURL);
-      const fetchResults = async () => {
-        try {
-          const response = await fetch(endpointURL);
-          console.log(response);
-          const data = await response.json();
-          console.log(data);
-
-          setResults(data.results);
-        } catch (error) {
-          console.error(error);
+      const urlCopy = endpointURL;
+
+      const fetchResults = async (url) => {
+        let finalResults = [];
+
+        while (url) {
+          console.log("Fetching", url);
+          try {
+            const response = await fetch(url);
+            if (!response.ok) {
+              throw new Error(
+                `HTTP error! status: ${response.status} when fetching ${url}`
+              );
+            }
+            const data = await response.json();
+            console.log(data);
+
+            finalResults = finalResults.concat(
+              data[selectedAPI.apiResultsField]
+            );
+
+            if (selectedAPI.apiContinueField) {
+              url = data[selectedAPI.apiContinueField];
+            } else {
+              url = null;
+            }
+          } catch (error) {
+            throw error;
+          }
         }
+
+        return finalResults;
       };
 
-      fetchResults();
+      fetchResults(urlCopy).then(setResults).catch(console.error);
     }
   }, [endpointURL]);
 
@@ -68,7 +93,8 @@ const APIHandler = ({ mainData, apiData }) => {
           Selecciona una API
         </h2>
         <APIChooser
-          apiData={Object.values(mainData)}
+          mainData={Object.values(mainData)}
+          apiData={apiData}
           selectedAPI={selectedAPI}
           setSelectedAPI={setSelectedAPI}
         />

diff --git a/src/components/APIHandlerLogic/APIChooser.jsx b/src/components/APIHandlerLogic/APIChooser.jsx
@@ -2,15 +2,16 @@ import { useContext, useState, useEffect } from "react";
 import { APIContext } from "../../contexts/appContexts";
 import APIChooserButton from "./APIChooserButton";
 
-const APIChooser = ({ apiData, selectedAPI, setSelectedAPI }) => {
+const APIChooser = ({ mainData, apiData, selectedAPI, setSelectedAPI }) => {
   return (
     <ul className="mb-0 flex list-none flex-row flex-wrap gap-y-2 pt-3 pb-4">
-      {apiData.length > 0 &&
-        apiData.map((entry, index) => {
+      {mainData.length > 0 &&
+        mainData.map((entry, index) => {
           return (
             <APIChooserButton
               key={index}
               apiName={entry.name}
+              apiData={apiData}
               selected={selectedAPI.idx === index}
               clickHandler={setSelectedAPI}
               idx={index}

diff --git a/src/components/APIHandlerLogic/APIChooserButton.jsx b/src/components/APIHandlerLogic/APIChooserButton.jsx
@@ -1,4 +1,10 @@
-const APIChooserButton = ({ apiName, selected, clickHandler, idx }) => {
+const APIChooserButton = ({
+  apiName,
+  apiData,
+  selected,
+  clickHandler,
+  idx,
+}) => {
   return (
     <li className="-mb-px mr-2 flex-auto text-center last:mr-0">
       <a
@@ -9,7 +15,14 @@ const APIChooserButton = ({ apiName, selected, clickHandler, idx }) => {
         }`}
         onClick={(e) => {
           e.preventDefault();
-          clickHandler({ idx, apiName });
+
+          const { resultsField, continueField } = apiData[apiName];
+          clickHandler({
+            idx,
+            apiName,
+            apiResultsField: resultsField,
+            apiContinueField: continueField,
+          });
         }}
         href="#"
       >

diff --git a/src/data/APIData/StarWars.js b/src/data/APIData/StarWars.js
@@ -1,5 +1,7 @@
 export const data = {
   apiName: "Star Wars",
+  resultsField: "results",
+  continueField: "next",
   endpoints: [
     {
       name: "Peliculas",