Instadev React SPA (Parte 2)

Objetivo:

O desafio desta semana e da próxima será desenvolver um SPA (Single Page Application) mobile-first do Instagram em React.

Referência em Produção:

https://vimeo.com/414861306/fc5bbd5ecc

Repositório Base (para fins de estudo):

https://github.com/codenation-dev/react-instagram

Requisitos Parte 2:

Nesta segunda parte você deverá trazer o que foi implementado na parte 1 e cuidar dos estados dos componentes, das requsições HTTP de cada Rota da aplicação e dos ciclos de vida dos componentes utilizando React Hooks e abordagem funcional, os seguintes requisitos devem ser cumpridos:

Ser desenvolvido utilizando abordagem funcional e React Hooks para gerenciamento de ciclo de vida e estados.

Consumir os dados da Rest API, usando o Fetch API do Javascript.

Exibir os posts de todos os usuários na rota inicial /.

Exibir todos os usuários cadastrados na rota /users

Exibir o perfil do usuário e seus respectivos posts na rota /users/{username}

Exibir os stories dos usuários na rota inicial /.

Ao clicar no ícone de story do usuário deverá abrir seu story com o respectivo vídeo e barra de progresso com a opção de fechar e voltar para o feed (rota inicial).

Deve permitir cadastrar um usuário na rota /newuser e exibir uma mensagem de alerta ao enviar.

Estrutura de Arquivos e Pastas:

Como já aprendemos em aula, a organização das pastas e arquivos deverá utilizar os seguintes padrões:

presentational components e container components -> Referência
Rails-Style Structure + Module Index -> Referência

