refactor

components/card/index.jsx

@@ -2,10 +2,11 @@ import Image from "next/image";
 import Link from "next/link";
 import { statusFetch } from "../../helper/dictionary";
 
-export default function Card({ articles }) {
+export default function Card({ articles: { data, found } }) {
+  const { notFound } = statusFetch;
   return (
     <>
-      {articles.found === statusFetch.notFound && (
+      {found === notFound && (
         <>
           <h1 className="text-center">
             No se encontro el articulo... pero estos son los ultimos articulos
@@ -15,44 +16,43 @@ export default function Card({ articles }) {
         </>
       )}
       <div className="flex justify-center flex-wrap ">
-        {articles?.data &&
-          articles.data.map((article) => {
-            return (
-              <div
-                className="rounded-lg shadow-lg bg-white max-w-sm m-2 relative"
-                key={article.id}
-              >
-                <a href="#!">
-                  <Image
-                    className="rounded-t-lg object-cover h-64 w-full"
-                    src={article.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">
-                    {article.title}
-                  </h5>
-                  <p className="text-gray-700 text-base mb-4">
-                    {article.categories[0].description}
-                  </p>
-                  <div className="absolute bottom-0 left-40">
-                    <Link
-                      href={`/posts/[id]`}
-                      as={`/posts/${article.id}`}
-                      key={article.id}
-                    >
-                      Leer mas
-                    </Link>
+        {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>
                   </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            }
+          )}
       </div>
     </>
   );

components/search/index.jsx

@@ -1,4 +1,5 @@
 import { statusFetch } from "../../helper/dictionary";
+import { getAllLastArticles, searchForArticles } from "../../helper/fetchs";
 
 export default function Search({
   setArticles,
@@ -7,30 +8,22 @@ export default function Search({
   register,
   reset,
 }) {
+  const { pending, found, notFound } = statusFetch;
+
   const onSubmit = async (dataForm) => {
-    if (statusFetch.pending) {
-      setArticles({ data: [], found: statusFetch.pending });
-      try {
-        let response = await fetch(
-          `https://beta.mejorconsalud.com/wp-json/mc/v3/posts?search=${
-            dataForm.article
-          }${dataForm.relevant ? `&orderby=${dataForm.relevant}` : ""}`
-        );
-        let data = await response.json();
-        if (data.size > 0) {
-          setArticles({ ...data, found: statusFetch.found });
-        } else {
-          response = await fetch(
-            "https://beta.mejorconsalud.com/wp-json/mc/v3/posts?orderby=date&order=desc"
-          );
-          data = await response.json();
-          setArticles({ ...data, found: statusFetch.notFound });
-        }
-        reset();
-      } catch (err) {
-        console.log(err);
-      }
+    if (pending) {
+      setArticles({ data: [], found: pending });
+    }
+    const data = await searchForArticles(dataForm);
+    const { data: response } = data;
+    if (response.data.length > 0) {
+      setArticles({ ...response, found: found });
+    } else {
+      data = await getAllLastArticles();
+      const { data: response } = data;
+      setArticles({ ...response, found: notFound });
     }
+    reset();
   };
   return (
     <>
@@ -87,9 +80,7 @@ export default function Search({
           </div>
         </div>
       </form>
-      {articles.found === statusFetch.pending && (
-        <p className="text-center">cargando...</p>
-      )}
+      {articles.found === pending && <p className="text-center">cargando...</p>}
     </>
   );
 }

helper/fetchs.js

@@ -0,0 +1,50 @@
+import axios from "axios";
+
+const searchForArticles = async ({ article, relevant }) => {
+  const data = {};
+  const params = {};
+  try {
+    if (relevant) {
+      params = {
+        search: article,
+        orderby: relevant,
+      };
+    } else {
+      params = {
+        search: article,
+      };
+    }
+    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;
+};
+
+const getAllLastArticles = async () => {
+  const data = {};
+  try {
+    data = await axios({
+      method: "get",
+      url: `https://beta.mejorconsalud.com/wp-json/mc/v3/posts?`,
+      params: {
+        orderby: "date",
+        order: "desc",
+      },
+      responseType: "json",
+    });
+  } catch (err) {
+    console.log(err);
+  }
+  return data;
+};
+
+export { searchForArticles, getAllLastArticles };

helper/useFetch.js

@@ -0,0 +1,41 @@
+import { useState, useEffect, useRef } from "react";
+
+export const useFetch = (url) => {
+  const isMounted = useRef(true);
+  const [state, setState] = useState({
+    data: null,
+    loading: true,
+    error: null,
+  });
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    setState({ data: null, loading: true, error: null });
+
+    fetch(url)
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (isMounted.current) {
+          setState({
+            loading: false,
+            error: null,
+            data,
+          });
+        }
+      })
+      .catch(() => {
+        setState({
+          loading: false,
+          error: "no hay datos",
+          data: null,
+        });
+      });
+  }, [url]);
+
+  return state;
+};

package.json

@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 9045",
+    "dev": "npx next dev -p 9045",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "cypress": "cypress open",
+    "lint-fix": "eslint --fix --ext .js,.jsx ."
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "html-react-parser": "^1.4.10",
     "moment": "^2.29.2",
     "next": "12.1.4",