frontend
frontend copied to clipboard
Filtro por localização do usuário
Descrição
Para facilitar a vida de quem precisa saber os abrigos mais próximos, seja:
- Alguém procurando abrigo
- Procurando com itens de sobra para colaborar
- Procurando com itens de falta para colaborar
Demonstração(desatualizado, olhar abaixo)
Mudanças
- Criado hook
useGeolocation
para facilitar o reuso do recurso da API - Adicionado/instalado
@radix-ui/react-slider
doshadcn
- Criação do filtro de abrigos mais próximos
- Criado slider para ser mais prático a seleção do raio
- Botões com intervalos de 500m
Detalhes técnicos
- Modificar modal de filtros para
- Adicionar checkbox de filtro para abrigos próximos
- (liberar caso o anterior seja selecionado) Input de raio(em metros)
- Pegar coordenadas do usuário via API de geolocation do navegador
- Enviar estes dados para o filtro do backend
Decisões
- Foi deixado uns botões de soma e subtração baseado no intervalo(500m), e deixado na outra linha para não complicar a experiência do rangeSlider, principalmente no mobile que a tela já é pequena e complica se o slider for muito pequeno(já fica pequeno mesmo sem os botões nas laterais)
- Estes foram criados para facilitar o uso, se por exemplo o usuário está com uma tela muito pequena e com dificuldade para acertar a distância os botões são para ajustar com o intervalo pequeno.
- Foi utilizado um checkbox para habilitar estes campos porque no mobile eles por padrão vão utilizar muito espaço e deixa mais fácil de entender se tá utilizando ou não, se não aparece então qualquer um vai entender que não está sendo usado
- Adicionado um texto com link de acordo com o dispositivo do usuário caso ele recuse ou tenha problemas com geolocalização, é usado apenas como auxilio já que podem ser vários problemas.
Backend
- https://github.com/SOS-RS/backend/pull/93
Atualização 18/05
Atualizar baseado no novo figma
implements #150 depends on https://github.com/SOS-RS/backend/pull/93
@kelvinsb pode fazer um rebase e resolver os conflitos?
@kelvinsb pode fazer um rebase e resolver os conflitos?
@lucianomlima atualizei e resolvi os conflitos, se puder testar novamente e ver se tá tudo ok