refactor

components/card/index.jsx

@@ -1,13 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-
-const statusFetch = {
-  pending: "pending",
-  resolved: "resolved",
-  idle: "idle",
-  found: "found",
-  notfound: "notfound",
-};
+import { statusFetch } from "../../helper/dictionary";
 
 export default function Card({ articles }) {
   return (
@@ -51,7 +44,7 @@ export default function Card({ articles }) {
                       as={`/posts/${article.id}`}
                       key={article.id}
                     >
-                      Visitar
+                      Leer mas
                     </Link>
                   </div>
                 </div>

components/pagination/index.jsx

@@ -1,13 +1,5 @@
-import { useEffect, useState } from "react";
-import { useCounter } from "../../helper/useCounter";
-
-const statusFetch = {
-  pending: "pending",
-  resolved: "resolved",
-  idle: "idle",
-  found: "found",
-  notfound: "notfound",
-};
+import { useEffect } from "react";
+import { statusFetch } from "../../helper/dictionary";
 
 export default function Pagination({
   articles,

components/search/index.jsx

@@ -1,33 +1,35 @@
-const statusFetch = {
-  pending: "pending",
-  resolved: "resolved",
-  idle: "idle",
-  found: "found",
-  notfound: "notfound",
-};
+import { statusFetch } from "../../helper/dictionary";
 
-export default function Search({ setArticles, articles, handleSubmit, register, reset }) {
+export default function Search({
+  setArticles,
+  articles,
+  handleSubmit,
+  register,
+  reset,
+}) {
   const onSubmit = async (dataForm) => {
-    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"
+    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}` : ""}`
         );
-        data = await response.json();
-        setArticles({ ...data, found: statusFetch.notFound });
+        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);
       }
-      reset();
-    } catch (err) {
-      console.log(err);
     }
   };
   return (

helper/dictionary.js

@@ -0,0 +1,7 @@
+export const statusFetch = {
+  pending: "pending",
+  resolved: "resolved",
+  idle: "idle",
+  found: "found",
+  notfound: "notfound",
+};

pages/404/index.jsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
+export default function Custom404() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace("/");
+  });
+
+  return null;
+}

pages/_document.jsx

@@ -0,0 +1,35 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const originalRenderPage = ctx.renderPage;
+
+    // Run the React rendering logic synchronously
+    ctx.renderPage = () =>
+      originalRenderPage({
+        // Useful for wrapping the whole react tree
+        enhanceApp: (App) => App,
+        // Useful for wrapping in a per-page basis
+        enhanceComponent: (Component) => Component,
+      });
+
+    // Run the parent `getInitialProps`, it now includes the custom `renderPage`
+    const initialProps = await Document.getInitialProps(ctx);
+
+    return initialProps;
+  }
+
+  render() {
+    return (
+      <Html lang="es">
+        <Head></Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

pages/index.jsx

@@ -2,18 +2,13 @@ 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 { useCounter } from "../helper/useCounter";
-const Card=dynamic(()=>import("../components/card"));
-const Pagination=dynamic(()=>import("../components/pagination"));
-const Search=dynamic(()=>import("../components/search"));
-
-const statusFetch = {
-  pending: "pending",
-  resolved: "resolved",
-  idle: "idle",
-  found: "found",
-  notfound: "notfound",
-};
+const Card = dynamic(() => import("../components/card"));
+const Pagination = dynamic(() => import("../components/pagination"));
+const Search = dynamic(() => import("../components/search"));
+
+
 
 export default function Home() {
   const [articles, setArticles] = useState({
@@ -58,3 +53,10 @@ export default function Home() {
     </>
   );
 }
+
+export async function getStaticProps() {
+  return {
+    props: {},
+    revalidate: 259200,
+  };
+}

pages/posts/[id].js

@@ -2,8 +2,9 @@ import Head from "next/head";
 import React from "react";
 import parse from "html-react-parser";
 import moment from "moment";
-export default function Posts({ post }) {
+import Image from "next/image";
 
+export default function Posts({ post }) {
   return (
     <>
       <Head>
@@ -19,22 +20,28 @@ export default function Posts({ post }) {
 
       <div className="container my-10 mx-auto">
         <section className="mb-32 text-gray-800">
-          <img
-            src={post.featured_media.large}
-            className="w-3/5 m-auto shadow-lg rounded-lg mb-6 object-cover"
-            alt=""
-          />
-
+          <div className="flex justify-center">
+            <Image
+              src={post.featured_media.large}
+              alt=""
+              width="921px"
+              height="613px"
+              priority={true}
+              className="w-3/5 m-auto shadow-lg rounded-lg mb-6 object-cover"
+            />
+          </div>
           <div className="flex items-center mb-6">
             <div>
               <span>
                 {post.author ? (
-                  <div className="flex items-center mb-6">
-                    <img
+                  <div className="flex items-center mt-6">
+                    <Image
                       src={post.author.picture}
                       className="rounded-full mr-2 h-8"
                       alt=""
                       loading="lazy"
+                      width="32px"
+                      height="32px"
                     />
                     <div>
                       <span>
@@ -48,7 +55,9 @@ export default function Posts({ post }) {
                       </a>
                     </div>
                   </div>
-                ) : moment(post.published).format("llll")}
+                ) : (
+                  moment(post.published).format("llll")
+                )}
               </span>
             </div>
           </div>