Seguindo estes dois padrões, a estrutura de arquivos e pastas do seu projeto deverá ficar exatamente assim (dentro de /src:

├── assets
│   └── img
│       ├── instagram-glyph.png
│       └── instagram-logo.svg
├── components
│   ├── Loading
│   │   ├── Loading.jsx
│   │   ├── Loading.scss
│   │   └── index.jsx
│   ├── Post
│   │   ├── Post.jsx
│   │   ├── Post.scss
│   │   └── index.jsx
│   ├── Story
│   │   ├── Story.jsx
│   │   ├── Story.scss
│   │   └── index.jsx
│   ├── SuccessMessage
│   │   ├── SuccessMessage.jsx
│   │   ├── SuccessMessage.scss
│   │   └── index.jsx
│   ├── Topbar
│   │   ├── Topbar.jsx
│   │   ├── Topbar.scss
│   │   └── index.jsx
│   └── User
│       ├── User.jsx
│       └── index.jsx
├── containers
│   ├── App
│   │   ├── App.jsx
│   │   ├── App.scss
│   │   └── index.jsx
│   ├── Posts
│   │   ├── Posts.jsx
│   │   └── index.jsx
│   ├── Stories
│   │   ├── Stories.jsx
│   │   ├── Stories.scss
│   │   └── index.jsx
│   ├── UserForm
│   │   ├── UserForm.jsx
│   │   ├── UserForm.scss
│   │   └── index.jsx
│   ├── UserPosts
│   │   ├── UserPosts.jsx
│   │   ├── UserPosts.scss
│   │   └── index.jsx
│   ├── UserProfile
│   │   ├── UserProfile.jsx
│   │   ├── UserProfile.scss
│   │   └── index.jsx
│   └── UsersList
│       ├── UsersList.jsx
│       ├── UsersList.scss
│       └── index.jsx
├── index.js
├── modules
├── routes
│   ├── FeedRoute
│   │   ├── FeedRoute.jsx
│   │   ├── FeedRoute.scss
│   │   └── index.jsx
│   ├── NewUserRoute
│   │   ├── NewUserRoute.jsx
│   │   └── index.jsx
│   ├── ProfileRoute
│   │   ├── ProfileRoute.jsx
│   │   └── index.jsx
│   ├── UsersRoute
│   │   ├── UsersRoute.jsx
│   │   └── index.jsx
│   └── index.jsx
├── serviceWorker.js
└── setupTests.js

IMPORTANTE:

Nesta fase você já foi apresentado ao testing-library e para que você seja avaliado corretamente ao submeter seu desafio, é necessário que TODOS os seus elementos React, como componentes, containers e rotas possuam o atributo JSX/HTML (sintético) data-testid="{nome-do-componente}":

├── components
│   ├── Loading
│   │   └── Loading.jsx -> data-testid="loading"
│   ├── Post
│   │   └── Post.jsx -> data-testid="post"
│   ├── Story
│   │   └── Story.jsx -> data-testid="story"
│   ├── SuccessMessage
│   │   └── SuccessMessage.jsx -> data-testid="success-message"
│   ├── Topbar
│   │   └── Topbar.jsx -> data-testid="topbar"
│   └── User
│       └── User.jsx -> data-testid="user"
├── containers
│   ├── App
│   │   └── App.jsx -> data-testid="app"
│   ├── Posts
│   │   └── Posts.jsx -> data-testid="posts"
│   ├── Stories
│   │   └── Stories.jsx -> data-testid="stories"
│   ├── UserForm
│   │   └── UserForm.jsx -> data-testid="user-form"
│   ├── UserPosts
│   │   └── UserPosts.jsx -> data-testid="user-posts"
│   ├── UserProfile
│   │   └── UserProfile.jsx -> data-testid="user-profile"
│   └── UsersList
│       └── UsersList.jsx -> data-testid="user-list"
└── routes
    ├── FeedRoute
    │   └── FeedRoute.jsx -> data-testid="feed-route"
    ├── NewUserRoute
    │   └── NewUserRoute.jsx -> data-testid="new-user-route"
    ├── ProfileRoute
    │   └── ProfileRoute.jsx -> data-testid="profile-route"
    └── UsersRoute
        └── UsersRoute.jsx -> data-testid="users-route"

Iniciar o projeto:

Instale as dependências do projeto com o comando yarn install ou npm install.
Inicie o projeto com comando yarn start ou npm start / npm run start.

REST API

Usuários

Resource	Method	Endpoint	Status Code	Response
Users	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users	200	Array of Object
User	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id	200	Object
User	POST	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users	201	Created object
User	PUT	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id	200	Updated object
User	DELETE	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id	200	Deleted object

Body (POST / PUT):

{
    "name": "string",
    "avatar": "string",
    "username": "string",
    "email": "string"
}

Stories

Resource	Method	Endpoint	Status Code	Response
stories	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/stories	200	Array of Object
story	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/stories/:id	200	Object

Posts

Resource	Method	Endpoint	Status Code	Response
Posts	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts	200	Array of Object
Post	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id	200	Object
Post	POST	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts	201	Created object
Post	PUT	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id	200	Updated object
Post	DELETE	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id	200	Deleted object

Body (POST / PUT):

{
    "userId": "string",
    "imageUrl": "string"
}

Comentários

Resource	Method	Endpoint	Status Code	Response
Comments	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id/comments	200	Array of Object
Comment	GET	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id/comments/:id	200	Object
Comment	POST	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id/comments	201	Created object
Comment	PUT	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id/comments/:id	200	Updated object
Comment	DELETE	https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/:id/posts/:id/comments/:id	200	Deleted object

Body (POST / PUT):

{
    "postId": "string",
    "comment": "string",
    "avatar": "string",
    "name": "string"
}

Query Params

Adicione os seguintes queries às requisições GET:

Paginação

?page=1&limit=10 ou ?p=1&l=10

Ordenação

?sortBy=createdAt&order=desc também é possível utilizar sortby, orderBy, ou orderby OBS: se você omitir o parâmetro order, a ordenação padrão será 'asc'

Busca

?search=blog1 ou ?filter=blog1

Códigos de erro e mensagens de retorno

200 - OK
201 - OK
404 - Not found
500 - Server error

Tópicos:

Neste desafio você vai praticar os seus conhecimentos em:

Fetch API
JS Funcional:
Modularização
Presentational e Container Components
Rails-Style Structure + Module Index
React Hooks useState, useEffect
React Testing Library
React

Requisitos:

Node v13.8.0 - ou superior, instalado em seu computador.
Create React App

guisalmeida/aceleradev-instagram

Instadev React SPA (Parte 2)

Objetivo:

Referência em Produção:

Repositório Base (para fins de estudo):

Requisitos Parte 2:

Estrutura de Arquivos e Pastas:

IMPORTANTE:

Iniciar o projeto:

REST API

Usuários

Stories

Posts

Comentários

Query Params

Paginação

Ordenação

Busca

Códigos de erro e mensagens de retorno

Tópicos:

Requisitos: