Mudanças - HelioSilva/DesafioReactEncontact2021 GitHub Wiki

Na usabilidade:

Enquanto se está editando o item da Todo, ao tirar o mouse de cima ele perde o modo edição e se perde o texto escrito.
Botões "All", "Active", "Completed" e "Clean completed" tem uma coloração no Dark Mode que não permite ler corretamente.
O botão "Clean completed" não remove os itens concluídos.
Tem algumas incoerências no idioma, em alguns lugares aparecem em inglês e em outros em português.
Ao remover um item aparece um alerta(toast) vermelho, dando a entender que houve um erro na requisição, porém é só uma confirmação.
Ao navegar entre "All", "Active" e "Completed" o estado anterior é perdido, ou seja, se cadastrei uma tarefa anteriormente e naveguei entre esses 3 itens, o item cadastrado se perde.
Se eu estiver na aba "Completed" e cadastrar uma nova tarefa, essa tarefa é cadastrada como "não completa" e ainda sim aparece na lista.
Botão para marcar todos como uma tarefa não apresenta um "cursor pointer", indicando que aquele item é um botão.
Ao fazer uma ação em massa, vários alertas(toasts) aparecem na tela, sendo que na visão do usuário ele fez apenas uma ação.
O tempo do alerta(toast) é muito curto e não da tempo de ler a mensagem antes que ela suma.

No código:

O uso do método .filter do javascript você inclui um return do objeto, porém esse método trabalha com validação, somente a condicional seria suficiente para o filtro.
Alguns elementos estão sendo estilizados com CSS Inline, o que deveria ser aplicado via styled-components, exemplo: app.tsx:242.
No arquivo app.tsx:71, as cores estão sendo definitas dentro do componente. A ideia de usar o styled-components é abstrair esses dados do estilo também.
No arquivo app.tsx:103, poderia retornar o resultado direto, sem precisar atribuir a uma constante.
No arquivo app.tsx:115, recomenda-se utilizar const quando o valor nunca for alterado.
No arquivo app.tsx:134, não é recomendado reassinar um atributo de uma função, por mais que tenha clonado na linha 130 deste arquivo. Neste link tem uma breve explicação sobre os motivos: https://eslint.org/docs/rules/no-return-assign. Uma possível solução seria retornar o element e alterar apenas um atributo via spread, dessa forma: return { ...element, isDone: !value.isDone }.
No arquivo app.tsx:234, o provider ThemeProvider e GlobalStyle poderiam estar juntos com o provider do react-router-dom e toastify, deixando todos esses providers centralizados na index.tsx.
No arquivo app.tsx:293, este item poderia ser uma variável ao invés de uma função, sendo declarado nesta forma na linha 102: const countLeftTodo = todos.filter((element: ITodo) => !element.isDone).length
No arquivo styles/appStyle.tsx:140, em poucas exceções deve-se utilizar a hierarquia com classes e ids explicitamente. Acredito que neste caso poderia ter sido evitado.
No arquivo domain/Todo.ts:22, eslint foi desabilitado, este warning acontece quando sua função retorna mais de um tipo diferente, para resolver você pode substituir a linha 22 por return !element.isDone;, neste caso sua função sempre retornará um boolean.
No arquivo components/patternItemTodo.tsx:22, neste caso foi utilizada a lógica para edição do item, talvez o motivo de tirar o mouse do item e o modo de edição ser finalizado. Uma ideia para resolver este problema sem utilizar o mouse seria utilizando o evento onBlur do input.