Upload 2.20

.gitignore

@@ -1 +1,2 @@
 .vscode/settings.json
+part2/countries/.env

part2/countries/src/components/Countries.js

@@ -1,23 +1,17 @@
-import { useState } from "react";
 import CountryData from "./CountryData";
 
-const Countries = ({ showedCountries }) => {
+const Countries = ({ showedCountries, setShowedCountries }) => {
-  const [country, setCountry] = useState("");
   if (showedCountries.length === 1) {
     return <CountryData country={showedCountries[0]} />;
   } else if (showedCountries.length <= 10) {
-    return (
+    return showedCountries.map((country) => (
-      <div>
+      <div key={country.cca3}>
-        {showedCountries.map((country) => (
+        {country.name.official}
-          <div key={country.cca3}>
+        {""}
-            {country.name.common}{" "}
+        <button onClick={() => setShowedCountries([country])}>Show</button>
-            <button onClick={() => setCountry(country)}>show</button>
-          </div>
-        ))}
-        {country && <CountryData country={country} />}
       </div>
-    );
+    ));
-  } else if (showedCountries.length > 10) {
+  } else {
     return <div>Too many matches, specify another filter</div>;
   }
 };

part2/countries/src/components/CountryData.js

@@ -1,3 +1,5 @@
+import Weather from "./Weather";
+
 const CountryData = ({ country }) => {
   return (
     <div>
@@ -11,6 +13,7 @@ const CountryData = ({ country }) => {
         ))}
       </ul>
       <img src={country.flags.png} alt={`${country.name.common} flag`} />
+      <Weather capital={country.capital} />
     </div>
   );
 };

part2/countries/src/components/Weather.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+const Weather = ({ capital }) => {
+  const OPENWEATHER_API_KEY = process.env.REACT_APP_OPENWEATHER_API_KEY;
+  const [weather, setWeather] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get(
+        `https://api.openweathermap.org/data/2.5/weather?q=${capital}&units=metric&appid=${OPENWEATHER_API_KEY}`
+      )
+      .then((response) => {
+        setWeather(response.data);
+      });
+  }, [OPENWEATHER_API_KEY, capital]);
+  return weather.weather ? (
+    <div>
+      <h2>Weather in {capital}</h2>
+      <div>Temperature: {weather.main.temp}°C</div>
+      <img
+        alt="weather icon"
+        src={`http://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}
+      />
+      <div>Wind: {weather.wind.speed}m/s</div>
+    </div>
+  ) : null;
+};
+
+export default Weather;