Test: implementação final para a realizacao dos testes

.eslintrc.json

@@ -79,12 +79,6 @@
         "tsx": "never"
       }
     ],
-    "@typescript-eslint/explicit-function-return-type": [
-      "error",
-      {
-        "allowExpressions": true
-      }
-    ],
     "@typescript-eslint/camelcase": "off"
   },
   "settings": {

src/components/Header/header.module.scss

@@ -12,18 +12,4 @@
             filter: brightness(0.7);
         }
     }
-
-    span {
-        font-weight: 700;
-        font-size: 1.5rem;
-        display: flex;
-        align-items: center;
-
-        strong {
-            color: var(--pink-500);
-            font-weight: 700;
-            font-size: 2rem;
-            margin-left: 0.25rem;
-        }
-    }
 }

src/components/Header/index.tsx

@@ -7,15 +7,9 @@ import styles from './header.module.scss'
 export default function Header(): ReactElement {
   return (
     <header className={`${commonStyles.container} ${styles.headerContainer}`}>
-
       <Link href='/'>
         <img src="/logo.svg" alt="logo" />
       </Link>
-
-      <span>
-        spacetraveling <strong>.</strong>
-      </span>
-
     </header>
   )
 }

src/pages/home.module.scss

@@ -1,42 +1,52 @@
-.postsList {
-    padding: 0;
-    margin: 1.5rem 0;
+.postItem {
+    text-align: justify;
+    cursor: pointer;
+    display: block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 1rem;
 
-    li {
-        list-style: none;
-        margin-top: 3rem;
-        text-align: justify;
+    h3 {
+        font-size: 1.5rem;
+        line-height: 2.25rem;
+    }
 
-        h3 {
-            font-size: 1.5rem;
-            line-height: 2.25rem;
-        }
+    p {
+        color: var(--gray-200);
+        font-size: 1.125rem; // 18px //
+        line-height: 1.5rem;
+    }
 
-        p {
-            color: var(--gray-200);
-            font-size: 1.125rem; // 18px //
-            line-height: 1.5rem;    
+    footer {
+        margin-top: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        text-transform: capitalize;
+
+        svg {
+            margin-right: 0.25rem;
         }
+    }
 
-        span {
-            display: block;
-            margin-top: 1.5rem;
-            display: flex;
-            align-items: center;
-            text-transform: capitalize;
-
-            :first-child {
-                margin-right: 0.75rem;
-            }
-
-            :last-child {
-                margin-left: 1.5rem;
-                margin-right: 0.75rem;
-            }
+    &:not(:first-child) {
+        margin-top: 3rem;
+    }
+
+    transition: color 0.2s;
+    transition: background-color 0.3s;
+
+    &:hover {
+        color: var(--pink-500);
+        background-color: rgba(0, 0, 0, 0.253);
+
+        p {
+            color: inherit;
         }
     }
 }
 
+
+
 .readMoreButton {
     border: none;
     background: none;
@@ -55,4 +65,4 @@
     &:hover {
         filter: brightness(0.7);
     }
-}
+}

src/pages/index.tsx

@@ -1,12 +1,14 @@
+import { useState } from 'react';
 import { GetStaticProps } from 'next'
-import { ReactElement } from 'react';
+import Head from 'next/head';
+import Link from 'next/link'
+
 import { FiCalendar, FiUser } from 'react-icons/fi'
 
 import PTBR from 'date-fns/locale/pt-BR'
-import { format, parseISO } from 'date-fns'
+import { format } from 'date-fns'
 
 import Prismic from '@prismicio/client'
-import { RichText } from 'prismic-dom';
 import { getPrismicClient } from '../services/prismic';
 
 import commonStyles from '../styles/common.module.scss';
@@ -31,29 +33,91 @@ interface HomeProps {
   postsPagination: PostPagination;
 }
 
-export default function Home({ postsPagination }: HomeProps): ReactElement {
+function formatPosts (posts: PostPagination): Post[]{
+  const formatedPost = posts.results.map(post => {
+    return {
+      uid: post.uid,
+      first_publication_date: format(new Date(post.first_publication_date), 'dd MMM yyyy', {
+        locale: PTBR
+      }),
+      data: {
+        title: post.data.title,
+        subtitle: post.data.subtitle,
+        author: post.data.author,
+      }
+    }
+
+  })
+  return formatedPost
+}
+
+export default function Home({ postsPagination }: HomeProps): JSX.Element {
+
+  // Formata a data dos posts //
+  const postsDataFormated = postsPagination.results.map(post => (
+    {
+      ...post,
+      first_publication_date: format(new Date(post.first_publication_date), 'dd MMM yyyy', {
+        locale: PTBR
+      }) ?? null
+    }
+  ))
+
+  const [posts, setPosts] = useState<Post[]>(postsDataFormated)
+  const [nextPage, setNextPage] = useState(postsPagination.next_page)
+
+  // Carrega mais posts ao clicar em Leia Mais //
+  async function handleToReadMore(): Promise<void>{
+
+    const response = await fetch(postsPagination.next_page)
+
+    const responseJSON = await response.json()
+
+    const newPosts = formatPosts(responseJSON)
+
+    setPosts([...posts, ...newPosts])
+    setNextPage(responseJSON.next_page)
+  }
+
   return (
     <div className={commonStyles.container}>
-      <ul className={styles.postsList}>
-        {
-          postsPagination.results.map(post => {
-            return (
-              <li key={post.uid}>
+
+      <Head>
+        <title>Home | Spacetraveling</title>
+      </Head>
+
+      {
+        posts.map(post => {
+          return (
+            <Link href={`post/${post.uid}`} key={post.uid}>
+              <a className={styles.postItem}>
                 <h3>{post.data.title}</h3>
                 <p>{post.data.subtitle}</p>
-                <span>
-                  <FiCalendar /> {post.first_publication_date}
-                  <FiUser /> {post.data.author}
-                </span>
-              </li>
-            )
-          })
-        }
-      </ul>
-
-      <button type='button' className={styles.readMoreButton}>
-        Carregar mais posts
-      </button>
+                <footer>
+                  <span>
+                    <FiCalendar /> <time>{post.first_publication_date}</time>
+                  </span>
+
+                  <span>
+                    <FiUser /> {post.data.author}
+                  </span>
+                </footer>
+              </a>
+            </Link>
+          )
+        })
+      }
+
+      {
+        nextPage ? (
+          <button 
+            type='button'
+            className={styles.readMoreButton}
+            onClick={handleToReadMore}>
+            Carregar mais posts
+          </button>
+        ) : ''
+      }
     </div>
   )
 }
@@ -62,33 +126,31 @@ export const getStaticProps: GetStaticProps = async (req) => {
   const prismic = getPrismicClient();
 
   const postsResponse = await prismic.query(
-    Prismic.Predicates.at('document.type', 'posts'),
+    Prismic.Predicates.at('document.type', 'publication'),
     {
-      pageSize: 10
+      pageSize: 2,
+      fetch: ['publication.title', 'publication.subtitle', 'publication.author'],
     });
 
   const results = postsResponse.results.map(post => {
     return {
       uid: post.uid,
-      first_publication_date: format(parseISO(post.first_publication_date), 'dd MMM Y', {
-        locale: PTBR
-      }) ?? null,
+      first_publication_date: post.first_publication_date,
       data: {
         title: post.data.title,
         subtitle: post.data.subtitle,
-        author: RichText.asText(post.data.author)
+        author: post.data.author
       }
     }
   })
 
-  const postsPagination = {
-    next_page: postsResponse.next_page,
-    results
-  }
-
   return {
     props: {
-      postsPagination
-    }
+      postsPagination: {
+        next_page: postsResponse.next_page,
+        results
+      }
+    },
+    revalidate: 60 * 60 * 2 // 2 horas //
   }
-};
+};