Skip to content

feat: melhorias nas páginas de contagens - #140

Open
italosergio wants to merge 16 commits into
devfrom
feat/contagens-melhorias
Open

feat: melhorias nas páginas de contagens#140
italosergio wants to merge 16 commits into
devfrom
feat/contagens-melhorias

Conversation

@italosergio

Copy link
Copy Markdown
Collaborator

Resumo

Melhorias na experiência de navegação e correções nas páginas de contagens de ciclistas.

Mudanças

🐛 Correções

  • Fix timezone em datas: IntlDateStr agora parseia datas YYYY-MM-DD como horário local, corrigindo bug onde o fuso UTC-3 de Recife deslocava a data um dia para trás (ex: 30/03 aparecia como 29/03). Também adicionado tratamento para valores nulos e formatos inesperados, evitando crash "Invalid time value".

✨ Funcionalidades

  • Slugs textuais para contagens: URLs das contagens agora usam o formato aaaa_mm_dd-nome_da_contagem (ex: 2022_03_30-av_rui_barbosa_x_r_amelia) em vez de IDs numéricos. Aplicado em:

    • Links no mapa (modal e pontos)
    • Tabela de contagens
    • Página de comparação (rota, breadcrumb, botões)
    • Backward compatible: IDs numéricos antigos continuam funcionando
  • Botão "Ver mais" no modal: Ao clicar em um ponto de contagem no mapa, o modal agora exibe um botão "Ver mais" que leva à página individual da contagem.

  • Comparação entre contagens do mesmo local: Agora é possível comparar contagens de datas diferentes no mesmo ponto (ex: Av. Rui Barbosa 2013 vs 2022). Antes, todas as contagens do mesmo local eram excluídas da tabela de comparação.

Arquivos modificados

Arquivo Mudança
app/services/utils.ts Fix timezone + robustez no IntlDateStr
app/utils/slugify.ts Nova função contagemSlug
app/components/Contagens/PointDetailsModal.tsx Botão "Ver mais"
app/hooks/useCountsMapData.ts Slugs textuais nos pontos do mapa
app/components/Contagens/CountsTable.tsx Slugs textuais na tabela
app/queries/dados.contagens.$slug.ts Resolução de slugs textuais
app/services/counting-details.service.ts Filtro por countId específico
app/routes/dados.contagens.$slug._index.tsx firstSlug textual + countId
app/routes/dados.contagens.$slug.compare.$compareSlug.tsx Slugs textuais + datas formatadas
app/components/Contagens/CountingComparisionTable.tsx Slugs textuais nos links

Testado

  • Build de produção passa sem erros novos
  • Datas exibidas corretamente no formato dd/mm/aaaa
  • Backward compatibility com IDs numéricos nas URLs

- Cria componente MapboxKeyWarning para exibir mensagem amigável
- Integra aviso no AmecicloMap quando MAPBOX_TOKEN está ausente
- Adiciona link para página de contato com mensagem pré-preenchida
- Inclui página específica do erro na mensagem de contato
- Adiciona arquivo .env.example com placeholders para variáveis de ambiente
- Cria LanguageSelector com dropdown interativo para troca de idiomas
- Cria LanguageBadge para exibir idiomas disponíveis em cards
- Suporta português (PT), inglês (EN) e espanhol (ES)
- Implementa detecção automática de idioma baseada no slug
- Adiciona ícone Globe do lucide-react
- Inclui animações e transições suaves
- Responsivo para mobile e desktop
- Cria componente para exibir os 4 passos do projeto Bota Pra Rodar
- Implementa traduções em PT, EN e ES
- Exibe imagens ilustrativas para cada passo
- Adiciona botão de formulário de doação
- Layout responsivo em grid (1/2/4 colunas)
- Inclui ícone de bicicleta do lucide-react
- Efeitos hover e transições suaves
- Adiciona tradução completa em inglês (bota_pra_rodar_en.json)
- Adiciona tradução completa em espanhol (bota_pra_rodar_es.json)
- Inclui todas as seções: descrição, objetivos, funcionamento
- Traduz histórico, conquistas e formas de contribuir
- Mantém estrutura de dados consistente com versão PT
- Preserva formatação rich text (headings, paragraphs, lists)
- Adiciona detecção de slugs com sufixos _en e _es
- Implementa leitura de arquivos JSON de tradução
- Adiciona verificação de traduções disponíveis
- Retorna lista de idiomas disponíveis para cada projeto
- Mantém fallback para API quando tradução não existe
- Usa fs/promises para leitura assíncrona de arquivos
- Adiciona tratamento de erros robusto
- Adiciona LanguageSelector no banner do projeto
- Integra ProjectSteps para projeto Bota Pra Rodar
- Detecta idioma atual baseado no slug
- Exibe componentes apenas para projeto específico
- Posiciona seletor de idioma no canto superior direito
- Mantém responsividade e acessibilidade
- Preserva funcionalidades existentes da página
- Adiciona LanguageBadge no ProjectCard para Bota Pra Rodar
- Filtra projetos traduzidos (_en, _es) da listagem principal
- Exibe apenas versão PT na lista de projetos
- Mantém traduções acessíveis via badge ou seletor
- Evita duplicação de cards na listagem
- Melhora UX ao separar idiomas de projetos
- Remove importação de ProjectPage não utilizada
- Mantém funcionalidades da navbar intactas
- Limpa código desnecessário
- Melhora organização dos imports
…a de contagens

- Adiciona key prop com params.slug no elemento main para forçar re-renderização quando a rota mudar
- Importa useParams do @remix-run/react para acessar parâmetros da URL
- Remove variável flowData não utilizada que estava sendo calculada mas nunca referenciada
- Melhora performance ao eliminar cálculo desnecessário de getFlowData

Essas mudanças garantem que o componente seja completamente remontado ao navegar
entre diferentes contagens, evitando problemas de estado persistente entre rotas.
@italosergio italosergio self-assigned this Apr 27, 2026
@italosergio
italosergio requested a review from dvalenca April 27, 2026 04:30
@italosergio
italosergio force-pushed the feat/contagens-melhorias branch from d0603f5 to ce3de8d Compare April 27, 2026 04:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant