terceiro dia nlw

heltonricardo · Apr 23, 2021 · 025bbe0 · 025bbe0
1 parent 150ad4e
commit 025bbe0
Show file tree

Hide file tree

Showing 11 changed files with 593 additions and 14 deletions.
diff --git a/anotacao b/anotacao
@@ -0,0 +1,17 @@
+
+
+/* Quando uma informação é colocada no meio de uma tag, nesse caso, como nesse
+ * exemplo: <Button>Texto</Button>, essa informaçaõ é chamada de children, e é
+ * inserida automaticamente nas props (propriedades).
+ *
+ * Para que seja possível renderizar as alterações feitas nas váriáveis que
+ * já foram impressas na tela, usamos a alteração de estado. O setState possui
+ * dois retornos: o primeiro é o valor pra uma variável e o segundo é a função
+ * usada para atualizar o valor na tela. Usamos a desestruturação para atribuir
+ * os retornos para counter e setCounter. Quando alteramos o valor de counter
+ * diretamente, o valor que já foi renderizado na tela não será atualizado.
+ * Para que isso aconteça, utilizamos a função setCounter, passando para ela o
+ * novo valor de counter. Além da função alterar o valor interno de counter,
+ * ela também será responsável por solicitar internamente a atualização desse
+ * valor na tela.
+ */
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+   images: {
+      domains: ["storage.googleapis.com"],
+   },
+};
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "server": "json-server server.json -w -d 750 -p 3333"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "date-fns": "^2.21.1",
     "next": "10.1.3",
     "react": "17.0.2",

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,21 +3,24 @@
  * Ele é carregado uma única vez.
  */
 
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, { Html, Head, Main, NextScript } from "next/document";
 
 export default class MyDocument extends Document {
    render() {
       return (
          <Html>
             <Head>
                <link rel="preconnect" href="https://fonts.gstatic.com" />
-               <link href="https://fonts.googleapis.com/css2?family=Inter&family=Lexend:wght@500;600&display=swap" rel="stylesheet" />
+               <link
+                  href="https://fonts.googleapis.com/css2?family=Inter&family=Lexend:wght@500;600&display=swap"
+                  rel="stylesheet"
+               />
             </Head>
             <body>
                <Main />
                <NextScript />
             </body>
          </Html>
-      )
+      );
    }
-}
+}
diff --git a/src/pages/episodes/[slug].tsx b/src/pages/episodes/[slug].tsx
@@ -0,0 +1,96 @@
+import { GetStaticPaths, GetStaticProps } from "next";
+import { useRouter } from "next/router";
+import { api } from "../../services/api";
+import { format, parseISO } from "date-fns";
+import { convertDurationToTimeString } from "../../utils/convertDurationToTimeString";
+import ptBR from "date-fns/locale/pt-BR";
+import Image from "next/image";
+import Link from "next/link";
+
+import styles from "./episode.module.scss";
+
+type Episode = {
+   id: string;
+   title: string;
+   thumbnail: string;
+   members: string;
+   duration: number;
+   durationAsString: string;
+   url: string;
+   publishedAt: string;
+   description: string;
+};
+
+type EpisodeProps = {
+   episode: Episode;
+};
+
+export default function Episode({ episode }: EpisodeProps) {
+   const router = useRouter();
+
+   return (
+      <div className={styles.episode}>
+         <div className={styles.thumbnailContainer}>
+            <Link href="/">
+               <button type="button">
+                  <img src="/arrow-left.svg" alt="Voltar" />
+               </button>
+            </Link>
+            <Image
+               width={700}
+               height={160}
+               src={episode.thumbnail}
+               objectFit="cover"
+            />
+            <button type="button">
+               <img src="/play.svg" alt="Tocar episódio" />
+            </button>
+         </div>
+
+         <header>
+            <h1>{episode.title}</h1>
+            <span>{episode.members}</span>
+            <span>{episode.publishedAt}</span>
+            <span>{episode.durationAsString}</span>
+         </header>
+
+         <div
+            className={styles.description}
+            dangerouslySetInnerHTML={{ __html: episode.description }}
+         />
+      </div>
+   );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+   return {
+      paths: [],
+      fallback: "blocking",
+   };
+};
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+   const { slug } = ctx.params;
+   const { data } = await api.get(`/episodes/${slug}`);
+
+   const episode = {
+      id: data.id,
+      title: data.title,
+      thumbnail: data.thumbnail,
+      members: data.members,
+      publishedAt: format(parseISO(data.published_at), "d MMM yy", {
+         locale: ptBR,
+      }),
+      duration: Number(data.file.duration),
+      durationAsString: convertDurationToTimeString(Number(data.file.duration)),
+      description: data.description,
+      url: data.file.url,
+   };
+
+   return {
+      props: {
+         episode,
+      },
+      revalidate: 60 * 60 * 24, // 24h
+   };
+};
diff --git a/src/pages/episodes/episode.module.scss b/src/pages/episodes/episode.module.scss
@@ -0,0 +1,86 @@
+.episode {
+   max-width: 45rem;
+   padding: 3rem 2rem;
+   margin: 0 auto;
+
+   .thumbnailContainer {
+      position: relative;
+
+      img {
+         border-radius: 1rem;
+      }
+
+      button {
+         width: 3rem;
+         height: 3rem;
+         border-radius: 0.75rem;
+         border: 0;
+         position: absolute;
+         z-index: 5;
+         font-size: 0;
+
+         transition: filter 0.2s;
+
+         &:first-child {
+            left: 0;
+            top: 50%;
+            background: var(--purple-500);
+            transform: translate(-50%, -50%);
+         }
+
+         &:last-child {
+            right: 0;
+            top: 50%;
+            background: var(--green-500);
+            transform: translate(50%, -50%);
+         }
+
+         &:hover {
+            filter: brightness(0.9);
+         }
+      }
+   }
+
+   header {
+      padding-bottom: 1rem;
+      border-bottom: 1px solid var(--gray-100);
+
+      h1 {
+         margin-top: 2rem;
+         margin-bottom: 1.5rem;
+      }
+
+      span {
+         display: inline-block;
+         font-size: 0.875rem;
+
+         & + span {
+            margin-left: 1rem;
+            padding-left: 1rem;
+            position: relative;
+
+            &::before {
+               content: "";
+               width: 4px;
+               height: 4px;
+               border-radius: 2px;
+               background: #ddd;
+               position: absolute;
+               left: 0;
+               top: 50%;
+               transform: translate(-50%, -50%);
+            }
+         }
+      }
+   }
+
+   .description {
+      margin-top: 2rem;
+      line-height: 1.675rem;
+      color: var(--gray-800);
+
+      p {
+         margin: 1.5rem 0;
+      }
+   }
+}