restructured folder

part2/2.12-2.14/src/App.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import Filter from './components/Filter'
+
+const App = () => {
+  
+  const [newSearch, setNewSerach] = useState('')
+  const [CountryList, setCountryList] = useState([])
+
+  const handleSearchChange  =(event) => {
+    setNewSerach(event.target.value)
+  }
+
+  useEffect(() => {
+    axios
+      .get('https://restcountries.eu/rest/v2/all')
+      .then(response => {
+      setCountryList(response.data)
+      console.log(CountryList)
+    })
+  }, [])
+
+ 
+  const filtered = CountryList.filter(country => country.name.toLowerCase().includes(newSearch.toLowerCase()))
+  console.log(newSearch.toLowerCase())
+  return (
+    <div>
+      <h2>Country</h2>
+      <Filter value={newSearch} onChange={handleSearchChange} />
+      
+      {
+        filtered.length > 10 ? 
+          'Too many matches, specific another filter' : 
+            filtered.map(item => <p key={item.alpha2Code}>{item.name}</p>)
+      }
+      
+    </div>
+  )
+}
+
+export default App

part2/2.6-2.11/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -15,7 +16,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "server": "json-server -p3001 --watch db.json"
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "json-server": "^0.16.3"
   }
 }

part2/2.6-2.11/src/App.js

@@ -1,19 +1,26 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
 import Filter from './components/Filter'
 import PersonForm from './components/PersonForm'
 import Person from './components/Person'
 
 const App = () => {
-  const [ persons, setPersons ] = useState([
+  const [ persons, setPersons ] = useState([]) 
-    { name: 'Arto Hellas', number: '040-123456' },
-    { name: 'Ada Lovelace', number: '39-44-5323523' },
-    { name: 'Dan Abramov', number: '12-43-234345' },
-    { name: 'Mary Poppendieck', number: '39-23-6423122' }
-  ]) 
   const [ newName, setNewName ] = useState('')
   const [ newNumber, setNewNumber ] = useState('')
   const [ newSearch, setNewSearch ] = useState('')
 
+  useEffect(() => {
+    axios
+      .get('http://localhost:3001/persons')
+      .then(response => {
+      console.log('promise fulfilled')
+      setPersons(response.data)
+    })
+  }, [])
+
+  //console.log(persons)
+
   const handleNameChange = (event) => {
     //console.log(event.target.value)
     setNewName(event.target.value)