restructured folder

part2/2.6-2.11/src/App.js

@@ -0,0 +1,73 @@
+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.6-2.11/src/components/Filter.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Filter = ({value, onChange}) => {
+    return (
+        <div>Search <input value={value} onChange={onChange}/>
+        </div>
+    )
+}
+
+export default Filter

part2/2.6-2.11/src/components/Person.js

@@ -0,0 +1,11 @@
+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.6-2.11/src/components/PersonForm.js

@@ -0,0 +1,18 @@
+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

part2/2.6-2.11/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/2.6-2.11/src/index.js

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