Add CleanFiltersButton component. Fix error in handling filter inputs…

… state object. Make all sort arrow reset to default on endpoint change.

src/components/APIHandler.jsx

@@ -31,8 +31,10 @@ const filterInputsReducer = (state, action) => {
     }
 
     case "RESET_INPUTS": {
-      const newState = structuredClone(state);
-      newState.forEach((input) => (input.value = ""));
+      const newState = [];
+      for (const inputData of state) {
+        newState.push({ fieldName: inputData.fieldName, value: "" });
+      }
 
       return newState;
     }

src/components/APIHandlerLogic/APIResultsElements/APIFilters.jsx

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { APIHandlerContext } from "../../../contexts/appContexts";
+import CleanFiltersButton from "../../Buttons/CleanFiltersButton";
 import APIFilterInput from "./APIFilterInput";
 
 const APIFilters = ({ headers }) => {
@@ -20,12 +21,9 @@ const APIFilters = ({ headers }) => {
         ))}
 
         <div className="flex flex-col gap-4 sm:flex-row">
-          <button className="rounded bg-blue-700 px-4 py-2 font-semibold hover:bg-gradient-to-br hover:from-blue-700 hover:to-blue-500">
-            Filtrar
-          </button>
-          <button className="rounded bg-red-700 px-4 py-2 font-semibold hover:bg-gradient-to-bl hover:from-red-700 hover:to-red-500">
-            Limpiar Filtros
-          </button>
+          <CleanFiltersButton
+            action={() => dispatchFilterInputs({ type: "RESET_INPUTS" })}
+          />
         </div>
       </div>
     </div>

src/components/APIHandlerLogic/APIResultsElements/APITableHeaderField.jsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useState, useEffect } from "react";
 import { APIHandlerContext } from "../../../contexts/appContexts";
 
 const defaultSorter = {
@@ -17,7 +17,11 @@ const defaultSorter = {
 const APITableHeaderField = ({ headerFieldData }) => {
   const [sortAscending, setSortAscending] = useState(true);
 
-  const { setSort } = useContext(APIHandlerContext);
+  const { setSort, endpointURL } = useContext(APIHandlerContext);
+
+  useEffect(() => {
+    setSortAscending(true);
+  }, [endpointURL]);
 
   return (
     <th className="whitespace-nowrap px-4 py-2 text-left font-medium">

src/components/Buttons/CleanFiltersButton.jsx

@@ -0,0 +1,12 @@
+const CleanFiltersButton = ({ action }) => {
+  return (
+    <button
+      className="rounded bg-red-700 px-4 py-2 font-semibold hover:bg-gradient-to-bl hover:from-red-700 hover:to-red-500"
+      onClick={(e) => action()}
+    >
+      Limpiar Filtros
+    </button>
+  );
+};
+
+export default CleanFiltersButton;