Upload 2.18

part2/countries/src/App.js

@@ -0,0 +1,68 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+const App = () => {
+  const [query, setQuery] = useState("");
+  const [countries, setCountries] = useState([]);
+  const [showedCountries, setShowedCountries] = useState([]);
+
+  const CountryData = ({ country }) => {
+    return (
+      <div>
+        <h1>{country.name.common}</h1>
+        <div>Capital: {country.capital}</div>
+        <div>Area: {country.area} km²</div>
+        <h3>Languages:</h3>
+        <ul>
+          {Object.values(country.languages).map((language) => (
+            <li key={language}>{language}</li>
+          ))}
+        </ul>
+        <img src={country.flags.png} alt={`${country.name.common} flag`} />
+      </div>
+    );
+  };
+
+  const Countries = ({ showedCountries }) => {
+    if (showedCountries.length === 1) {
+      return <CountryData country={showedCountries[0]} />;
+    } else if (showedCountries.length <= 10) {
+      return (
+        <div>
+          {showedCountries.map((country) => (
+            <div key={country.name.official}>{country.name.common}</div>
+          ))}
+        </div>
+      );
+    } else if (showedCountries.length > 10) {
+      return <div>Too many matches, specify another filter</div>;
+    }
+  };
+
+  useEffect(() => {
+    axios.get("https://restcountries.com/v3.1/all").then((response) => {
+      setCountries(response.data);
+    });
+  }, []);
+
+  const handleQueryChange = (event) => {
+    const search = event.target.value;
+    setQuery(search);
+    setShowedCountries(
+      countries.filter((country) =>
+        country.name.common.toLowerCase().includes(search.toLowerCase())
+      )
+    );
+  };
+
+  return (
+    <div>
+      <div>
+        Find countries <input value={query} onChange={handleQueryChange} />
+      </div>
+      <Countries showedCountries={showedCountries} />
+    </div>
+  );
+};
+
+export default App;

part2/countries/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

part2/countries/src/index.js

@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));