refactorizo

components/pagination/index.jsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { statusFetch } from "../../helper/dictionary";
+import { getOtherPage } from "../../helper/fetchs";
 
 export default function Pagination({
   articles,
@@ -9,27 +10,24 @@ export default function Pagination({
   increment,
   decrement,
 }) {
+  const { found, pending } = statusFetch;
+
   useEffect(() => {
-    const getOtherPage = async () => {
+    const getData = async () => {
       if (getValues("article")?.length > 0) {
-        setArticles({ data: [], found: statusFetch.pending });
-        try {
-          let response = await fetch(
-            `https://beta.mejorconsalud.com/wp-json/mc/v3/posts?search=${getValues(
-              "article"
-            )}${
-              getValues("relevant") ? `&orderby=${getValues("relevant")}` : ""
-            }&page=${counter}`
-          );
-          let data = await response.json();
-          setArticles({ ...data, found: statusFetch.found });
-        } catch (err) {
-          console.log(err);
-        }
+        setArticles({ data: [], found: pending });
+        const args = {
+          relevant: getValues("relevant"),
+          article: getValues("article"),
+          counter,
+        };
+        const data = await getOtherPage(args);
+        const { data: response } = data;
+        setArticles({ ...response, found: found });
       }
     };
 
-    getOtherPage();
+    getData();
   }, [counter, getValues, setArticles]);
 
   return (
@@ -42,7 +40,7 @@ export default function Pagination({
               data-mdb-ripple="true"
               data-mdb-ripple-color="light"
               className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-              disabled={articles.found === statusFetch.pending}
+              disabled={articles.found === pending}
               onClick={() => {
                 decrement();
               }}

helper/fetchs.js

@@ -47,4 +47,34 @@ const getAllLastArticles = async () => {
   return data;
 };
 
-export { searchForArticles, getAllLastArticles };
+const getOtherPage = async ({ article, counter, relevant }) => {
+  const data = {};
+  const params = {};
+  try {
+    if (relevant) {
+      params = {
+        search: article,
+        orderby: relevant,
+        page: counter,
+      };
+    } else {
+      params = {
+        search: article,
+        page: counter,
+      };
+    }
+    data = await axios({
+      method: "get",
+      url: `https://beta.mejorconsalud.com/wp-json/mc/v3/posts?`,
+      params: {
+        ...params,
+      },
+      responseType: "json",
+    });
+  } catch (err) {
+    console.log(err);
+  }
+  return data;
+};
+
+export { searchForArticles, getAllLastArticles, getOtherPage };