Projeto desenvolvido durante a semana de Imersão React, com o objetivo de aprender fundamentos do framework de JavaScript React, utilizando Styled Components e Next.JS para criar uma versão do Orkut. No caso, o login é efetuado apenas com informação do nome de usuário do Github.
- Conceitualização sobre componentização e reaproveitamento de código
- Ênfase em operações assíncronas
- Gerenciamento de conteúdos por meio de um gerenciador externo
A autenticação é realizada por meio de cookies, manipulados com auxílio da biblioteca Nookies.
alurakut/pages/login.js
Na tela de login, ao informar o nome de usuário do Github e submeter o formulário, uma requisição do tipo POST é realizada criando e inserindo cookies com as credenciais do usuário. Neste momento também ocorre o redirecionamento para a página inicial da plataforma.
alurakut/pages
Ao tentar acessar qualquer página, a função getServerSideProps(context) - sendo o parâmetro context os cookies do usuário - realiza uma verificação se existem cookies. Caso existam, a função jwt.decode(cookies) faz a decodificação das informações encontradas e, caso sejam diferentes das credenciais informadas, o usuário é redirecionado à tela de login. Caso sejam compatíveis, as credenciais são retornadas como parâmtro para a função Container(props), para serem utilizadas no perfil do usuário logado.
O conteúdo é gerenciado através da plataforma DatoCMS, e manipulado com auxílio da biblioteca datocms-client.
alurakut/pages/index.js
Uma constante é criada utilizando o hook React.useState([]) - sendo o parâmetro um array vazio - para instanciar os diversos conteúdos que serão enviados ao banco de dados, entre eles seguidores, comunidades, recados etc.
No momento da submissão de um formulário de criação de novo conteúdo, uma requisição do tipo POST é enviada à respectiva API, contendo em seu corpo os dados informados pelo usuário.
alurakut/pages
O hook React.useEffec realiza uma requisição usando o método fetch(), da qual retorna uma promise e, em seguida, os dados da API requisitada. Esses dados são inseridos na array da constante referente ao respectivo conteúdo.
Em alguns casos, como seguidores e seguindo, essa busca é feita na API do Github (externa).
Já no caso dos recados, depoimentos, comunidades e outros conteúdos criados pelo próprio usuário, a requisição é feita para a API do DatoCMS gerenciada pelo próprio servidor.
alurakut/pages/api
A API é responsável por receber as requisições de inserção de novo conteúdo no banco de dados. Na função requestReceiver(req, res) é executada uma verificação do método da requisição. Caso seja do tipo POST, a operação assíncrona client.items.create, da bliblioteca datocms-cliet envia os dados do corpo da requisição ao banco de dados. A resposta é o dado retornado.