Apply some logic clean up. Add styles and functionality when buttons …

…shouldn't be pressed. Enforce ordering of API related buttons
Pipexlul · Jan 19, 2023 · 5823e44 · 5823e44
1 parent 9c203b5
commit 5823e44
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 94 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -61,6 +61,13 @@ const appReducer = (state, action) => {
   return state;
 };
 
+const dataSorter = (property, a, b) => {
+  const aData = a[1];
+  const bData = b[1];
+
+  return aData[property].localeCompare(bData[property]);
+};
+
 function App() {
   const [loadedData, setLoadedData] = useState("NULL");
   const [apiState, apiDispatch] = useReducer(appReducer, {});
@@ -79,93 +86,100 @@ function App() {
 
     const mainValues = Object.values(initialData.main);
 
-    Object.entries(featureData).forEach(([key, value]) => {
-      const fileName = key
-        .replace("./data/FeatureList/", "")
-        .replace(".js", "");
+    Object.entries(featureData)
+      .sort((a, b) => {
+        return dataSorter("title", a, b);
+      })
+      .forEach(([key, value]) => {
+        const fileName = key
+          .replace("./data/FeatureList/", "")
+          .replace(".js", "");
+
+        const mainBlock = mainValues.find((item) => item.internal === fileName);
+        if (mainBlock) {
+          initialData.features.push(value);
+        }
+      });
 
-      const mainBlock = mainValues.find((item) => item.internal === fileName);
-      if (mainBlock) {
-        initialData.features.push(value);
-      }
-    });
+    Object.entries(individualApiData)
+      .sort((a, b) => {
+        return dataSorter("apiName", a, b);
+      })
+      .forEach(([key, value]) => {
+        const fileName = key.replace("./data/APIData/", "").replace(".js", "");
 
-    Object.entries(individualApiData).forEach(([key, value]) => {
-      const fileName = key.replace("./data/APIData/", "").replace(".js", "");
+        const mainBlock = mainValues.find((item) => item.internal === fileName);
 
-      const mainBlock = mainValues.find((item) => item.internal === fileName);
+        if (mainBlock) {
+          const finalApiValues = [];
 
-      if (mainBlock) {
-        const finalApiValues = [];
+          const finalApiData = {
+            resultsField: value.resultsField,
+            continueField: value.continueField,
+            apiValues: finalApiValues,
+            apiName: value.apiName,
+          };
 
-        const finalApiData = {
-          resultsField: value.resultsField,
-          continueField: value.continueField,
-          apiValues: finalApiValues,
-        };
+          if (!initialData.apidata[value.apiName]) {
+            initialData.apidata[value.apiName] = finalApiData;
+          }
 
-        if (!initialData.apidata[value.apiName]) {
-          initialData.apidata[value.apiName] = finalApiData;
-        }
+          // if (!initialData.apidata[fileName]) {
+          //   initialData.apidata[fileName] = finalApiData;
+          // }
 
-        if (!initialData.apidata[fileName]) {
-          initialData.apidata[fileName] = finalApiData;
+          value.endpoints.forEach((item) => {
+            if (item.enabled) {
+              finalApiValues.push(item);
+            }
+          });
         }
+      });
 
-        value.endpoints.forEach((item) => {
-          if (item.enabled) {
-            finalApiValues.push(item);
-          }
-        });
-      }
-    });
-
-    Object.entries(howToUseData).forEach(([key, value]) => {
-      const fileName = key.replace("./data/HowToUse/", "").replace(".js", "");
-
-      const mainBlock = mainValues.find((item) => item.internal === fileName);
-
-      if (fileName === "General") {
-        initialData.howtouse.push(value);
-      } else if (
-        mainBlock &&
-        initialData.apidata[fileName].apiValues.length > 0
-      ) {
-        const dataCopy = structuredClone(value);
-
-        initialData.apidata[fileName].apiValues.forEach((item) => {
-          if (item.enabled) {
-            const fieldsObjects = item.fields.map((field) => {
-              return {
-                main: field.name,
-                hint: field.desc,
-              };
-            });
-
-            dataCopy.subSections.push({
-              title: item.name,
-              helperTexts: fieldsObjects,
-            });
-          }
-        });
-
-        initialData.howtouse.push(dataCopy);
-      }
-    });
+    Object.entries(howToUseData)
+      .sort((a, b) => {
+        const key = "sectionName";
 
-    if (initialData.howtouse.length > 0) {
-      initialData.howtouse.sort((a, b) => {
-        if (a.sectionName === "General") {
+        if (a[1][key] === "General") {
           return -1;
-        }
-
-        if (b.sectionName === "General") {
+        } else if (b[1][key] === "General") {
           return 1;
+        } else {
+          return dataSorter(key, a, b);
+        }
+      })
+      .forEach(([key, value]) => {
+        const fileName = key.replace("./data/HowToUse/", "").replace(".js", "");
+
+        const mainBlock = mainValues.find((item) => item.internal === fileName);
+
+        if (fileName === "General") {
+          initialData.howtouse.push(value);
+        } else if (
+          mainBlock &&
+          initialData.apidata[mainBlock.name].apiValues.length > 0
+        ) {
+          const dataCopy = structuredClone(value);
+
+          initialData.apidata[mainBlock.name].apiValues.forEach((item) => {
+            if (item.enabled) {
+              const fieldsObjects = item.fields.map((field) => {
+                return {
+                  main: field.name,
+                  hint: field.desc,
+                };
+              });
+
+              dataCopy.subSections.push({
+                title: item.name,
+                helperTexts: fieldsObjects,
+              });
+            }
+          });
+
+          initialData.howtouse.push(dataCopy);
         }
-
-        return a.sectionName.localeCompare(b.sectionName);
       });
-    }
 
     apiDispatch({ type: "INIT_SET", payload: initialData });
     setLoadedData("INITIAL_SETUP");
@@ -184,7 +198,7 @@ function App() {
         <Header />
         <FeaturesList features={apiState.features} />
         <HowToUse howToUseData={apiState.howtouse} />
-        <APIHandler mainData={apiState.main} apiData={apiState.apidata} />
+        <APIHandler apiData={apiState.apidata} />
       </div>
     </APIContext.Provider>
   ) : null;

diff --git a/src/components/APIHandler.jsx b/src/components/APIHandler.jsx
@@ -48,7 +48,7 @@ const filterInputsReducer = (state, action) => {
   }
 };
 
-const APIHandler = ({ mainData, apiData }) => {
+const APIHandler = ({ apiData }) => {
   const [limitedResults, setLimitedResults] = useState(0);
   const [selectedAPI, setSelectedAPI] = useState({
     idx: -1,
@@ -68,10 +68,6 @@ const APIHandler = ({ mainData, apiData }) => {
     []
   );
 
-  useEffect(() => {
-    setSort(null);
-  }, [apiData]);
-
   useEffect(() => {
     if (selectedAPI.idx !== -1) {
       const apiBlock = apiData[selectedAPI.apiName];
@@ -157,7 +153,6 @@ const APIHandler = ({ mainData, apiData }) => {
           Selecciona una API
         </h2>
         <APIChooser
-          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,16 +2,19 @@ import { useContext, useState, useEffect } from "react";
 import { APIContext } from "../../contexts/appContexts";
 import APIChooserButton from "./APIChooserButton";
 
-const APIChooser = ({ mainData, apiData, selectedAPI, setSelectedAPI }) => {
+const APIChooser = ({ apiData, selectedAPI, setSelectedAPI }) => {
   return (
     <ul className="mb-0 flex list-none flex-row flex-wrap gap-y-2 pt-3 pb-4">
-      {mainData.length > 0 &&
-        mainData.map((entry, index) => {
+      {Object.values(apiData)
+        .sort((a, b) => {
+          return a.apiName.localeCompare(b.apiName);
+        })
+        .map((entry, index) => {
           return (
             <APIChooserButton
               key={index}
-              apiName={entry.name}
-              apiData={apiData}
+              apiName={entry.apiName}
+              apiData={entry}
               selected={selectedAPI.idx === index}
               clickHandler={setSelectedAPI}
               idx={index}

diff --git a/src/components/APIHandlerLogic/APIChooserButton.jsx b/src/components/APIHandlerLogic/APIChooserButton.jsx
@@ -16,7 +16,7 @@ const APIChooserButton = ({
         onClick={(e) => {
           e.preventDefault();
 
-          const { resultsField, continueField } = apiData[apiName];
+          const { resultsField, continueField } = apiData;
           clickHandler({
             idx,
             apiName,

diff --git a/src/components/APIHandlerLogic/APIEndpointButton.jsx b/src/components/APIHandlerLogic/APIEndpointButton.jsx
@@ -7,7 +7,7 @@ const APIEndpointButton = ({
   endpointURL,
   setEndpointURL,
 }) => {
-  const { canClick } = useContext(APIHandlerContext);
+  const { canClick, isLoading } = useContext(APIHandlerContext);
 
   return (
     <a
@@ -19,22 +19,24 @@ const APIEndpointButton = ({
         }
       }}
       className={`group relative inline-block overflow-hidden rounded-full border-2 px-8 py-3 ${
-        canClick
+        canClick && !isLoading
           ? "cursor-pointer border-fuchsia-600"
           : "cursor-not-allowed border-gray-500"
       }`}
       href="#"
     >
       <span
         className={`absolute inset-y-0 left-0 w-0 transition-all ${
-          canClick
+          canClick && !isLoading
             ? "bg-fuchsia-600 group-hover:w-full group-active:bg-fuchsia-500"
             : "w-0 bg-gray-500 group-active:bg-gray-600"
         }`}
       ></span>
       <span
         className={`text-md relative font-medium transition-colors ${
-          canClick ? "text-fuchsia-600 group-hover:text-white" : "text-gray-500"
+          canClick && !isLoading
+            ? "text-fuchsia-600 group-hover:text-white"
+            : "text-gray-500"
         }`}
       >
         {label}

diff --git a/src/components/APIHandlerLogic/APIResultsElements/APIFilterInput.jsx b/src/components/APIHandlerLogic/APIResultsElements/APIFilterInput.jsx
@@ -1,9 +1,14 @@
+import { useContext } from "react";
+import { APIHandlerContext } from "../../../contexts/appContexts";
 import ShinyInput from "../../ShinyInput";
 
 const APIFilterInput = ({ entry, dispatch, idx, filterInputs }) => {
+  const { canClick, isLoading } = useContext(APIHandlerContext);
+
   return (
     <div className="relative mb-5 overflow-hidden">
       <ShinyInput
+        disabled={!canClick || isLoading}
         label={entry.name}
         type="text"
         labelColor="text-fuchsia-500"

diff --git a/src/components/ShinyInput.jsx b/src/components/ShinyInput.jsx
@@ -5,26 +5,36 @@ const ShinyInput = ({
   labelColor,
   changeHandler,
   value,
+  disabled = false,
 }) => {
   return (
     <>
-      <label className={`text-xs font-semibold uppercase ${labelColor}`}>
+      <label
+        className={`text-xs font-semibold uppercase ${
+          !disabled ? labelColor : "text-gray-400"
+        }`}
+      >
         {label}
       </label>
       <div>
         <input
+          disabled={disabled}
           type={type}
-          className="peer form-input max-w-md border-gray-300 bg-white bg-opacity-80 text-black placeholder-gray-400"
+          className="peer form-input max-w-md border-gray-300 bg-white bg-opacity-80 text-black placeholder-gray-400 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-gray-500 disabled:bg-opacity-40"
           onChange={(e) => {
             changeHandler(e.target.value);
           }}
           value={value}
         />
         <span
-          className={`absolute bottom-0 left-0 h-2 transform ${bgColor} w-0 transition-all duration-300 ease-in peer-focus:w-7/12`}
+          className={`absolute bottom-0 left-0 h-2 transform ${
+            !disabled ? bgColor : "text-gray-400"
+          } w-0 transition-all duration-300 ease-in peer-focus:w-7/12 peer-disabled:w-0`}
         />
         <span
-          className={`absolute bottom-0 right-0 h-2 transform ${bgColor} w-0 transition-all duration-300 ease-in peer-focus:w-7/12`}
+          className={`absolute bottom-0 right-0 h-2 transform ${
+            !disabled ? bgColor : "text-gray-400"
+          } w-0 transition-all duration-300 ease-in peer-focus:w-7/12 peer-disabled:w-0`}
         />
       </div>
     </>