Desafio 01 - Conceitos do React

Este desafio faz parte da lista de desafios que compõem o curso de NodeJS.

Visite à Rockseat para saber mais sobre o curso.

Sobre o desafio   |    Instalação e Execução do Projeto   |    Template da aplicação   |    Instruções   |    Específicação dos testes   |    Licença

🚀 Sobre o desafio

Nesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS

Essa será uma aplicação onde o seu principal objetivo é uma pequena aplicação de atividades a fazer, para treinar um pouco mais sobre manipulação do estado no React.

• Adicionar uma nova tarefa
• Remover uma tarefa
• Marcar e desmarcar uma tarefa como concluída

A seguir veremos com mais detalhes o que e como precisa ser feito 🚀

⌨️ Instalação e Execução do Projeto

• Clone o repositório

https://github.com/code36u4r60/ignite-desafio-reactjs-conceitos-do-react.git

ou

git@github.com:code36u4r60/ignite-desafio-reactjs-conceitos-do-react.git

ou

gh repo clone code36u4r60/ignite-desafio-reactjs-conceitos-do-react

• Entrar na pasta do projeto

cd ignite-desafio-reactjs-conceitos-do-react

• Instale as dependências com o Yarn

yarn

• Executar o projeto

yarn dev

• Para correr os testes

yarn test

Deve aparecer uma mensagem parecida com esta:

 PASS  src/__tests__/components/TaskList.spec.tsx
  App Page
    ✓ should be able to add a task (90 ms)
    ✓ should not be able to add a task with a empty title (18 ms)
    ✓ should be able to remove a task (39 ms)
    ✓ should be able to check a task (31 ms)

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        2.219 s
Ran all test suites.

Template da aplicação

Foi utilizado um modelo de template que possui o esqueleto do projeto.

O template está disponível na seguinte URL:

https://github.com/rocketseat-education/ignite-template-reactjs-conceitos-do-react

Dica: Caso não saiba utilizar repositórios do GitHub como template, temos um guia em nosso FAQ.

Instruções

Com o template já clonado, as depêndencias instaladas, você deve completar onde não possui código com o código para atingir os objetivos de cada teste. Nesse desafio, você deve editar apenas o seguinte arquivo para completar as funcionalidades da aplicação:

• src/components/TaskList.tsx;

components/TaskList.tsx

Esse é o componente responsável por todas as funcionalidades da aplicação, é um componente simples, mas onde botaremos em prática várias partes da manipulação do estado.

Você deve criar as funcionalidades para as três funções presentes nesse arquivo, que são:

• handleCreateNewTask: Deve ser possível adicionar uma nova task no estado de tasks, com os campos id que deve ser gerado de forma aleatória, title que deve ser um texto e isComplete que deve iniciar como false.
• handleToggleTaskCompletion: Deve alterar o status de isComplete para uma task com um ID específico que é recebido por parâmetro.
• handleRemoveTask: Deve receber um ID por parâmetro e remover a task que contém esse ID do estado.

Especificação dos testes

Em cada teste, tem uma breve descrição no que sua aplicação deve cumprir para que o teste passe.

Caso você tenha dúvidas quanto ao que são os testes, e como interpretá-los, dê uma olhada em nosso FAQ

Para esse desafio, temos os seguintes testes:

Teste TaskList.spec.tsx

• should be able to add a task

Para que esse teste passe, você deve permitir que task seja criada e com isso, exibida em tela. As taks criadas devem conter os atributos seguindo o padrão da interface, que é:

interface Task {
  id: number;
  title: string;
  isComplete: boolean;
}

• should not be able to add a task with an empty title

Para que esse teste passe, antes de criar uma nova task, você deve validar se algo foi digitado no input e não permitir a criação da task caso o valor seja vazio, caso o valor digitado seja vazio, você deve impedir a criação da task.

• should be able to remove a task

Para que esse teste passe, você deve permitir que ao clicar no botão com ícone de uma lixeira, a task relacionada a esse botão seja removida do estado da aplicação, consequentemente sendo removida da tela.

• should be able to check a task

Para que esse teste passe, você deve permitir que ao clicar no checkbox ao lado da task, ela seja marcada como concluída ou não concluída de acordo com seu estado atual, alterando seu valor de isComplete de false para true ou ao contrário, de true para false.

Resultado final da aplicação

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Created with 💜 by Eduardo Queirós 👋