ex2.18 country info part1

3 files changed, 99 insertions, 0 deletions

diff --git a/part2/countrydata/src/App.js b/part2/countrydata/src/App.js
new file mode 100644
index 0000000..b3168b1
--- /dev/null
+++ b/part2/countrydata/src/App.js
@@ -0,0 +1,83 @@
+import axios from 'axios'
+import {useEffect, useState} from 'react'
+
+const Notification = (props) => {
+   const namesOfCountries = props.countries.map(country => {
+     return <li>{country.name.official}</li>
+            })
+
+  if (props.countries.length <= 10 && props.countries.length > 1) {
+      return (
+       <pre>
+         <ul>
+          {namesOfCountries}
+         </ul>
+        </pre>
+        )
+
+  } else if (props.countries.length > 10) {
+    return <p>Too many matches, specify another filter</p>
+  } else if (props.countries.length === 1) {
+      // retrieve object pertaining to country
+      const country = props.countries[0]
+      console.log(props.countries[0])
+
+     // extract languages from 
+    let languages = []
+     for (let value in country.languages) {
+       languages = languages.concat(<li>{country.languages[value]}</li>)
+    }
+      return (
+        <div>
+          <h1>{country.name.official}</h1>
+          <p>capital {country.capital}</p>
+          <p>area {country.area}</p>
+          <h3> languages: </h3>
+           <ul>
+             {languages}
+           </ul>
+          <img src={country.flags.png} alt={country.flags.alt} />
+        </div>
+      )
+  }
+  }
+
+const App = () => {
+
+  const [country, setCountry] = useState('')
+  const [countries, setCountries] = useState([])
+
+  const handleChange = (event) => {
+    console.log(event.target.value)
+    setCountry(event.target.value)
+  }
+
+  useEffect( () => {
+    axios
+      .get('https://restcountries.com/v3.1/all')
+      .then(response => {
+        if(country) {
+          const filtered = response.data.filter(value => 
+            value.name.official
+              .includes(country))
+          setCountries(filtered)
+          console.log(countries, countries.length)
+
+        }
+      })
+      //.catch(response => {
+        //return null
+      //})
+
+  }, [country, countries]
+  )
+
+  return (
+    <div>
+        find countries <input value={country} onChange={handleChange} />
+      <Notification countries={countries} />
+  </div>
+      )
+}
+
+export default App;
diff --git a/part2/countrydata/src/index.css b/part2/countrydata/src/index.css
new file mode 100644
index 0000000..07d0f25
--- /dev/null
+++ b/part2/countrydata/src/index.css
@@ -0,0 +1,7 @@
+li {
+  list-style-type:none;
+  margin-left: 0px;
+  font-size: 20px;
+  padding: 0px;
+  color: green;
+}
diff --git a/part2/countrydata/src/index.js b/part2/countrydata/src/index.js
new file mode 100644
index 0000000..e36818f
--- /dev/null
+++ b/part2/countrydata/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+    <App />
+)