From 01049d44f8098ed8a7329382dfc1cb814d4e407f Mon Sep 17 00:00:00 2001 From: Felipe Lobo Date: Wed, 21 Apr 2021 16:55:55 -0300 Subject: [PATCH] concluindo dia 3 da nlw --- next.config.js | 5 + package.json | 1 + public/{play-green.svg => play-orange.svg} | 2 +- server.json | 56 +++---- src/components/Header/index.tsx | 2 +- src/pages/episodios/[slug].tsx | 93 ++++++++++++ src/pages/episodios/episode.module.scss | 86 +++++++++++ src/pages/home.module.scss | 169 +++++++++++++++++++++ src/pages/index.tsx | 156 +++++++++++++++++-- src/services/api.ts | 7 + src/utils/convertDurationToTimeString.ts | 12 ++ yarn.lock | 12 ++ 12 files changed, 558 insertions(+), 43 deletions(-) create mode 100644 next.config.js rename public/{play-green.svg => play-orange.svg} (91%) create mode 100644 src/pages/episodios/[slug].tsx create mode 100644 src/pages/episodios/episode.module.scss create mode 100644 src/pages/home.module.scss create mode 100644 src/services/api.ts create mode 100644 src/utils/convertDurationToTimeString.ts diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..9d986e1 --- /dev/null +++ b/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + images: { + domains: ['images.unsplash.com', 'storage.googleapis.com'], + } +} \ No newline at end of file diff --git a/package.json b/package.json index 3ba1029..f2a74a9 100644 --- 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/public/play-green.svg b/public/play-orange.svg similarity index 91% rename from public/play-green.svg rename to public/play-orange.svg index 55fb1ca..eb94ca3 100644 --- a/public/play-green.svg +++ b/public/play-orange.svg @@ -1,3 +1,3 @@ - + diff --git a/server.json b/server.json index 69c4092..2c29cba 100644 --- a/server.json +++ b/server.json @@ -2,11 +2,11 @@ "episodes": [ { "id": "a-importancia-da-contribuicao-em-open-source", - "title": "Faladev #30 | A importância da contribuição em Open Source", + "title": "devTalk #30 | A importância da contribuição em Open Source", "members": "Diego Fernandes, João Pedro, Diego Haz e Bruno Lemos", "published_at": "2021-01-22 16:35:40", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/opensource.jpg", - "description": "

Nesse episódio do Faladev, Diego Fernandes se reúne com João Pedro Schmitz, Bruno Lemos e Diego Haz, para discutir sobre a importância da contribuição open source e quais desafios circulam na comunidade.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original Rocketseat.

", + "thumbnail": "https://images.unsplash.com/photo-1487537023671-8dce1a785863?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", + "description": "

Nesse episódio do devTalk, Diego Fernandes se reúne com João Pedro Schmitz, Bruno Lemos e Diego Haz, para discutir sobre a importância da contribuição open source e quais desafios circulam na comunidade.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat.

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/opensource.m4a", "type": "audio/x-m4a", @@ -15,11 +15,11 @@ }, { "id": "uma-conversa-sobre-programacao-funcional-e-orientacao-a-objetos", - "title": "Faladev #29 | Duas perspectivas diferentes na mesa: uma conversa sobre PF e OOP", + "title": "devTalk #29 | Duas perspectivas diferentes na mesa: uma conversa sobre PF e OOP", "members": "Diego Fernandes, Dani Leão, Laura Beatris e Rafael Camarda", "published_at": "2021-01-15 13:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/funcional.jpg", - "description": "

Diego e Dani receberam Laura Beatris e Rafael Camarda na mesa do Faladev para conversarem sobre programação funcional e programação orientada a objetos.

Análises de mercado, conceitos na prática e desafios na adoção de qualquer método de desenvolvimento. Tudo isso numa conversa dinâmica e relevante para nosso público.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original Rocketseat.

\n", + "thumbnail": "https://images.unsplash.com/photo-1581368135153-a506cf13b1e1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fHBvZGNhc3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + "description": "

Diego e Dani receberam Laura Beatris e Rafael Camarda na mesa do devTalk para conversarem sobre programação funcional e programação orientada a objetos.

Análises de mercado, conceitos na prática e desafios na adoção de qualquer método de desenvolvimento. Tudo isso numa conversa dinâmica e relevante para nosso público.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat.

\n", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/funcional.m4a", "type": "audio/x-m4a", @@ -28,11 +28,11 @@ }, { "id": "barreiras-e-solucoes-propostas-por-micro-servicos", - "title": "Faladev #28 | Por trás de barreiras e soluções propostas por micro-serviços", + "title": "devTalk #28 | Por trás de barreiras e soluções propostas por micro-serviços", "members": "Diego Fernandes, Dani Leão, Wesley Williams e Lucas Santos", "published_at": "2021-01-08 13:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/microservicos.jpg", - "description": "

Os desenvolvedores Wesley Willians e Lucas Santos foram convidados para este Faladev para ter uma conversa sobre o que são micro-serviços e quais são os desafios e as barreiras de sua aplicação.

Nessa edição, Diego Fernandes e Daniele Evangelista guiam a conversa levantando tópicos e questionamentos relevantes sobre o assunto.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original Rocketseat.  #programação #rocketseat #programador #programador

", + "thumbnail": "https://images.unsplash.com/photo-1593697909777-138e8c90ac91?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fHBvZGNhc3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + "description": "

Os desenvolvedores Wesley Willians e Lucas Santos foram convidados para este devTalk para ter uma conversa sobre o que são micro-serviços e quais são os desafios e as barreiras de sua aplicação.

Nessa edição, Diego Fernandes e Daniele Evangelista guiam a conversa levantando tópicos e questionamentos relevantes sobre o assunto.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat.  #programação #rocketseat #programador #programador

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/microservicos.m4a", "type": "audio/x-m4a", @@ -41,11 +41,11 @@ }, { "id": "aplicacao-de-arquiteturas-mvc-e-clean-architecture-na-pratica", - "title": "Faladev #27 | Aplicação de arquiteturas MVC e CA na prática", + "title": "devTalk #27 | Aplicação de arquiteturas MVC e CA na prática", "members": "Diego Fernandes, Dani Leão, Otávio Lemos e Rodrigo Branas", "published_at": "2020-12-18 14:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/clean.jpg", - "description": "

Diego Fernandes e Daniele Evangelista receberam Otávio Lemos e Rodrigo Branas para bater um papo sobre arquiteturas modernas de desenvolvimento, aplicadas na indústria da tecnologia.

Quais são os fundamentos, os princípios e a importância de debater arquiteturas neste ecossistema?

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original Rocketseat.  Ficha técnica Hosts: Diego Fernandes e Daniele Leão Evangelista Convidados: Otávio Lemos  e Rodrigo Branas Roteiro: Felipe Buzzi, Beatriz Clasen e Thiago Marinho Edição: Thiago Santana Produção: Leonardo Minatti

", + "thumbnail": "https://images.unsplash.com/photo-1593697821094-53ed19153f21?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTR8fHBvZGNhc3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + "description": "

Diego Fernandes e Daniele Evangelista receberam Otávio Lemos e Rodrigo Branas para bater um papo sobre arquiteturas modernas de desenvolvimento, aplicadas na indústria da tecnologia.

Quais são os fundamentos, os princípios e a importância de debater arquiteturas neste ecossistema?

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat.  Ficha técnica Hosts: Diego Fernandes e Daniele Leão Evangelista Convidados: Otávio Lemos  e Rodrigo Branas Roteiro: Felipe Buzzi, Beatriz Clasen e Thiago Marinho Edição: Thiago Santana Produção: Leonardo Minatti

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/clean.m4a", "type": "audio/x-m4a", @@ -54,11 +54,11 @@ }, { "id": "entrevista-jose-valim-criador-do-elixir", - "title": "Faladev #26 | Especial: entrevista exclusiva com José Valim, criador da linguagem Elixir", + "title": "devTalk #26 | Especial: entrevista exclusiva com José Valim, criador da linguagem Elixir", "members": "Diego Fernandes e José Valim", "published_at": "2020-12-04 15:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/josevalim.jpg", - "description": "

Nesta edição especial de final de temporada tivemos a oportunidade de ter uma conversa com José Valim, dev brasileiro que criou a linguagem de programação Elixir — utilizada internacionalmente em diversas tecnologias, incluindo Discord e Pinterest.

O assunto da semana girou em diversos processos envolvidos na criação de uma linguagem nova, que propõe ser uma alternativa eficiente no mercado da tecnologia.

Além de tudo isso, Valim pôde falar de muito código e sobre a sua jornada e experiência em criar uma comunidade ativa por trás do open source.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original da Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev.

", + "thumbnail": "https://images.unsplash.com/photo-1526328828355-69b01701ca6a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDF8fHBvZGNhc3R8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "description": "

Nesta edição especial de final de temporada tivemos a oportunidade de ter uma conversa com José Valim, dev brasileiro que criou a linguagem de programação Elixir — utilizada internacionalmente em diversas tecnologias, incluindo Discord e Pinterest.

O assunto da semana girou em diversos processos envolvidos na criação de uma linguagem nova, que propõe ser uma alternativa eficiente no mercado da tecnologia.

Além de tudo isso, Valim pôde falar de muito código e sobre a sua jornada e experiência em criar uma comunidade ativa por trás do open source.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev.

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/jose-valim.m4a", "type": "audio/x-m4a", @@ -67,11 +67,11 @@ }, { "id": "o-que-e-ui-ux", - "title": "Faladev #25 | O que é UX/UI?", + "title": "devTalk #25 | O que é UX/UI?", "members": "Diego Fernandes, Tiago Luchtenberg e Thainan Librelon", "published_at": "2020-10-30 14:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/design.jpg", - "description": "

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev.

Nesse episódio, Diego Fernandes se reúne com Thainan Librelon e Tiago Luchtenberg para discutir sobre: Desenvolvedor pode fazer o trabalho do UI/UX, qual impacto? Qual é o momento ideal pra ter pessoas especializadas em UX e UI? E afinal, o que é UI e o que é UX?

", + "thumbnail": "https://images.unsplash.com/photo-1581368163672-d717bcb4c6af?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTI1fHxwb2RjYXN0fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + "description": "

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev.

Nesse episódio, Diego Fernandes se reúne com Thainan Librelon e Tiago Luchtenberg para discutir sobre: Desenvolvedor pode fazer o trabalho do UI/UX, qual impacto? Qual é o momento ideal pra ter pessoas especializadas em UX e UI? E afinal, o que é UI e o que é UX?

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/design.m4a", "type": "audio/x-m4a", @@ -80,11 +80,11 @@ }, { "id": "como-virar-lider-desenvolvimento", - "title": "Faladev #24 | Como virar líder de desenvolvimento?", + "title": "devTalk #24 | Como virar líder de desenvolvimento?", "members": "Diego Fernandes, João Paulo e Cleiton Souza", "published_at": "2020-10-23 14:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/lider-desenvolvimento.jpg", - "description": "

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev. Nesse episódio, Diego Fernandes se reúne com Cleiton Souza e João Paulo de Magalhães para discutir sobre liderança, considerando aspectos profissionais, técnicos e até mesmo emocionais, o que envolve ser um líder de desenvolvimento? Afinal, o que é um líder de desenvolvimento?

", + "thumbnail": "https://images.unsplash.com/photo-1617540702506-89475a91c171?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQzfHxwb2RjYXN0fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + "description": "

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev. Nesse episódio, Diego Fernandes se reúne com Cleiton Souza e João Paulo de Magalhães para discutir sobre liderança, considerando aspectos profissionais, técnicos e até mesmo emocionais, o que envolve ser um líder de desenvolvimento? Afinal, o que é um líder de desenvolvimento?

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/lider-desenvolvimento.m4a", "type": "audio/x-m4a", @@ -93,11 +93,11 @@ }, { "id": "comunidades-e-tecnologia", - "title": "FalaDev #23 | O que comunidades têm a ver com tecnologia?", + "title": "devTalk #23 | O que comunidades têm a ver com tecnologia?", "members": "Diego Fernandes, Isabela Castilho e João Inácio", "published_at": "2020-10-16 13:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/comunidade.jpg", - "description": "

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O Faladev é um podcast original Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev.

Nesse primeiro episódio da nova temporada, Diego Fernandes se reúne com Isabela Castilho e João Inácio Neto (Biro) para discutir sobre comunidades e o impacto que elas exercem na carreira de devs em busca do próximo nível. Afinal, O que é uma comunidade e o que tem a ver com tecnologia?

", + "thumbnail": "https://images.unsplash.com/photo-1613293013187-9d6a2322519f?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTUxfHxwb2RjYXN0fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", + "description": "

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso. Toda semana reunimos três profissionais da tecnologia para discutir sobre tudo que circula na órbita da programação.

O devTalk é um podcast inspirado no FalaDev da Rocketseat onde conversamos sobre diversos assuntos que importam para a sua carreira dev.

Nesse primeiro episódio da nova temporada, Diego Fernandes se reúne com Isabela Castilho e João Inácio Neto (Biro) para discutir sobre comunidades e o impacto que elas exercem na carreira de devs em busca do próximo nível. Afinal, O que é uma comunidade e o que tem a ver com tecnologia?

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/comunidade.m4a", "type": "audio/x-m4a", @@ -106,10 +106,10 @@ }, { "id": "typescript-vale-a-pena", - "title": "FalaDev #22 - TypeScript vale a pena? JavaScript perde sentido?", + "title": "devTalk #22 - TypeScript vale a pena? JavaScript perde sentido?", "members": "Diego Fernandes, Mayk Brito e João Pedro", "published_at": "2020-05-04 14:49:35", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/typescript.jpg", + "thumbnail": "https://images.unsplash.com/photo-1597154036887-59afbb411f3b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODh8fHBvZGNhc3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", "description": "

Três programadores conversam sobre TypeScript.

Vamos discutir a usabilidade e as previsões da linguagem no cenário da programação.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso.

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/typescript.m4a", @@ -119,10 +119,10 @@ }, { "id": "estrategias-de-autenticacao-jwt-oauth", - "title": "FalaDev #21 - Estratégias de autenticação, JWT, OAuth, qual usar?", + "title": "devTalk #21 - Estratégias de autenticação, JWT, OAuth, qual usar?", "members": "Diego Fernandes, Higo Ribeiro e Guilherme Pellizzetti", "published_at": "2020-04-09 20:00:00", - "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/autenticacao.jpg", + "thumbnail": "https://images.unsplash.com/photo-1560775349-39d77e454b0a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nzh8fHBvZGNhc3R8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", "description": "

Três programadores conversam sobre estratégia de autenticação.

Vamos discutir quais aspectos você deve considerar na hora de fazer a sua escolha.

A gente passa a maior parte do tempo escrevendo código. Agora chegou o momento de falar sobre isso.

", "file": { "url": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/audios/autenticacao.m4a", diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 7a78d4e..75bf405 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -13,7 +13,7 @@ export function Header() { logo -

Para se manter programando .

+

Para se manter programando atualizado.

{currentDate} diff --git a/src/pages/episodios/[slug].tsx b/src/pages/episodios/[slug].tsx new file mode 100644 index 0000000..8f96ec0 --- /dev/null +++ b/src/pages/episodios/[slug].tsx @@ -0,0 +1,93 @@ +import { format, parseISO } from "date-fns"; +import ptBR from "date-fns/locale/pt-BR"; +import { GetStaticPaths, GetStaticProps } from "next"; +import api from "../../services/api"; +import { convertDurationToTimeString } from "../../utils/convertDurationToTimeString"; +import styles from "./episode.module.scss"; +import Image from "next/image"; +import Link from 'next/link'; + +type Episode = { + id: string; + title: string; + members: string; + publishedAt: string; + thumbnail: string; + duration: number; + url: string; + description: string; + durationAsString: string; +}; + +type EpisodeProps = { + episode: Episode; +}; + +export default function Episode({ episode }: EpisodeProps) { + return ( +
+
+ + + + + +
+ +
+

{episode.title}

+ {episode.members} + {episode.publishedAt} + {episode.durationAsString} +
+ +
+
+ ); +} + +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 * 2, //pg atualizada a cada 48 horas + }; +}; diff --git a/src/pages/episodios/episode.module.scss b/src/pages/episodios/episode.module.scss new file mode 100644 index 0000000..a132103 --- /dev/null +++ b/src/pages/episodios/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(--blue-200); + transform: translate(-50%, -50%); + } + + &:last-child { + right: 10; + top: 50%; + background: var(--orange-300); + 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(--gra-800); + + p { + margin: 1.5rem 0; + } + } +} diff --git a/src/pages/home.module.scss b/src/pages/home.module.scss new file mode 100644 index 0000000..90650ae --- /dev/null +++ b/src/pages/home.module.scss @@ -0,0 +1,169 @@ +.homepage { + padding: 0 4rem; + height: calc(100vh - 6.5rem); + overflow-y: scroll; + + h2 { + margin-top: 3rem; + margin-bottom: 1.5rem; + } +} + +.latestEpisodes { + ul { + list-style: none; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + + li { + background: var(--white); + border: 1px solid var(--gray-100); + padding: 1.25rem; + border-radius: 1.5rem; + position: relative; + display: flex; + align-items: center; + + img { + width: 6rem; + height: 6rem; + border-radius: 1rem; + } + + .episodeDetails { + flex: 1; + margin-left: 1rem; + + a { + display: block; + color: var(--gray-800); + font-family: Lexend, sans-serif; + font-weight: 600; + text-decoration: none; + line-height: 1.4rem; + + &:hover { + text-decoration: underline; + } + } + p { + font-size: 0.875rem; + margin-top: 0.5rem; + max-width: 70%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + span { + display: inline-block; + margin-top: 0.5rem; + font-size: 0.875rem; + + &:last-child { + margin-left: 0.5rem; + padding-left: 0.5rem; + position: relative; + + &::before { + content: ""; + width: 4px; + height: 4px; + border-radius: 2px; + background: #ddd; + position: absolute; + left: 0; + top: 50%; + transform: translate(-50%, -50%); + } + } + } + } + button { + position: absolute; + right: 2rem; + bottom: 2rem; + width: 2.5rem; + height: 2.5rem; + background: var(--white); + border: 1px solid var(--gray-100); + border-radius: 0.675rem; + font-size: 0; + transition: filter 0.2s; + + img { + width: 1.5rem; + height: 1.5rem; + } + + &:hover { + filter: brightness(0.95); + } + } + } + } +} + +.allEpisodes { + padding-bottom: 2rem; + + table { + width: 100%; + + th, + td { + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--gray-100); + } + + th { + color: var(--gray-200); + text-transform: uppercase; + font: 500 0.75rem Lexend, sans-serif; + text-align: left; + } + + td { + font-size: 0.875rem; + + img { + width: 2.5rem; + height: 2.5rem; + border-radius: 0.5rem; + } + + a { + color: var(--gray-800); + font-family: Lexend, sans-serif; + font-weight: 600; + text-decoration: none; + line-height: 1.4rem; + font-size: 1rem; + + &:hover { + text-decoration: underline; + } + } + } + button { + width: 2rem; + height: 2rem; + background: var(--white); + border: 1px solid var(--gray-100); + border-radius: 0.5rem; + font-size: 0; + transition: filter 0.2s; + + img { + width: 1.25rem; + height: 1.25rem; + } + + &:hover { + filter: brightness(0.95); + } + } + } + } + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c8e0b8c..62f8de6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,22 +1,152 @@ -import { Header } from "../components/Header"; +import { GetStaticProps } from "next"; +import Image from "next/image"; +import { format, parseISO } from "date-fns"; +import ptBR from "date-fns/locale/pt-BR"; +import api from "../services/api"; +import { convertDurationToTimeString } from "../utils/convertDurationToTimeString"; +import styles from "../pages/home.module.scss"; +import Link from "next/link"; -export default function Home(props) { +type Episode = { + id: string; + title: string; + members: string; + publishedAt: string; + thumbnail: string; + duration: number; + url: string; + durationAsString: string; +}; + +type HomeProps = { + latestEpisodes: Episode[]; + allEpisodes: Episode[]; +}; + +export default function Home({ latestEpisodes, allEpisodes }: HomeProps) { return ( - <> -

{JSON.stringify(props.episodes)}

- - ) +
+
+

Últimos lançamentos

+ +
    + {latestEpisodes.map((episode) => { + return ( +
  • + {episode.title} + +
    + + {episode.title} + +

    {episode.members}

    + {episode.publishedAt} + {episode.durationAsString} +
    + + +
    • + ); + })} +
+
+ +
+

Todos episódios

+ + + + + + + + + + + + + + + {allEpisodes.map(episode => { + return ( + + + + + + + + + + ) + })} + + +
PodcastIntegrantesDataDuração
+ {episode.title} + + + {episode.title} + + {episode.members}{episode.publishedAt}{episode.durationAsString} + +
+ +
+
+ ); } -export async function getStaticProps() { - const response = await fetch('http://localhost:3333/episodes') - const data = await response.json() +export const getStaticProps: GetStaticProps = async () => { + const { data } = await api.get("episodes", { + params: { + _limit: 12, + _sort: "published_at", + _order: "desc", + }, + }); + + const episodes = data.map((episode) => { + return { + id: episode.id, + title: episode.title, + thumbnail: episode.thumbnail, + members: episode.members, + publishedAt: format(parseISO(episode.published_at), "d MMM yy", { + locale: ptBR, + }), + duration: Number(episode.file.duration), + durationAsString: convertDurationToTimeString( + Number(episode.file.duration) + ), + url: episode.file.url, + }; + }); + + const latestEpisodes = episodes.slice(0, 2); + const allEpisodes = episodes.slice(2, episodes.length); return { props: { - episodes: data, + latestEpisodes, + allEpisodes, }, - revalidate: 60 * 60 * 8, - } -} + }; +}; diff --git a/src/services/api.ts b/src/services/api.ts new file mode 100644 index 0000000..a856593 --- /dev/null +++ b/src/services/api.ts @@ -0,0 +1,7 @@ +import axios from 'axios'; + +const api = axios.create({ + baseURL: 'http://localhost:3333/' +}) + +export default api; \ No newline at end of file diff --git a/src/utils/convertDurationToTimeString.ts b/src/utils/convertDurationToTimeString.ts new file mode 100644 index 0000000..e546b68 --- /dev/null +++ b/src/utils/convertDurationToTimeString.ts @@ -0,0 +1,12 @@ +export function convertDurationToTimeString(duration: number) { + const hours = Math.floor(duration / (60 * 60)); + const minutes = Math.floor((duration % 3600) / 60); + const seconds = (duration % 60); + + const timeString = [hours, minutes, seconds] + .map(unit => String(unit).padStart(2, '0')) + .join(':') + + return timeString; + +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 65aa437..56fec1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -241,6 +241,13 @@ available-typed-arrays@^1.0.2: dependencies: array-filter "^1.0.0" +axios@^0.21.1: + version "0.21.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8" + integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA== + dependencies: + follow-redirects "^1.10.0" + babel-plugin-syntax-jsx@6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -1075,6 +1082,11 @@ find-up@^4.0.0: locate-path "^5.0.0" path-exists "^4.0.0" +follow-redirects@^1.10.0: + version "1.13.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267" + integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA== + foreach@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"