React + Axios + API

Oi, Gustavo! Vi o seu projeto, acessei a aplicação e tá muito bom! Parabéns!! Não encontrei nenhum "dado estranho" retornado pela api na minha máquina, mas pode ser que eles existam mesmo devido a precisão do Location do navegador, posição de satélites, etc. Sugiro uma refatoração no seu código, componentizando mais sua estrutura e deixar o código mais legível. E não esquece de compartilhar nas redes sociais e marcar a gente! Abraços!!

Olá Neilton!

Obrigado pelo feedback.

Eu moro no Rio de Janeiro, mas ele aparece aqui como Duque de Caxias, que fica a uns 5km de distância, não sei se é alguma peculiaridade da API, como divisão de estações meteorológicas..

Vou refatorar o código e componentizar, conforme sua sugestão.

Mas saberia informar se há alguma forma de melhorar a accuracy do GPS do browser?

Então, uma coisa que não vi em seu código são as options que o navigator.geolocation.getCurrentPosition(success, error, options); recebe como parâmetros. Você poderia passar essas options como sugere a documentação. Exemplo:

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

Com o enableHighAccuracy: true você poderia melhorar a accuracy do GPS do browser. O parâmetro error tbm é recomendado como uma boa prática.

Você pode consultar a documentação aqui!

Eu vi algo parecido, mas ainda não consegui implementar.. Não encontrei onde tenho que declarar os parâmetros do option e como devolver as informações dele...

Já separei por componentes e refatorei, depois se puder ver...

Sobre o "options", não estou sabendo implementar, seria algo assim:

  useEffect(() => {
    navigator.geolocation.watchPosition(
      (position) => {
        getWeather(position.coords.latitude, position.coords.longitude)
        setLocation(true)
      console.log(position)},
      (error) => console.log(error),
      (options) => ({
        enableHighAccuracy: true,
        timeout: 3000,
        maximumAge: 1000,
      })
    )
  }, [])

Bom dia!

Ninguém sabe dizer?

Já tentou passar o options como um objeto?

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

Assim

useEffect(() => {
    navigator.geolocation.watchPosition(
      (position) => {
        getWeather(position.coords.latitude, position.coords.longitude)
        setLocation(true)
      console.log(position)},
      (error) => console.log(error),
      options
    )
  }, [])

Vou tentar e te aviso! Obrigado por responder.

Não funcionou, não consegui buildar..

Line 42:6: React Hook useEffect has a missing dependency: 'options'. Either include it or remove the dependency array react-hooks/exhaustive-deps

import React from 'react'
import axios from 'axios'
import { useEffect, useState } from 'react'
import Location from './components/Location/'
import Loading from './components/Loading/'
import CardTempo from './components/CardTempo'

import './App.css'

export default function App() {
  const [location, setLocation] = useState(false)
  const [weather, setWeather] = useState(false)

  let getWeather = async (lat, long) => {
    let res = await axios('https://api.openweathermap.org/data/2.5/weather', {
      params: {
        lat: lat,
        lon: long,
        appid: 'debb98d2ccf2eed3b85b93a8c4d380bd',
        lang: 'pt',
        units: 'metric',
      },
    })
    setWeather(res.data)
  }

  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };

  useEffect(() => {
    navigator.geolocation.watchPosition(
      (position) => {
        getWeather(position.coords.latitude, position.coords.longitude)
        setLocation(true)
      console.log(position)},
      (error) => console.log(error),
      options
    )
  }, [])

  if (location === false) {
    return <Location />
  } else if (weather === false) {
    return <Loading />
  } else {
    return <CardTempo clima={weather} />
  }
}

Tenta colocar o options dentro do useEffect() ou remover o array de dependências do useEffect().

Nada feito.. Tentei as duas opções..

A accuracy não diminui por nada.. Fica mantido na mesma..