From bc280d0c39f88d99883dc6e90960d3de30944a4b Mon Sep 17 00:00:00 2001 From: nacho Date: Sat, 30 Apr 2022 13:13:01 -0300 Subject: [PATCH] refactor --- components/card/index.jsx | 11 ++----- components/pagination/index.jsx | 12 ++------ components/search/index.jsx | 54 +++++++++++++++++---------------- helper/dictionary.js | 7 +++++ pages/404/index.jsx | 12 ++++++++ pages/_document.jsx | 35 +++++++++++++++++++++ pages/index.jsx | 24 ++++++++------- pages/posts/[id].js | 29 ++++++++++++------ 8 files changed, 118 insertions(+), 66 deletions(-) create mode 100644 helper/dictionary.js create mode 100644 pages/404/index.jsx create mode 100644 pages/_document.jsx diff --git a/components/card/index.jsx b/components/card/index.jsx index 37dcb2a..0492f59 100644 --- a/components/card/index.jsx +++ b/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 diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx index 9c1fa32..d299c79 100644 --- a/components/pagination/index.jsx +++ b/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, diff --git a/components/search/index.jsx b/components/search/index.jsx index 010f11c..5cec84b 100644 --- a/components/search/index.jsx +++ b/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 ( diff --git a/helper/dictionary.js b/helper/dictionary.js new file mode 100644 index 0000000..390a5cd --- /dev/null +++ b/helper/dictionary.js @@ -0,0 +1,7 @@ +export const statusFetch = { + pending: "pending", + resolved: "resolved", + idle: "idle", + found: "found", + notfound: "notfound", +}; diff --git a/pages/404/index.jsx b/pages/404/index.jsx new file mode 100644 index 0000000..5125d2d --- /dev/null +++ b/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; +} diff --git a/pages/_document.jsx b/pages/_document.jsx new file mode 100644 index 0000000..ef8e2f5 --- /dev/null +++ b/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 ( + + + +
+ + + + ); + } +} + +export default MyDocument; diff --git a/pages/index.jsx b/pages/index.jsx index 495f13d..3850645 100644 --- a/pages/index.jsx +++ b/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, + }; +} diff --git a/pages/posts/[id].js b/pages/posts/[id].js index 66de1ac..7831bd7 100644 --- a/pages/posts/[id].js +++ b/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 ( <> @@ -19,22 +20,28 @@ export default function Posts({ post }) {
- - +
+ +
{post.author ? ( -
- +
@@ -48,7 +55,9 @@ export default function Posts({ post }) {
- ) : moment(post.published).format("llll")} + ) : ( + moment(post.published).format("llll") + )}