0

estoy haciendo una app para ver el clima y la hora de x ciudad estoy usando Reactjs y como apis openweathermap api y teimezonedb para la hora actual, lo que pasa es que para el clima uso un formulario (ciudad y pais) estos son los parámetros de la api y para timezonedb debo pasarle la latitud y la longitud. Aprovechando que la api del clima me da esos datos quiero pasarle esos datos a la url de TimezonDB API pero no se como hacerlo, esto es lo que tengo

Este es el context de la api del clima

const [ formValues, handleInput ] =  useForm({
    city: "",
    country: ""
})
const { city, country } = formValues

//state para el weather
const [apiWeather, setApiWeather] = useState({
    login: true,
    data: {},
    error: ''
})

//state para controlar el llamado a la api
const [queryMade, setQueryMade] = useState(false)

useEffect(() => {
    const getWeather = async () => {
        
        if (queryMade) {
            let APIKEY = ''
            let url = `http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${APIKEY}&units=metric`
            let response = null
            try {
                response = await axios.get(url);
                setApiWeather({
                    ...apiWeather,
                    login: false,
                    data: response.data,
                    error: ''
                })
                setQueryMade(false)
                console.log(response.data)
                
            } catch (error) {
                setApiWeather({
                    ...apiWeather,
                    login: false,
                    data: {},
                    error: `${error}`
                })
                setQueryMade(false)
            }
        }
    }
    getWeather();
}, [queryMade])

return(
    <WeatherContext.Provider value={{
        apiWeather,
        formValues,
        handleInput,
        setQueryMade,
        queryMade,
        lat: apiWeather.data.coord?.lat,
        lon: apiWeather.data.coord?.lon
    }}>
        { props.children }
    </WeatherContext.Provider>
)

Y esto es lo que tengo en el componente de DateTime que es donde hago la llamada a la api de Timezonedb

 const {queryMade, apiWeather, lat, lon} = useContext(WeatherContext)
const { data } = apiWeather

const [apiTimeZone, setApiTimeZone] = useState({
    loading: true,
    data: {},
    error: ''
})

useEffect(() => {
    const getDateTime = async () => {
        if (queryMade) {
           
            const APIKEY = ``;
            const url = `http://api.timezonedb.com/v2.1/get-time-zone?key=${APIKEY}&format=json&by=position&lat=${lat}&lng=${lon}`;
            let response = null
            try {
                response = await axios.get(url)
                setApiTimeZone({
                    ...apiTimeZone,
                    loading: false,
                    data: response.data,
                    error: ''
                })
                console.log( response.data )
                
            } catch (error) {
                setApiTimeZone({
                    ...apiTimeZone,
                    loading: false,
                    data: {},
                    error: ''
                })
            }
           }
    }
    
    getDateTime()
}, [queryMade])

¿Qué me recomiendan hacer?

1
  • Nunca compartas API keys en ningún lugar.
    – FranAcuna
    Commented el 21 oct. 2020 a las 3:04

1 respuesta 1

1

Como dice FranAcuna, nunca pongas APIKeys en un lugar visible, porque podrías llegar a tener problemas de seguridad si realizan acciones maliciosas con tu clave.

Lo segundo, yo crearía dos funciones, la primera sería con la API del clima. En la petición consigues los datos que quieres + latitud y longitud. Eso almacénalo en variables.

Luego, la segunda función recibiría como parámetros latitud y longitud, realizas las comprobaciones y llamas a esa función en la primera función pasándole los datos que almacenaste antes.

Sería algo así:

function getDateTime() { 
    let data = ... llamada a la api;
    let latitud = data.latitud; // no sé si se llamará así el parámetro
    let longitud = data.longitud; // lo mismo que el caso anterior
    // en el caso de conocer esos parámetros, los puedes llamar así
    let {latitud, longitud} = data;
    continua luego...*

Ahora creas la segunda función

function getLocation(latitud, longitud) { realizas las comprobaciones y devuelves lo que quieras }

Y en la función anterior, la llamas ahí.

    *let ciudad = getLocation(latitud, longitud);

Y ya con esos datos puedes seguir trabajando.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.