Completed 2.12

part2/2.12-2.14/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
 import Filter from './components/Filter'
+import Country from './components/Country'
 
 const App = () => {
   
@@ -16,7 +17,6 @@ const App = () => {
       .get('https://restcountries.eu/rest/v2/all')
       .then(response => {
       setCountryList(response.data)
-      console.log(CountryList)
     })
   }, [])
 
@@ -27,13 +27,7 @@ const App = () => {
     <div>
       <h2>Country</h2>
       <Filter value={newSearch} onChange={handleSearchChange} />
-      
+      <Country data={filtered} />
-      {
-        filtered.length > 10 ? 
-          'Too many matches, specific another filter' : 
-            filtered.map(item => <p key={item.alpha2Code}>{item.name}</p>)
-      }
-
       
     </div>
   )

part2/2.12-2.14/src/OldApp.js

@@ -1,73 +0,0 @@
-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 [ 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)
-  }
-
-  const handleNumberChange = (event) => {
-    //console.log(event.target.value)
-    setNewNumber(event.target.value)
-  }
-
-  const handleSearchChange = (event) => {
-    setNewSearch(event.target.value)
-   
-  }
-  
-  const submitChange = (event) => {
-    event.preventDefault()
-    const newPerson = {
-      name: newName,
-      number: newNumber,
-      id: persons.length + 1
-    }
-
-    // Check if newName already added to phonebook or not
-    const check = persons.filter(person => person.name === newName )
-    check.length === 0 ? setPersons(persons.concat(newPerson)) : alert(`${newName} is already added to phonebook`)
-
-    setNewNumber('')
-    setNewName('')
-    setNewSearch('')
-  }
-
-  const search = persons.filter(person => person.name.toLowerCase().includes(newSearch.toLowerCase()))
-
-  return (
-    <div>
-      <h2>Phonebook</h2>
-      <Filter value={newSearch} onChange={handleSearchChange} />
-      
-      <h2>Add new contact</h2>
-      <PersonForm onSubmit={submitChange} name={newName} number={newNumber} handleNumberChange={handleNumberChange} handleNameChange={handleNameChange}/>
-      
-      <h2>Numbers</h2>
-      <Person data={search} />
-      
-    </div>
-  )
-}
-
-export default App

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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const Country = (props) => {
+    const filtered = props.data
+    return (
+        <div>
+            {filtered.length > 10 ? 
+          'Too many matches, specific another filter' : filtered.length !== 1 ?
+            filtered.map(item => <CountryLongList key={item.alpha2Code} data={item}/>): 
+            filtered.map(item => <CountryDetail key={item.alpha2Code} data={item}/>)}
+        </div>
+        
+    )
+}
+const CountryLongList = ({data}) => {
+    return (
+        <div>
+            <p>{data.name}</p>
+        </div>
+    )
+}
+const CountryDetail = ({data}) => {
+    console.log(data)
+    return (
+        <div>
+            <h2>{data.name}</h2>
+            <p>
+                Capital: {data.capital}
+                <br />
+                Population: {data.population}
+            </p>
+            <h3>Languagues</h3>
+            <ul>
+            {data.languages.map(item =><li key={item.name}>{item.name}</li>)}
+            </ul>
+            <img src={data.flag} alt={data.name} width="200" />
+
+        </div>
+    )
+}
+
+export default Country

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

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Person = ({data}) => {
-    return (
-        <ul>
-            {data.map(person => <li key={person.name}>{person.name}: {person.number}</li>)}
-        </ul>
-    )
-}
-
-export default Person

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

@@ -1,18 +0,0 @@
-import React from 'react'
-
-const PersonForm = ({onSubmit, name, number, handleNumberChange, handleNameChange }) => {
-    return (
-        <form onSubmit={onSubmit}>
-        <div>
-          name: <input value={name} onChange={handleNameChange}/>
-        </div>
-        <div>number: <input type="tel" value={number} onChange={handleNumberChange}/>
-        </div>
-        <div>
-          <button type="submit">add</button>
-        </div>
-      </form>
-    )
-}
-
-export default PersonForm