[Feat]: Adição da paginacao na tela de transtornos

[roberto-bento]

O que foi feito
Implementada a listagem de Transtornos seguindo a arquitetura de Fatiamento Vertical (Vertical Slicing) do projeto. A tela conta com busca com debounce e paginação gerenciadas via nuqs (Single Source of Truth), resolvendo definitivamente os problemas de persistência de UI. A comunicação com o backend foi construída utilizando chamadas nativas de fetch direto da camada de domínio, alinhando-se ao padrão da equipe.

Estrutura criada/modificada:

apps/apae/src/app/disorders/
└── page.tsx (Ponto de entrada, delega renderização para <DisordersList />)

apps/apae/src/domains/disorders/list/
├── disorders-list.tsx (Interface visual com Suspense e consumo do hook)
└── use-disorders-list.ts (Inteligência centralizada: nuqs, debounce, fetch nativo e exclusão)

Critérios de aceite atendidos:
✅ Estrutura criada seguindo o padrão de Vertical Slicing (camada app/ isolada da domains/)
✅ Paginação e busca integradas com a URL via nuqs (Resolução da Issue #508)
✅ Input de busca otimizado com debounce (500ms)
✅ Integração com o backend utilizando chamadas nativas (fetch e URLSearchParams)
✅ Prevenção de Race Conditions com AbortController (tratando a exceção nativa AbortError)
✅ Frontend protegido com Suspense boundary para garantir a compilação do Next.js

Observações:

• O arquivo page.tsx atua exclusivamente como roteador, garantindo que toda a inteligência e o estado fiquem retidos no hook do domínio.
• O fluxo de dados consome a API do backend de forma direta, isolando a complexidade e evitando sobrecarga no cliente.

Evidências

Implementacao.de.paginacao.em.transtornos.mp4

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ecd130de-f09b-4aea-a336-b4c0d44208cf

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 837-adicionar-paginacao-na-tela-de-transtornos

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jefter-dev]

Precisamos ajustar dois pontos nesta tela:

• A paginação foi implementada manualmente dentro da tela, mas o projeto já possui o componente compartilhado apps/apae/src/components/shared/pagination.tsx. Usar esse componente para evitar duplicação de código e manter o padrão do sistema.
• Ajustar a margem/espaçamento da página, pois atualmente não está seguindo o mesmo padrão visual das demais telas.

A ideia é remover a lógica/renderização manual da paginação, como renderPageNumbers, botões "Anterior/Próxima", select de itens por página e total de registros feitos diretamente na tela, substituindo pelo componente compartilhado.