Star Wars Database

Boas vindas ao projeto Star Wars Database!

O QUE DEVERÁ SER DESENVOLVIDO

Você vai desenvolver uma lista com filtros de planetas do universo de StarWars usando React para a construção do front-end e Context API e Hooks para controlar os estados globais.

---

COMO DESENVOLVER

Você deverá cumprir os requisitos do projeto utilizando a Context API e componentes funcionais com Hooks.

---

DATA DE ENTREGA

O projeto deverá ser entregue até 7 dias depois de você ter recebido as instruções.

---

REQUISITOS DO PROJETO

Linter

Para garantir a qualidade do seu código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento nós recomendamos o uso do linter ESLint.

---

LISTA DE REQUISITOS

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.

O que será verificado:

- Realiza uma requisição para a API
- Preenche a tabela com os dados retornados
- A tabela deve ter 13 colunas
- A tabela deve ter uma linha para cada planeta retornado

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 que será verificado:

- Renderiza campo de texto para filtro de nomes
- Filtra planetas que possuem a letra "o" no nome
- Filtra planetas que possuem a letra "oo" no nome
- Realiza vários filtros em sequência

3. Crie um filtro para valores numéricos

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 e surface_water;
• O segundo deve determinar se a faixa de valor será maior que, menor que ou igual a o numero que virá a seguir;
• O terceiro deve ser uma caixa de texto que só aceita números;
• Deve haver um botão para acionar o filtro.

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',
        }
      ]
    }
  }
}

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
- Filtra utilizando a comparação "menor que"
- Filtra utilizando a comparação "maior que"
- Filtra utilizando a comparação "igual a"

4. Não utilize filtros repetidos

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',
      }
    ]
  }
}

O que será verificado:

- Filtra por população e o remove das opções

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 filtro

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.

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.

BÔNUS

6 - Ordene as colunas de forma ascendente ou descendente

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 que será verificado:

- Verifica ordenação inicial
- Ordena os planetas do mais populoso para o menos populoso

---

Instruções para entregar seu projeto:

Crie esse projeto em sua conta no GitHub e nos envie o link do repositório.

ps: Lembre-se de deixar o repositório público para que possamos ter acesso ao código