Integração: migrar Home para API real (highlights + profissionais por especialidade)

[tarcisiopgs]

Contexto

A Home (/) exibe destaques da semana e profissionais por especialidade, mas tudo vem de useProfessional() que busca /mocks/professional.json. O useUserPatient() lê de localStorage com a chamada real comentada. Os endpoints já existem no backend e os hooks Kubb estão gerados. Parte da migração descrita em #63.

Decisão de design

Manter os componentes visuais como estão (HighlightWeek, ProfessionalSection, ProfessionalCard). A migração é nos hooks de dados. Criar adapter toProfessionalCardProps() que transforma o shape da API (_id, profilePhoto, professionalSpecialties) no shape esperado pelos componentes (id, image, specialization).

Campos que a API não retorna (como price, distance, rating) serão omitidos ou exibidos como placeholder — esses dados não existem no backend ainda.

O que fazer

• Substituir useProfessional() por hook que chama GET /search/highlightsWeek (Kubb: getSearchHighlightsweek)
• Criar segundo hook pra GET /search/professionalBySpeciality/:speciality (Kubb: getSearchProfessionalbyspecialitySpeciality)
• Criar adapter toProfessionalCardProps() para mapeamento de shape
• Descomentar chamada real em useUserPatient() (api.get("/user")) e remover leitura de localStorage
• Tornar campos price, distance, rating opcionais no ProfessionalCard
• Remover mock: public/mocks/professional.json (se nenhum outro hook depender — senão, aguardar as outras issues de migração)

Fora de escopo

• Migrar Search, Appointments ou Addresses (issues separadas)
• Rating, reviews, preço e distância de profissionais (não existem no backend)
• Endpoint de especialidades (issue separada)

Comportamento esperado

1. Ao abrir a Home, HighlightWeek faz GET /search/highlightsWeek e renderiza até 10 cards
2. ProfessionalSection lê especialidades do paciente logado e faz GET /search/professionalBySpeciality/:speciality pra cada
3. Se não logado, exibe seções com especialidades default
4. Loading states nos cards enquanto carrega

Critérios de aceite

• Home exibe profissionais reais da API
• Cards mostram nome, foto e especialidades vindos da API
• Seção de destaques funciona com paginação
• Funciona tanto logado quanto deslogado
• Loading states nos cards
• useUserPatient() busca da API real

Stack / Restrições técnicas

Next.js 15, React Query 5, Kubb hooks. O useGetUser precisa de token — se não logado, não chamar.

Arquivos relevantes

• src/features/home/components/HighlightWeek.tsx
• src/features/home/components/ProfessionalSection.tsx
• src/features/home/components/ProfessionalCard.tsx
• src/features/home/hooks/useProfessional.ts
• src/features/home/hooks/useUserPatient.ts
• src/kubb/hooks/useGetSearchHighlightsweek.ts
• src/kubb/hooks/useGetSearchProfessionalbyspecialitySpeciality.ts

Parte de #63

[PolyannaMeira]

https://conecta-bem-front-git-feat-centrali-764cca-conectabems-projects.vercel.app/

[MateusFelS]

@PolyannaMeira um dos critérios de aceite é sobre páginação. Ele foi aplicado? Aqui só aparece os 10 cards

[tarcisiopgs]

boa observação @MateusFelS, paginação dos destaques tava de fato quebrada. resolvi com dois PRs:

no backend, a developmentHC/conectaBemBack#73 corrige a causa raiz: os 3 controllers de busca (searchProfessionalsHighlightsWeek, searchProfessionalBySpeciality, searchBar) liam req.params.page, mas as rotas que montam eles não tinham placeholder :page — então req.params.page era sempre undefined e o controller caía no fallback || 1 pra sempre. trocou pra req.query.page e atualizou a spec do swagger pra page ser query param.

no front, a #228 adiciona a UI de paginação que tava faltando. HighlightWeek e cada SpecialitySectionItem agora têm state local de page e renderizam botões Anterior / + Ver Mais gateados em page > 1 e page < pageCount. o "+ Ver Mais" antes era um div decorativo.

testei em prod: clicar "+ Ver Mais" carrega a próxima página dos destaques (network mostra /search/highlightsWeek?page=2), os cards trocam, "Anterior" aparece, "+ Ver Mais" some na última página. mesma coisa pra cada seção por especialidade.

fica de olho aí pra revalidar.

[miguel-luis636]

amanhã faço a revalidação

[MateusFelS]

@PolyannaMeira @tarcisiopgs está funcionando mas tem um detalhe, quando está vazio (no caso do Reiki), ele fica o titulo sem nada. Deveria ter alguma mensagem?

[miguel-luis636]

outra coisa tbm era pra estes botoes estarrem funcionando? @tarcisiopgs @PolyannaMeira ou eles ficam assim por enquanto já que vai ter a mudança de requisitos do filtro de busca