Fetch

JuanMaChico · Aug 24, 2022 · b7f709f · b7f709f
1 parent dea2152
commit b7f709f
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<html lang="en">
+<html lang="es">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="http://openweathermap.org/img/wn/[email protected]" />

diff --git a/src/app/App.jsx b/src/app/App.jsx
@@ -4,16 +4,48 @@
 import React, { useState, useEffect } from "react";
 import { Root } from "./App.styles";
 import Card from "../containers/card";
-import ServicioFake from "../utils/ServicioFake.json";
+import { GetCity, GetData, GetWeekClima, GetClima } from "../service/Service";
 
 
 function App() {
 
+	const [ Clima, setclima ] = useState(null);
+
+	const [ WeekClima, setWeekClima ] = useState(null);
+
+
+	useEffect(() => {
+
+		// GetCity().then((data)=>{
+		// 	GetData(data.city).then((clima)=>{
+		// 		console.log("Day", Clima);
+		// 		setclima(clima);
+		// 	})
+		// })
+		try {
+
+			handlerWeather();
+
+		} catch (error) {
+			console.log(error);
+		}
+
+	}, []);
+
+	const handlerWeather = ( city= null) => {
+		GetClima(function (data) {
+			setclima(data);
+			//hacer Dispatch de data;
+			},city);
+	}
 
+	console.log("Clima del dia =",Clima);
+
 	return (
 		<Root>
 			{
-				<Card weather={ServicioFake} />
+				Clima &&
+				<Card weather={Clima}  changeCity={(city) => handlerWeather(city)}/>
 			}
 		</Root>
 	);

diff --git a/src/components/CurrentWeek/CurrentWeek.jsx b/src/components/CurrentWeek/CurrentWeek.jsx
@@ -5,12 +5,22 @@ import React from "react";
 import { Root, Text, Days, Icons, Temp } from "./CurrentWeek.styles";
 import ServiceWeek from "../../utils/ServiceWeek.json";
 
-function CurrentWeek() {
-	const { list } = ServiceWeek;
+function CurrentWeek( props ) {
+
+	const {
+
+		coordenadas,
+
+	} = props;
+
+	const  list  = false;
 
 	return (
 		<Root>
-			{list.map( (item, key) => {
+
+			{
+			list &&
+			list.map( (item, key) => {
 				return (
 					<Days key={key}>
 						<Icons

diff --git a/src/components/Select/Select.jsx b/src/components/Select/Select.jsx
@@ -6,7 +6,7 @@ import React, { useState } from "react";
 /**
  * @Desc Estilos
  */
-import { Selected, ItemsMenu, Boton } from "./Select.styles";
+import { Selected, ItemsMenu } from "./Select.styles";
 
 function Select(props) {
 	const [open, setOpen] = useState(false);

diff --git a/src/containers/card.jsx b/src/containers/card.jsx
@@ -20,6 +20,8 @@ function Card( props ) {
 
 		weather,
 
+		changeCity,
+
 		options = ["Ubicacion actual", "Buenos aires", "Miami", "Rosario"]
 
 
@@ -36,10 +38,11 @@ function Card( props ) {
 				value={ubicacion}
 				handleChange={(value) => {
 					setUbicacion(value);
+					changeCity(value);
 				}}
 			/>
 			<CurrentDay weather={weather} />
-			<CurrentWeek/>
+			<CurrentWeek coordenadas={weather.coord} />
 		</Root>
 	);
 }

diff --git a/src/service/Service.jsx b/src/service/Service.jsx
@@ -1,2 +1,53 @@
+//API KEY - Clave unica del api por usuario
 import { API_KEY } from "../utils/constants";
+import * as Request from "../utils/requests";
 
+/**
+ * API Ubicacion por Ip
+ * @returns { JSON }  https://ip-api.com/docs
+ */
+export const GetCity = async () => {
+    try {
+
+        const response = await Request.get('http://ip-api.com/json/?fields=61439')
+        return response.data;
+
+    } catch (error) {
+
+        throw {
+            error,
+            msg:"Fallo - GetCity"
+        }
+
+    }
+} 
+
+/**
+ * API Clima por ciudad del dia corriente
+ * @param {String} CITY 
+ * @returns { JSON } https://openweathermap.org/current
+ */
+export const GetData = async ( CITY ) => {
+    const response = await Request.get(`https://api.openweathermap.org/data/2.5/weather?q=${CITY}&units=metric&lang=es&appid=${API_KEY}`)
+    return response.data;
+}
+
+
+export const GetWeekClima = async ( lat, lon ) => {
+    const response = await fetch(`api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&units=metric&lang=es&appid=${API_KEY}`);
+    const data = await response.json();
+    console.log(data)
+    return data;
+}
+
+
+export const GetClima = async ( callback, city=null ) => {
+    let dataCiudad = city;
+    if ( !dataCiudad ) {
+        let response = await GetCity();
+        dataCiudad = response.city;
+    }
+    console.log("Data ciudad get clima",dataCiudad);
+    const data = await GetData(dataCiudad);
+    callback(data);
+}
diff --git a/src/utils/ServiceIp.json b/src/utils/ServiceIp.json
@@ -0,0 +1,16 @@
+{
+	"status": "success",
+	"country": "Argentina",
+	"countryCode": "AR",
+	"region": "C",
+	"regionName": "Buenos Aires F.D.",
+	"city": "Buenos Aires",
+	"zip": "1871",
+	"lat": -34.6038,
+	"lon": -58.3817,
+	"timezone": "America/Argentina/Buenos_Aires",
+	"isp": "NSS S.A.",
+	"org": "",
+	"as": "AS16814 NSS S.A.",
+	"query": "190.210.247.53"
+}
diff --git a/src/utils/requests.jsx b/src/utils/requests.jsx
@@ -0,0 +1,27 @@
+
+
+export const get = async (url) => {
+
+    try{
+
+        const raw_response = await fetch(url);
+        const response = await raw_response.json();
+        if ( raw_response.status == 200 ) {
+            return {
+                code: raw_response.status,
+                data: response
+            }
+        } else if( raw_response.status == 400 ) {
+
+            return{
+                code:raw_response.status,
+                msg_error:"Bad Request"
+            }
+
+        }
+    }
+    catch( error ){
+        console.error("Error en Request Get ",error);
+    }
+
+}