refactorizacion

Ignaherrero · May 4, 2022 · f857c3d · f857c3d · vercel · May 4, 2022
1 parent fd6ac1f
commit f857c3d
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 61 deletions.
diff --git a/components/card/index.jsx b/components/card/index.jsx
@@ -1,12 +1,13 @@
 import Image from "next/image";
 import Link from "next/link";
-import { statusFetch } from "../../helper/dictionary";
+import { statusFetch } from "../../helper/constants";
 
 export default function Card({ articles: { data, found } }) {
-  const { notFound } = statusFetch;
+  const { NOTFOUND } = statusFetch;
+
   return (
     <>
-      {found === notFound && (
+      {found === NOTFOUND && (
         <>
           <h1 className="text-center">
             No se encontro el articulo... pero estos son los ultimos articulos
@@ -16,43 +17,40 @@ export default function Card({ articles: { data, found } }) {
         </>
       )}
       <div className="flex justify-center flex-wrap ">
-        {data.length > 0 &&
-          data.map(
-            ({ featured_media: { medium_large }, title, id, categories }) => {
-              const {description}=categories[0];
-              return (
-                <div
-                  className="rounded-lg shadow-lg bg-white max-w-sm m-2 relative"
-                  key={id}
-                >
-                  <a href="#!">
-                    <Image
-                      className="rounded-t-lg object-cover h-64 w-full"
-                      src={medium_large}
-                      alt=""
-                      width={384}
-                      height={200}
-                      priority={true}
-                      loading="eager"
-                    />
-                  </a>
-                  <div className="pt-6 pl-6 pr-6 pb-10">
-                    <h5 className="text-gray-900 text-xl font-medium mb-2">
-                      {title}
-                    </h5>
-                    <p className="text-gray-700 text-base mb-4">
-                      {description}
-                    </p>
-                    <div className="absolute bottom-0 left-40">
-                      <Link href={`/posts/[id]`} as={`/posts/${id}`} key={id}>
-                        Leer mas
-                      </Link>
-                    </div>
+        {data?.length > 0 &&
+          data.map(({ featured_media, title, id, categories }) => {
+            const { description } = categories[0];
+
+            return (
+              <div
+                className="rounded-lg shadow-lg bg-white max-w-sm m-2 relative"
+                key={id}
+              >
+                <a href="#!">
+                  <Image
+                    className="rounded-t-lg object-cover h-64 w-full"
+                    src={featured_media.medium}	
+                    alt=""
+                    width={384}
+                    height={200}
+                    priority={true}
+                    loading="eager"
+                  />
+                </a>
+                <div className="pt-6 pl-6 pr-6 pb-10">
+                  <h5 className="text-gray-900 text-xl font-medium mb-2">
+                    {title}
+                  </h5>
+                  <p className="text-gray-700 text-base mb-4">{description}</p>
+                  <div className="absolute bottom-0 left-40">
+                    <Link href={`/posts/[id]`} as={`/posts/${id}`} key={id}>
+                      Leer mas
+                    </Link>
                   </div>
                 </div>
-              );
-            }
-          )}
+              </div>
+            );
+          })}
       </div>
     </>
   );

diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { statusFetch } from "../../helper/dictionary";
+import { statusFetch } from "../../helper/constants";
 import { getOtherPage } from "../../helper/fetchs";
 
 export default function Pagination({
@@ -10,20 +10,20 @@ export default function Pagination({
   increment,
   decrement,
 }) {
-  const { found, pending } = statusFetch;
+  const { FOUND, PENDING } = statusFetch;
 
   useEffect(() => {
     const getData = async () => {
       if (getValues("article")?.length > 0) {
-        setArticles({ data: [], found: pending });
+        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 });
+        setArticles({ ...response, found: FOUND });
       }
     };
 
@@ -40,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 === pending}
+              disabled={articles.found === PENDING}
               onClick={() => {
                 decrement();
               }}

diff --git a/components/search/index.jsx b/components/search/index.jsx
@@ -1,4 +1,4 @@
-import { statusFetch } from "../../helper/dictionary";
+import { statusFetch } from "../../helper/constants";
 import { getAllLastArticles, searchForArticles } from "../../helper/fetchs";
 
 export default function Search({
@@ -8,23 +8,24 @@ export default function Search({
   register,
   reset,
 }) {
-  const { pending, found, notFound } = statusFetch;
+  const { PENDING, FOUND, NOTFOUND } = statusFetch;
 
   const onSubmit = async (dataForm) => {
-    if (pending) {
-      setArticles({ data: [], found: pending });
+    if (PENDING) {
+      setArticles({ data: [], found: PENDING });
     }
     const data = await searchForArticles(dataForm);
     const { data: response } = data;
     if (response.data.length > 0) {
-      setArticles({ ...response, found: found });
+      setArticles({ ...response, found: FOUND });
     } else {
       data = await getAllLastArticles();
       const { data: response } = data;
-      setArticles({ ...response, found: notFound });
+      setArticles({ ...response, found: NOTFOUND });
     }
     reset();
   };
+
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -80,7 +81,7 @@ export default function Search({
           </div>
         </div>
       </form>
-      {articles.found === pending && <p className="text-center">cargando...</p>}
+      {articles.found === PENDING && <p className="text-center">cargando...</p>}
     </>
   );
 }
diff --git a/helper/constants.js b/helper/constants.js
@@ -0,0 +1,7 @@
+export const statusFetch = {
+  PENDING: "pending",
+  RESOLVED: "resolved",
+  IDLE: "idle",
+  FOUND: "found",
+  NOTFOUND: "notfound",
+};
diff --git a/helper/dictionary.js b/helper/dictionary.js
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -2,18 +2,17 @@ import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { statusFetch } from "../helper/dictionary";
+import { statusFetch } from "../helper/constants";
 import { useCounter } from "../helper/useCounter";
 const Card = dynamic(() => import("../components/card"));
 const Pagination = dynamic(() => import("../components/pagination"));
 const Search = dynamic(() => import("../components/search"));
 
-
-
 export default function Home() {
+  const { IDLE } = statusFetch;
   const [articles, setArticles] = useState({
     data: [],
-    found: statusFetch.idle,
+    found: IDLE,
   });
   const { counter, increment, decrement, reset } = useCounter();
   const {