Cria página para listar usuários

[Rafatcb]

Mudanças realizadas

Essa é uma implementação parcial do frontend do issue #1675.

• Em telas grandes, o link Usuários fica ao lado de Recentes. Em telas menores, fica no menu hambúrguer.

• Links no formato /moderacao/usuarios/1.
• Lista exibindo um resumo da descrição para facilitar a identificação de perfis de spam.

• Exibindo Label para usuários nuked.

Fica faltando a contagem de publicações e comentários, visualização de id e features do usuário, e também a possibilidade de ver a data de criação e descrição completa de um usuário nuked (para um usuário não-nuked, basta visitar o perfil).

Tipo de mudança

• Nova funcionalidade

Checklist:

• As modificações não geram novos logs de erro ou aviso (warning).
• Eu adicionei testes que provam que a correção ou novo recurso funciona conforme esperado.
• Tanto os novos testes quanto os antigos estão passando localmente.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tabnews	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 11:54pm

[Rafatcb]

Subi algumas correções. Ainda falta usar o removeMarkdown na API e criar um teste para isso.

Senti falta de um feedback de carregamento na UI.

[aprendendofelipe]

Senti falta de um feedback de carregamento na UI.

Mesmo sendo algo exclusivo da moderação, seria interessante adicionar um feedback sim. Acho que o acionamento pode usar o isLoading do swr em conjunto com o isLoading do useUser.

Caso pense em algo simples como um spinner, deve dar para criar algo baseado no SpinnerWrapper do ButtonWithLoader para manter a consistência do design. Mas ficaria mais interessante algo com react-content-loader.

Não é algo impeditivo para a mesclagem do PR, então também dá para deixar isso como good first issue se não achar que a criação da issue vai dar o mesmo trabalho de já implementar.

[Rafatcb]

Carregamento

O código está cheio de "números mágicos" porque foram os que percebi que se encaixavam melhor com a UI para quase não mudar as posições após o carregamento. Talvez tenha uma forma mais simples. Se um usuário ter descrição, já irá mudar, por exemplo, mas isso não me parece um problema, e sim algo natural.

O SkeletonText do Primer está em Draft, pode simplificar as coisas futuramente, mas não tenho esperanças sobre o componente sair de "Draft" tão cedo.

Achei que o resultado ficou bom. Precisei ter alguns cuidados extras com os números de páginas mais altos e com diferenças na quantidade de dígitos da lista (por exemplo, quando muda do usuário 99 para o 100 na mesma página).

Ao invés de tratar as cores como tratei em SkeletonLoader, talvez faça mais sentido customizar o tema e adicionar a dependência deepmerge para facilitar isso.

Existe um pequeno problema que é a renderização inicial a partir do item 1, porque page está undefined.

Carregamento com diferença de dígitos (999 para 1000):

Lista.com.diferenca.de.digitos.mp4

Carregamento de lista com usuários com descrição e nuked:

Lista.com.descricao.e.nuked.mp4

Carregamento da última página:

Ultima.pagina.mp4

Carregamento mostrando o final da página:

Fim.da.pagina.mp4

[Rafatcb]

Um teste falhou no CI uma vez: https://github.com/filipedeschamps/tabnews.com.br/actions/runs/10433251510/job/28894790369?pr=1778

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯

 FAIL  tests/integration/models/event.test.js > models/event > Default user > Create "reward:user:tabcoins" event
AssertionError: expected 1723907716000 to be greater than 1723907716000
 ❯ tests/integration/models/event.test.js:324:48
    322|       expect(uuidVersion(lastEvent.id)).toBe(4);
    323|       expect(Date.parse(lastEvent.created_at)).not.toBeNaN();
    324|       expect(Date.parse(lastEvent.created_at)).toBeGreaterThan(Date.no…
       |                                                ^

    325|     });
    326|   });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Error: AssertionError: expected 1723907716000 to be greater than 1723907716000
 ❯ tests/integration/models/event.test.js:324:48

Imagino que podemos fazer outro PR como o #1720, verificando outros testes que esse problema de comparação de datas possa ocorrer.

[aprendendofelipe]

O código está cheio de "números mágicos" porque foram os que percebi que se encaixavam melhor com a UI para quase não mudar as posições após o carregamento. Talvez tenha uma forma mais simples. Se um usuário ter descrição, já irá mudar, por exemplo, mas isso não me parece um problema, e sim algo natural.

Nos meus testes em homologação, tem hora que tem deslocamento (horizontal e vertical mesmo sem nenhum usuário com descrição preenchida) e tem hora que não tem. Não parece valer a pena tentar fazer o Skeleton com os mesmos espaçamentos, mas apenas indicar que a lista está sendo carregada.

Achei que o resultado ficou bom. Precisei ter alguns cuidados extras com os números de páginas mais altos e com diferenças na quantidade de dígitos da lista (por exemplo, quando muda do usuário 99 para o 100 na mesma página).

Se não for mostrar a numeração enquanto a lista está sendo buscada, dá para evitar muita complexidade.

Existe um pequeno problema que é a renderização inicial a partir do item 1, porque page está undefined.

Só deveria mostrar a numeração após router estar definido, mas, de novo, se não mostrar a numeração enquanto não obteve a lista, já elimina essa complexidade.

Um teste falhou no CI uma vez:

Não é por esse que falhou, mas apontei um problema na alteração dos testes users/get que é a única coisa que realmente impede a aprovação do PR.

[Rafatcb]

Simplifiquei o carregamento e corrigi a parte dos testes. Se alguém ter mais alguma simplificação em mente, pode falar.

[aprendendofelipe]

Em produção! 🚀