refactor(interface): create ConfettiScreen to reuse the logic and avoid rerenders

[leonardoelias]

Problema

Em nossa interface, temos uma interação com o usuário no qual aparece coffetti quando é executado alguma ação de sucesso, e isso se dá em varias das nossa páginas.

O que acontece hoje é que estamos repetindo essa lógica em vários components, induzindo a criação de bugs. Outro problema encontrado na correção é que todos os components filhos estão sendo rerenderizados quando é dado resize na pagina.

Correção

• Criado um custom hook chamado useResize para que não seja espalhada essa lógica;
• Criado um component chamdo ConfettiScreen para que também reduzir a complexidade dos components que chamam essa funcionalidade, mas também evitar rerenders.

Tasks

• [] Testes - O correto seria a criação de testes para garantir a funcionalidade, porém não temos a biblioteca necessário para isso, acredito que podemos criar uma task para isso;
• [] Testes visuais: Não consegui acessar todas as telas que contém o component;

[vercel[bot]]

@leonardoelias is attempting to deploy a commit to the TabNews Team on Vercel.

A member of the Team first needs to authorize it.

[aprendendofelipe]

Oi @leonardoelias, obrigado pelo PR!

Chegou a ver o #889? Me parece resolver os mesmos problemas de maneira mais simples.

O que acha?

[leonardoelias]

@aprendendofelipe a maneira que o #889 resolveu uma parte do problema, que seria a reutilização da lógica do Conffetti, mas vejo dois problemas nesse caso:

1. Não conseguimos reaproveitar a lógica do useResize (que ainda pode ser melhorada com um observer);
2. Todas as vezes que damos resize na tela, os os components são renderizados novamente, nessa correção, isso não acontece pois estamos passando para os filhos;

[aprendendofelipe]

1. Não conseguimos reaproveitar a lógica do useResize (que ainda pode ser melhorada com um observer);

Por enquanto um useResize não seria reutilizado em nenhum local. E a sua implementação não está funcional.

2. Todas as vezes que damos resize na tela, os os components são renderizados novamente, nessa correção, isso não acontece pois estamos passando para os filhos;

#889 resolveu esse problema.

Fechando aqui 🤝👍

[leonardoelias]

Opa @aprendendofelipe, infelizmente o #899 não resolve esse problema.

[aprendendofelipe]

Opa @aprendendofelipe, infelizmente o #899 não resolve esse problema.

@leonardoelias, tem certeza que o problema ainda ocorre nessa última versão que está em produção?

Ou será que não estamos falando do mesmo problema?

Você pode explicar como fazer para reproduzir e visualizar o problema que você está relatando?

[aprendendofelipe]

~~Ah, acabei de ver que digitei errado. O PR correto é o #889~~

[Edit] Não digitei errado não. Mas talvez você tenha olhado o PR errado, pois na sua mensagem consta outro PR