Neste projeto eu desenvolvi uma lista com filtros de planetas do universo de Star Wars usando Context API e Hooks para controlar os estados globais.
Neste projeto fui capaz de:
- Utilizar a Context API do React para gerenciar estado;
- Utilizar o React Hook useState;
- Utilizar o React Hook useContext;
- Utilizar o React Hook useEffect;
- Criar React Hooks customizados.
Após cada um dos passos, haverá um exemplo do comando a ser digitado para fazer o que está sendo pedido, caso tenha dificuldades, mande mensagem para o meu e-mail [email protected].
- Abra o terminal e crie um diretório no local de sua preferência com o comando mkdir:
mkdir projetos-humberto
- Entre no diretório que acabou de criar e depois clone o projeto:
cd projetos-humberto
git@github.com:Humberto-Bonadiman/Project-starwars-planets-search.git
- Acesse o diretório do projeto e depois utilize o comando npm i para instalar todas as dependências necessárias:
cd Project-starwars-planets-search
npm i
- Por último, rode o comando npm start e acesse o projeto via browser, no caminho
http://localhost:3000/Project-starwars-planets-search
.
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
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.
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 filters: { filterByName: { name } }
. Por exemplo:
{
filters: {
filterByName: {
name: 'Tatoo'
}
}
}
O campo de texto deve possuir a propriedade data-testid='name-filter'
para que a avaliação automatizada funcione.
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_period
esurface_water
. Deve ser uma tagselect
com a propriedadedata-testid='column-filter'
; - O segundo deve determinar se a faixa de valor será
maior que
,menor que
ouigual a
o numero que virá a seguir. Uma tagselect
com a propriedadedata-testid='comparison-filter'
; - O terceiro deve ser uma caixa de texto que só aceita números. Essa caixa deve ser uma tag
input
com 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 nos campos filters { filterByName: { name }, filterByNumericValues: [{ column, comparison, value }] }
. Por exemplo:
{
filters:
{
filterByName: {
name: ''
},
filterByNumericValues: [
{
column: 'population',
comparison: 'maior que',
value: '100000',
}
]
}
}
}
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:
{
filters: {
filterByName: {
name: ''
},
filterByNumericValues: [
{
column: 'population',
comparison: 'maior que',
value: '100000',
},
{
column: 'diameter',
comparison: 'menor que',
value: '8000',
}
]
}
}
5 - Apague o filtro de valores numéricos e desfaça as filtragens dos dados da tabela ao clicar no ícone de X
de um dos filtros
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
.
A informação acerca da ordenação das colunas deve ser armazenada nos campos filters: { filterByName: { name }, filterByNumericValues = [], order: { column: 'Name', sort: 'ASC'} }
, o campo column representa o nome da coluna a ordenar e a ordem representa a ordenação, sendo 'ASC' ascendente e 'DESC' descendente. Por padrão, a tabela começa ordenada pela coluna 'Name' em ordem ascendente. Por exemplo:
{
filters: {
filterByName: {
name: ''
},
filterByNumericValues : [],
order: {
column: 'name',
sort: 'ASC',
}
}
}
Essa ordenação deve ser feita via filtro: um dropdown selecionará a coluna a basear a ordenação e um par de radio buttons determinará se esta é ascendente ou descendente.
O dropdown deve ser um elemento select
com a propriedade data-testid='column-sort'
, com as opções das colunas escolhíveis em seu interior. Deve haver também, dois inputs
de tipo radio
, com propriedades data-testid='column-sort-input-asc'
e data-testid='column-sort-input-desc'
, para definir o sentido da ordenação (com value
sendo ASC
ou DESC
) e um botão para submeter a ordenação, com uma tag button
e a propriedade data-testid='column-sort-button'
.
Adicione o atributo data-testid
com o valor planet-name
em todos os elementos da tabela que possuem o nome de um planeta.