No desafio, foi pedido que eu alterasse o componente TaskList.tsx para que acressentasse as seguintes funcionalidades :
- handleCreateNewTask
- handleToggleTaskCompletion
- handleRemoveTask
O primeiro passo que eu dei para criar um novo task foi fazer uma variável para gerar um número aleatório para ser o id da task.
let random = Math.random() * 100000;
Sabendo o tipo do meu estado ficou fácil de acrescentar novos dados nele.
interface Task {
id: number;
title: string;
isComplete: boolean;
}
const [tasks, setTasks] = useState<Task[]>([]);
Então para acrescentar o novo task basta adicionar um objeto com os dados que eu quero nesse array, além de adicionar as tasks anteriores com o spread operator.
setTasks([...tasks, {id: random, title: newTaskTitle, isComplete: false}]
E para cumprir com os requisitos de teste coloco um condicional if() if (newTaskTitle.trim() !== "" ) ficando da seguinte forma:
function handleCreateNewTask() {
if (newTaskTitle.trim() !== "" ) {
let random = Math.random() * 100000;
setTasks([...tasks, {id: random, title: newTaskTitle, isComplete: false}] )
}
}
Para mudar uma propriedade de um objeto dentro de um array, utilizeio metodo .map(), para eu conseguir checar cada objeto dentro do array (cada task na lista) e ver se bate com o id que foi passado na função.
const updatedTasks = tasks.map( task => {
if(task.id === id) {
return {...task, isComplete:!task.isComplete }
}
return task
})
setTasks(updatedTasks)
}
O que o código acima faz é: Se o task atual tem o mesmo id, o spread operator (...) vai passar todo o objeto task e todas as suas propriedades e então ele atualiza apenas as props que passamos para ele. Caso não seja o meso id, ele retorna o task da mesma maneira. e então atualizo os tasks com o updatedTasks
Esse, para mim, foi o mais simples dos 3, para remover basta usarmos o .filter(), passamos para ele uma condicional, e ele vai retornar apenas os elementos para quais retornaram true.
Então:
function handleRemoveTask(id: number) {
setTasks(
tasks.filter(task => task.id !== id)
)
}