From 74a8e26d68c029f98dd7c16a2e1cc95a2f080c44 Mon Sep 17 00:00:00 2001
From: Thuan Bui <thuanbui87@gmail.com>
Date: Thu, 2 Sep 2021 21:01:31 +0700
Subject: [PATCH] Completed 2.14

---
 part2/2.12-2.14/src/App.js                |  8 ++++----
 part2/2.12-2.14/src/components/Country.js |  3 ++-
 part2/2.12-2.14/src/components/Weather.js | 16 +++++++++++-----
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/part2/2.12-2.14/src/App.js b/part2/2.12-2.14/src/App.js
index 27148bf..ca83c2f 100644
--- a/part2/2.12-2.14/src/App.js
+++ b/part2/2.12-2.14/src/App.js
@@ -20,16 +20,16 @@ const App = () => {
 
   useEffect(() => {
     console.log(ResultList)
-    if (ResultList.length > 0 ) {
-      const capital = ResultList[0].capital
-      const apistring = `http://api.weatherstack.com/current?access_key=9482b8f61c984f8e1988759e020d133e&query=${capital}`
+    if (ResultList.length === 1 ) {
+      const capital = ResultList[0].capital.replace(/\s/g, '+')
+      console.log(capital)
+      const apistring = `http://wttr.in/${capital}?format=j1`
       console.log(capital, apistring)
       axios
         .get(apistring)
         .then(response => {
         setWeatherdata(response.data)
       })
-      console.log(WeatherData)
     }
     }, [ResultList])
   
diff --git a/part2/2.12-2.14/src/components/Country.js b/part2/2.12-2.14/src/components/Country.js
index 71f7e32..2b96245 100644
--- a/part2/2.12-2.14/src/components/Country.js
+++ b/part2/2.12-2.14/src/components/Country.js
@@ -31,7 +31,8 @@ const CountryLongList = ({data, onClick,weather}) => {
     );
 }
 const CountryDetail = ({data,weather}) => {
-    console.log(weather)
+    console.log("Data", data)
+    console.log("Length", data.length)
     return (
         <div>
             <h2>{data.name}</h2>
diff --git a/part2/2.12-2.14/src/components/Weather.js b/part2/2.12-2.14/src/components/Weather.js
index f72507d..194d4c6 100644
--- a/part2/2.12-2.14/src/components/Weather.js
+++ b/part2/2.12-2.14/src/components/Weather.js
@@ -1,13 +1,19 @@
 import React from 'react'
 
 const Weather = ({weather,capital}) => {
-    console.log(weather)
-    
+    const {current_condition} = weather
+    const temperature = current_condition[0].temp_C
+    const windspeed = current_condition[0].windspeedKmph
+    const winddirection = current_condition[0].winddir16Point
     return (
         <div>
-            <p>Temperature: {weather.current.temperature} Celcius</p>
-            <img src={weather.current.weather_icons} alt="Weather" />
-            <p>Wind: {weather.current.wind_speed} mph {weather.current.wind_degree} {weather.current.wind_dir}</p>
+            <h2>Weather in {capital}</h2>
+            { weather &&
+                <div>
+                <p>Temperature: {temperature} Celcius</p>
+                <p>Wind: {windspeed} km/h, Direction {winddirection}</p>
+                </div>
+                }
         </div>
     )
 }