add custom hook

components/card/index.jsx

@@ -31,8 +31,8 @@ export default function Card({ articles }) {
               >
                 <a href="#!">
                   <Image
-                    className="rounded-t-lg object-fill h-64 w-full"
-                    src={article.featured_media?.thumbnail}
+                    className="rounded-t-lg object-cover h-64 w-full"
+                    src={article.featured_media?.medium}
                     alt=""
                     width={384}
                     height={200}

components/pagination/index.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useCounter } from "../../helper/useCounter";
 
 const statusFetch = {
   pending: "pending",
@@ -8,8 +9,14 @@ const statusFetch = {
   notfound: "notfound",
 };
 
-export default function Pagination({ articles, getValues, setArticles, page, setPage }) {
-
+export default function Pagination({
+  articles,
+  getValues,
+  setArticles,
+  counter,
+  increment,
+  decrement,
+}) {
   useEffect(() => {
     const getOtherPage = async () => {
       if (getValues("article")?.length > 0) {
@@ -20,7 +27,7 @@ export default function Pagination({ articles, getValues, setArticles, page, set
               "article"
             )}${
               getValues("relevant") ? `&orderby=${getValues("relevant")}` : ""
-            }&page=${page}`
+            }&page=${counter}`
           );
           let data = await response.json();
           setArticles({ ...data, found: statusFetch.found });
@@ -31,35 +38,35 @@ export default function Pagination({ articles, getValues, setArticles, page, set
     };
 
     getOtherPage();
-  }, [page, getValues, setArticles]);
+  }, [counter, getValues, setArticles]);
 
   return (
     <>
       {articles?.data.length > 0 && (
         <div className="flex space-x-2 justify-center m-6">
-          {page > 1 && (
+          {counter > 1 && (
             <button
               type="button"
               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}
               onClick={() => {
-                setPage(page - 1);
+                decrement();
               }}
             >
               -
             </button>
           )}
-          <p className="self-center	">{page}</p>
-          {page < articles.pages && (
+          <p className="self-center	">{counter}</p>
+          {counter < articles.pages && (
             <button
               type="button"
               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"
               onClick={() => {
-                setPage(page + 1);
+                increment();
               }}
             >
               +

components/search/index.jsx

@@ -6,7 +6,7 @@ const statusFetch = {
   notfound: "notfound",
 };
 
-export default function Search({ setArticles, articles, handleSubmit, register, setPage }) {
+export default function Search({ setArticles, articles, handleSubmit, register, reset }) {
   const onSubmit = async (dataForm) => {
     setArticles({ data: [], found: statusFetch.pending });
     try {
@@ -25,15 +25,15 @@ export default function Search({ setArticles, articles, handleSubmit, register,
         data = await response.json();
         setArticles({ ...data, found: statusFetch.notFound });
       }
-      setPage(1);
+      reset();
     } catch (err) {
       console.log(err);
     }
   };
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex justify-center">
+        <div className="flex justify-center mt-5">
           <div className="mb-3 xl:w-96">
             <div className="input-group relative flex flex-wrap items-stretch w-full mb-4">
               <input

helper/useCounter.js

@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+export const useCounter = (initialState = 1) => {
+  const [counter, setCounter] = useState(initialState); 
+
+  const reset = () => {
+    setCounter(initialState);
+  };
+
+  const increment = () => {
+    setCounter(counter + 1);
+  };
+
+  const decrement = () => {
+    setCounter(counter - 1);
+  };
+
+  return {
+    counter,
+    increment,
+    decrement,
+    reset,
+  };
+};

pages/index.jsx

@@ -4,6 +4,7 @@ import { useForm } from "react-hook-form";
 import Card from "../components/card";
 import Pagination from "../components/pagination";
 import Search from "../components/search";
+import { useCounter } from "../helper/useCounter";
 
 const statusFetch = {
   pending: "pending",
@@ -18,7 +19,7 @@ export default function Home() {
     data: [],
     found: statusFetch.idle,
   });
-  const [page, setPage] = useState(1);
+  const { counter, increment, decrement, reset } = useCounter();
   const {
     register,
     handleSubmit,
@@ -35,16 +36,23 @@ export default function Home() {
         <meta name="description" content="contenido saludable" />
       </Head>
 
-      <Search articles={articles} setArticles={setArticles} handleSubmit={handleSubmit} register={register} setPage={setPage}/>
+      <Search
+        articles={articles}
+        setArticles={setArticles}
+        handleSubmit={handleSubmit}
+        register={register}
+        reset={reset}
+      />
 
       <Card articles={articles} />
 
       <Pagination
         articles={articles}
         getValues={getValues}
         setArticles={setArticles}
-        page={page}
-        setPage={setPage}
+        counter={counter}
+        increment={increment}
+        decrement={decrement}
       />
     </>
   );