Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo e, se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀

Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir deste repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.

Você vai refatorar um projeto em React desenvolvido no módulo 16, Starwars Datatable Filters, substituindo React por Context API e Hooks para controlar estado.

Você também adicionará testes a sua aplicação antes de refatorá-la, de forma a garantir o mesmo comportamento após a transição de Redux para Context API e Hooks.

Este repositório já contém um template de uma aplicação React criado e configurado. Após clonar o projeto e instalar as dependências (mais sobre isso abaixo), você deverá copiar os arquivos que criou ou modificou no projeto anterior para este repositório. Veja aqui instruções de como fazer isso de uma forma fácil.

Caso não tenha realizado o projeto anterior, você deverá implementar todos os requisitos obrigatórios do projeto anterior e os novos requisitos do projeto atual. Contudo, não é necessário primeiro desenvolver o projeto com Redux para então substituí-lo por Context API e Hooks.

Um dos requisitos deste projeto é a adição de testes. Recomendamos que você escreva os testes e garanta uma boa cobertura antes de começar a trabalhar na refatoração. Dessa forma, durante o desenvolvimento, você terá segurança de que sua aplicação continua funcionando conforme especificado, sem precisar testá-la manualmente a todo momento. Além disso, você treinará escrever testes baseados em comportamento - se seus testes começaram a falhar após a transição, é um sinal de que eram dependentes de implementação e não do comportamento da sua aplicação. Este processo - escrever testes agnósticos em relação à implementação - não é fácil, mas é uma habilidade importante de se desenvolver.

Supondo que seus projetos passado e atual estejam, respectivamente, nos diretórios sd-01-week16-react-redux-starwars-datatable-filters e sd-01-week18-react-context-hooks-starwars-datatable-filters dentro do mesmo diretório em sua máquina, execute o comando a seguir para copiar entre projetos.

cd <diretorio onde estão seus projetos>
cp -av sd-01-week16-react-redux-starwars-datatable-filters/src/ sd-01-week18-react-context-hooks-starwars-datatable-filters/src/

Atente para a barra (/) ao final dos nomes dos diretórios. Adapte os comandos com os nomes dos diretórios onde estão seus repositórios em sua máquina local.

A seguir, estão listados todos os requisitos do projeto. Para conveniência, os requisitos do projeto 16 foram transcritos aqui, com as devidas adaptações, quando necessário, para o contexto do atual projeto.

Não pode haver nenhum tipo de código Redux no seu projeto - stores, actions, reducers, action creators. Lembre-se de desinstalar o Redux e quaisquer dependências relacionadas após a conclusão, caso seu projeto dê continuidade ao projeto anterior.

O estado especificado nos requisitos deve ser controlado fazendo uso unicamente de Context API e Hooks.

Contudo, caso julgue necessário manter informações de estado além do especificado nestes requisitos, você poderá decidir entre armazenar tal estado em um componente ou em um contexto, mas não no Redux.

O uso de Hooks torna desnecessária a criação de componentes de classe. Portanto, você deverá converter quaisquer componentes de classe que tenha escrito para componentes de função.

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.

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: { name }.

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.

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 [{ numeric_values: { column, comparison, value } }]

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.

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.

A informação acerca da ordenação das colunas deve ser armazenada nos campos filters: { column: 'Name', order: 'ASC'}, o campo column representa o nome da coluna a ordenar e order representa a ordenação, sendo 'ASC' ascendente e 'DESC' descendente. Por padrão, a tabela começa ordenada pela coluna 'Name' em ordem ascendente.

1. Clone o repositório

• git clone [email protected]:tryber/sd-01-week18-react-context-hooks-starwars-datatable-filters.
• Entre na pasta do repositório que você acabou de clonar:
  • sd-01-week18-react-context-hooks-starwars-datatable-filters

2. Instale as dependências

• npm install

3. Crie uma branch a partir da branch master

• Verifique que você está na branch master
  • Exemplo: git branch
• Se não estiver, mude para a branch master
  • Exemplo: git checkout master
• Agora crie uma branch para a qual você vai submeter os commits do seu projeto
  • Você deve criar uma branch no seguinte formato: nome-de-usuario-nome-do-projeto
  • Exemplo: git checkout -b joaozinho-react-context-hooks-starwars-datatable-filters

4. Crie um contexto. Por exemplo, se você quer nomear seu contexto StarWarsContext, e colocá-lo no diretório context dentro de src, faça:

mkdir src/context
touch src/context/StarWarsContext.js

E em src/context/StarWarsContext:

import { createContext } from 'react';

const StarWarsContext = createContext();

export default StarWarsContext;

5. Adicione as mudanças ao stage do Git e faça um commit

• Verifique que as mudanças ainda não estão no stage
  • Exemplo: git status (deve aparecer listado o arquivo src/context/StarWarsContext.js em vermelho)
• Adicione o arquivo alterado ao stage do Git
  • Exemplo:
    • git add . (adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)
    • git status (deve aparecer listado o arquivo src/context/StarWarsContext.js em verde)
• Faça o commit inicial
  • Exemplo:
    • git commit -m 'iniciando o projeto 18. VAMOS COM TUDO :rocket:' (fazendo o primeiro commit)
    • git status (deve aparecer uma mensagem tipo nothing to commit )

6. Adicione a sua branch com o novo commit ao repositório remoto

• Usando o exemplo anterior: git push -u origin joaozinho-react-context-hooks-starwars-datatable-filters

7. Crie um novo Pull Request (PR)

• Vá até a página de Pull Requests do repositório no GitHub
• Clique no botão verde "New pull request"
• Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
• Clique no botão verde "Create pull request"
• Adicione uma descrição para o Pull Request e clique no botão verde "Create pull request"
• Não se preocupe em preencher mais nada por enquanto!
• Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado

• ⚠ LEMBRE-SE DE CRIAR TODOS OS ARQUIVOS DENTRO DA PASTA COM O SEU NOME ⚠

• Faça commits das alterações que você fizer no código regularmente

• Lembre-se de sempre após um (ou alguns) commits atualizar o repositório remoto

• Os comandos que você utilizará com mais frequência são:

  1. git status (para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)
  2. git add (para adicionar arquivos ao stage do Git)
  3. git commit (para criar um commit com os arquivos que estão no stage do Git)
  4. git push -u nome-da-branch (para enviar o commit para o repositório remoto na primeira vez que fizer o push de uma nova branch)
  5. git push (para enviar o commit para o repositório remoto após o passo anterior)

Para "entregar" seu projeto, siga os passos a seguir:

• Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas
  • No menu à direita, clique no link "Labels" e escolha a label code-review
  • No menu à direita, clique no link "Assignees" e escolha o seu usuário
  • No menu à direita, clique no link "Reviewers" e digite students, selecione o time tryber/students-sd-01

Se ainda houver alguma dúvida sobre como entregar seu projeto, aqui tem um video explicativo.

⚠⚠⚠

À medida que você e os outros estudantes forem entregando os projetos, vocês serão alertados via Slack para também fazer a revisão dos Pull Requests dos seus colegas. Fiquem atentos às mensagens do "Pull Reminders" no Slack!

Use o material que você já viu sobre Code Review para te ajudar a revisar os projetos que chegaram para você.