Mini Gerenciador de Tarefas 📋

🔗 https://mini-taskmanager.netlify.app/

Um sistema pequeno, mas completo, para treinar todos os hooks essenciais do React (useState, useEffect, useRef, useMemo, useCallback, useReducer).

---

🎯 Objetivo do sistema

Criar um mini gerenciador de tarefas com:

• cadastro de tarefas
• filtros avançados
• estatísticas automáticas
• persistência local
• edição e remoção
• experiência fluida

Tudo isso usando obrigatoriamente os hooks listados acima.

---

📌 Regras de negócio

1) Tarefas

Cada tarefa deve ter:

• id único
• título
• descrição
• prioridade: baixa | média | alta
• status: pendente | concluída
• data de criação
• data de conclusão (somente se concluída)

---

2) Criar tarefa

• O usuário pode criar uma tarefa por meio de um formulário.
• Se o campo título estiver vazio → não criar.
• A prioridade padrão deve ser baixa.
• O campo título (input) deve receber focus automático ao abrir (treina useRef).

---

3) Listagem das tarefas

• As tarefas são exibidas em uma lista ordenada pela data de criação (mais novas primeiro).
• Cada tarefa exibe: título, prioridade, status, botão Concluir, botão Excluir.

---

4) Filtragem (usar useMemo)

O usuário pode filtrar tarefas por:

• status (todas | pendentes | concluídas)
• prioridade (todas | baixa | média | alta)
• busca por texto

A lista filtrada deve ser calculada com useMemo para evitar recomputações desnecessárias.

---

5) Ações da tarefa (usar useReducer)

Ações suportadas:

• Concluir tarefa: muda status para concluída e salva data de conclusão.
• Excluir tarefa: remove da lista.
• Editar tarefa (opcional): permitir mudar título e prioridade.

Todas as atualizações da lista devem ser controladas por useReducer, com ações mínimas:

• ADD_TASK
• TOGGLE_DONE
• DELETE_TASK
• EDIT_TASK
• SET_ALL (para carregar do localStorage / inicializar)

---

6) Estatísticas (usar useMemo)

O sistema deve mostrar (e manter memorizado quando aplicável):

• total de tarefas
• total pendentes
• total concluídas

Use useMemo para não recalcular essas métricas em toda render.

---

7) Persistência (usar useEffect)

• Ao montar o app → carregar tarefas salvas em localStorage (ou SET_ALL via dispatch).
• A cada alteração nas tarefas → salvar novamente no localStorage.

---

8) Funções otimizadas (usar useCallback)

Funções como adicionar tarefa, filtrar, marcar concluída e excluir devem ser memorizadas com useCallback para evitar recriação desnecessária (especialmente quando passadas para componentes filhos memoizados).

---

9) Controle de foco (usar useRef)

• Quando a página carregar → focar automaticamente no input do título.
• Após criar uma tarefa → retornar o foco para o input.

---

✅ Hooks treinados com este sistema

• useState: inputs, filtros e controles locais do formulário.
• useEffect: carregar e salvar tasks no localStorage; simular fetch inicial.
• useRef: foco automático, timers, valores mutáveis que não devem causar re-render.
• useReducer: gerenciamento centralizado da lista de tarefas.
• useMemo: lista filtrada e estatísticas memorizadas.
• useCallback: funções passadas aos filhos e usadas em efeitos.

---