Esse projeto contém uma série de informações sobre o que eu aprendi aqui na Trybe ao longo do curso de desenvolvimento web da Trybe.
Neste projeto pude listar todos os planetas e fazer filtro dessa lista, tudo isso usando Context API.
Esse projeto foi proposto pelo curso de desenvolvimento web da Trybe.
Esse projeto foi desenvolvido no bloco de front-end e foi possível realizar uma aplicação utilizando Context API do React para gerenciar estado, React Hook useState, React Hook useContext, React Hook useEffect.
Os commits foram feitos de acordo com os requisitos finalizados.
Todo o projeto foi feita na branch '2juliana-oliveira-project-star-wars', isso por conta da exigência do curso.
Precisa utilizar o comando $npm install, a fim de instalar as dependências do projeto. Para visualizar o projeto, basta usar o comando $npm start.
Esse foi um projeto individual,que desenvolvido somente por Juliana Oliveira.
Foi usado Visual Studio Code, além do Trello que auxiliou na organização das tarefas.
Nenhum.
A
No trabalho do desenvolvimento de software a gente sempre tem prazos, muitas vezes os prazos são apertados.
Por outro lado, eu não quero criar algo que não entendo perfeitamente, como também fazer códigos rápidos pode levar a erros que podem demorar muito pra corrigir.
Por isso, usei e sempre uso o método Baby Steps, que é uma estratégia de abordar o desafio passo à passo, defensivamente.
Baby steps é um termo em inglês que quer dizer passos de bebê. Refere-se a fazer as coisas, quaisquer que sejam, devagar, com calma, passo a passo.
👣Requisito 1 - Faça uma requisição para o endpoint /planets da API de Star Wars e preencha uma tabela com os dados retornados, com exceção dos da coluna residents
Observação: Para evitar erros no avaliador, na preparação do seu ambiente de trabalho para o uso do Context API, é necessário que o
<Provider>seja usado dentro do componenteApp.jse não no arquivoindex.js. Esta orientação tem finalidade exclusiva para os testes deste projeto.
A tabela deve ser renderizada por um componente chamado <Table />. Os dados recebidos da API devem ser salvos num campo chamado data do contexto e é daí que a tabela deve lê-los. A requisição deve ser feita num componente separado do componente da tabela.
A API a ser consultada está nesse link. Ou seja, você deverá fazer um fetch para a URL https://swapi-trybe.herokuapp.com/api/planets/
A tabela deve ter uma primeira linha com os headers e as demais com as informações de cada campo.
O que será verificado:
- Realiza uma requisição para a API
- Preenche a tabela com os dados retornados
- Verifica se a tabela tem 13 colunas
- Verifica se a tabela tem uma linha para cada planeta retornado
👣Requisito 2 - Filtre a tabela através de um texto, inserido num campo de texto, exibindo somente os planetas cujos nomes incluam o texto digitado
Ele deve atualizar a tabela com os planetas que se encaixam no filtro à medida que o nome é digitado, sem ter que apertar um botão para efetuar a filtragem. Por exemplo, se digitar "Tatoo", o planeta "Tatooine" deve ser exibido. Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação e o texto digitado deve ser salvo num campo { filterByName: { name } }. Por exemplo:
{
filterByName: {
name: 'Tatoo'
}
}O campo de texto deve possuir a propriedade data-testid='name-filter' para que a avaliação automatizada funcione.
O que será verificado:
- Renderiza o campo de texto para o filtro de nomes
- Filtra os planetas que possuem a letra "o" no nome
- Filtra planetas que possuem a letra "oo" no nome
- Realiza vários filtros em sequência
Ele funcionará com três seletores:
- O primeiro deve abrir um dropdown que permita a quem usa selecionar uma das seguintes colunas:
population,orbital_period,diameter,rotation_periodesurface_water. Deve ser uma tagselectcom a propriedadedata-testid='column-filter'; - O segundo deve determinar se a faixa de valor será
maior que,menor queouigual ao numero que virá a seguir. Uma tagselectcom a propriedadedata-testid='comparison-filter'; - O terceiro deve ser uma caixa de texto que só aceita números. Essa caixa deve ser uma tag
inputcom a propriedadedata-testid='value-filter'; - Deve haver um botão para acionar o filtro, com a propriedade
data-testid='button-filter'.
A combinação desses três seletores deve filtrar os dados da tabela de acordo com a coluna correspondente e com os valores escolhidos. Por exemplo:
- A seleção
population | maior que | 100000- Seleciona somente planetas com mais de 100000 habitantes. - A seleção
diameter | menor que | 8000- Seleciona somente planetas com diâmetro menor que 8000.
Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação. No contexto, esses valores devem ser salvos em um outro campo { filterByNumericValues: [{ column, comparison, value }] }. Por exemplo:
{
filterByNumericValues: [
{
column: 'population',
comparison: 'maior que',
value: '100000',
}
]
}O que será verificado:
- Renderiza o filtro de coluna
- Renderiza o filtro de comparação
- Renderiza o campo para o valor do filtro
- Renderiza o botão para executar a filtragem
- Verifica valores iniciais de cada campo
- Filtra utilizando apenas o botão de filtrar
- Filtra utilizando a comparação "menor que"
- Filtra utilizando a comparação "maior que"
- Filtra utilizando a comparação "igual a"
Deverá ser possível adicionar múltiplos filtros numéricos, todos os filtros adicionados devem funcionar de forma conjunta.
Por exemplo, você pode filtrar pelos planetas que possuam Orbital period > 400 e Diameter < 10000.
O que será verificado:
- Adiciona dois filtros e verifica se a tabela foi atualizada com as informações filtradas.
- Adiciona três filtros e verifica se a tabela foi atualizada com as informações filtradas.
Caso um filtro seja totalmente preenchido, um novo filtro de valores numéricos deve ser carregado. Este novo filtro não deve incluir quaisquer colunas que já tenham sido selecionadas em filtros de valores numéricos anteriores. Caso todas as colunas já tenham sido inclusas em filtros anteriores, não deve ser carregado um novo filtro. Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação.
Por exemplo: O primeiro filtro tem as seguintes seleções: population | maior que | 100000. Um segundo filtro deve aparecer após essas seleções serem todas feitas e, no primeiro dropdown deste segundo filtro, a opção population deve estar ausente. Se no segundo filtro fosse selecionado diameter | menor que | 8000, o estado ficaria assim:
{
filterByNumericValues: [
{
column: 'population',
comparison: 'maior que',
value: '100000',
},
{
column: 'diameter',
comparison: 'menor que',
value: '8000',
}
]
}O que será verificado:
- Filtra por população e o remove das opções
👣Requisito 6 - Apague um filtro de valor numérico ao clicar no ícone de X de um dos filtros e apague todas filtragens numéricas simultaneamente ao clicar em outro botão de Remover todas filtragens
O button com o ícone de x deve existir em cada filtro de valores numéricos.
A coluna que este filtro selecionava deve passar a ficar disponível nos dropdowns dos demais filtros já presentes na tela. Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação. Cada filtro deve possuir a propriedade data-testid='filter', com um button em seu interior com o texto X.
O button de Remover todas filtragens deverá possuir o data-testid='button-remove-filters', e ele será responsável pela remoção de todos os filtros numéricos simultaneamente.
O que será verificado:
- Adiciona um filtro e verifica se a tabela foi atualizada com as informações filtradas, depois remove o filtro e verifica se os valores da tabela voltaram ao original.
- Adiciona dois filtros e verifica se a tabela foi atualizada com as informações filtradas, depois remove os filtros e verifica se os valores da tabela voltaram ao original.
- Adiciona três filtros e verifica se a tabela foi atualizada com as informações filtradas, depois remove os filtros utilizando o botão `button-remove-filters` e verifica se os valores da tabela voltaram ao original.