Completed 2.14

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])
   

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>

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>
     )
 }