add Weather state. not yet finish

part2/2.12-2.14/src/App.js

@@ -8,6 +8,7 @@ const App = () => {
   const [newSearch, setNewSerach] = useState('')
   const [CountryList, setCountryList] = useState([])
   const [ResultList, setResultList] = useState([])
+  const [WeatherData, setWeatherdata] = useState([])
 
   useEffect(() => {
     axios
@@ -17,8 +18,22 @@ 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}`
+      console.log(capital, apistring)
+      axios
+        .get(apistring)
+        .then(response => {
+        setWeatherdata(response.data)
+      })
+      console.log(WeatherData)
+    }
+    }, [ResultList])
+  
   const clickHandler = (index) => {
-    console.log(index)
     const newresult = ResultList
     newresult[index].Show = !newresult[index].Show
     setResultList([...newresult])
@@ -31,14 +46,14 @@ const App = () => {
   useEffect(() => {
     const sfilter = CountryList.filter(country => country.name.toLowerCase().includes(newSearch.toLowerCase()))
     const filter = sfilter.map(item => ({...item,Show:false}))
-    setResultList(filter)
+    setResultList([...filter])
   }, [newSearch, CountryList])
 
   return (
     <div>
       <h2>Country</h2>
       <Filter value={newSearch} onChange={handleSearchChange} />
-      <Country data={ResultList} onClick={clickHandler}/>
+      <Country data={ResultList} onClick={clickHandler} weather={WeatherData}/>
     </div>
   )
 }

part2/2.12-2.14/src/components/Country.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import Weather from './Weather';
 
-const Country = ({data,onClick}) => {
+const Country = ({data,onClick,weather}) => {
     const list = data.length
     const clickHandler = (index) => {
         onClick(index)
@@ -8,35 +9,36 @@ const Country = ({data,onClick}) => {
     return (
         <div>
             {list > 10 ? 'Too many matches, specific another filter' :
-            list > 1  ? data.map((item, index) => <CountryLongList key={item.alpha2Code} data={item} onClick={() => clickHandler(index)}/>) :
+            list > 1  ? data.map((item, index) => <CountryLongList key={item.alpha2Code} data={item} onClick={() => clickHandler(index)} weather={weather}/>) :
-            data.map(item => <CountryDetail key={item.alpha2Code} data={item}/>)
+            data.map(item => <CountryDetail key={item.alpha2Code} data={item} weather={weather}/>)
             }
         </div>
         
     )
 }
-const CountryLongList = ({data, onClick}) => {
+const CountryLongList = ({data, onClick,weather}) => {
     const show = data.Show
     console.log(show)
     return (
       <div>
-        <p>
           <span>{data.name}</span>
           <button onClick={onClick}>
             {show === false ? "Show" : "Hide"}
           </button>
-          {show === true && <CountryDetail key={data.alpha2Code} data={data}/>}
+          <div>{show === true && <CountryDetail key={data.alpha2Code} data={data}/>}
-        </p>
+          </div>
       </div>
     );
 }
-const CountryDetail = ({data}) => {
+const CountryDetail = ({data,weather}) => {
+    console.log(weather)
     return (
         <div>
             <h2>{data.name}</h2>
             <p>
                 Capital: {data.capital}
-                <br />
+            </p>
+            <p>
                 Population: {data.population}
             </p>
             <h3>Languagues</h3>
@@ -44,7 +46,7 @@ const CountryDetail = ({data}) => {
             {data.languages.map(item =><li key={item.name}>{item.name}</li>)}
             </ul>
             <img src={data.flag} alt={data.name} width="200" />
-
+            <Weather weather={weather} capital={data.capital} />
         </div>
     )
 }

part2/2.12-2.14/src/components/Weather.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Weather = ({weather,capital}) => {
+    console.log(weather)
+    
+    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>
+        </div>
+    )
+}
+
+export default Weather