Completed 2.19

part2/2.15-2.18/db.json

@@ -1,34 +0,0 @@
-{
-  "persons": [
-    {
-      "name": "32iuy4322",
-      "number": "ekfwjlkfd",
-      "id": 1
-    },
-    {
-      "name": "THuan",
-      "number": "22",
-      "id": 5
-    },
-    {
-      "name": "Th",
-      "number": "32049324324",
-      "id": 6
-    },
-    {
-      "name": "TTTTT",
-      "number": "32432432432",
-      "id": 7
-    },
-    {
-      "name": "TTTTTT",
-      "number": "111111",
-      "id": 8
-    },
-    {
-      "name": "Huy",
-      "number": "987654321",
-      "id": 9
-    }
-  ]
-}

part2/2.15-2.20/db.json

@@ -0,0 +1,89 @@
+{
+  "persons": [
+    {
+      "name": "THuan",
+      "number": "22",
+      "id": 5
+    },
+    {
+      "name": "Th",
+      "number": "32049324324",
+      "id": 6
+    },
+    {
+      "name": "TTTTT",
+      "number": "32432432432",
+      "id": 7
+    },
+    {
+      "name": "TTTTTT",
+      "number": "111111",
+      "id": 8
+    },
+    {
+      "name": "Huy",
+      "number": "987654321",
+      "id": 9
+    },
+    {
+      "name": "Thao",
+      "number": "0988289099",
+      "id": 10
+    },
+    {
+      "name": "Minh",
+      "number": "092",
+      "id": 11
+    },
+    {
+      "name": "Khoa",
+      "number": "0923121",
+      "id": 12
+    },
+    {
+      "name": "Tuan",
+      "number": "09213214",
+      "id": 13
+    },
+    {
+      "name": "Phung",
+      "number": "0394325325",
+      "id": 14
+    },
+    {
+      "name": "Lieu",
+      "number": "09343432",
+      "id": 15
+    },
+    {
+      "name": "ttttraasf",
+      "number": "093432453253",
+      "id": 16
+    },
+    {
+      "name": "utiot",
+      "number": "0324324",
+      "id": 17
+    },
+    {
+      "name": "tran khoa",
+      "number": "093432432",
+      "id": 18
+    },
+    {
+      "name": "Tina",
+      "number": "034324",
+      "id": 19
+    },
+    {
+      "name": "Huy Tran",
+      "number": "0392432432",
+      "id": 20
+    },
+    {
+      "name": "Tuan34",
+      "number": "324324",
+      "id": 21
+    }
+  ]
+}

part2/2.15-2.20/src/App.js

@@ -1,15 +1,20 @@
 import React, { useState, useEffect } from 'react'
 //import axios from 'axios'
+import './index.css'
 import Filter from './components/Filter'
 import PersonForm from './components/PersonForm'
 import Person from './components/Person'
 import Contact from './services/Contact'
+import Notification from './components/Notification'
 
 const App = () => {
   const [ persons, setPersons ] = useState([]) 
   const [ newName, setNewName ] = useState('')
   const [ newNumber, setNewNumber ] = useState('')
   const [ newSearch, setNewSearch ] = useState('')
+  const [ errorMessage, setErrorMessage] = useState(null)
+  const [ errorType, setErrorType ] = useState(null)
+
 
   useEffect(() => {
       Contact
@@ -19,7 +24,6 @@ const App = () => {
       })
   }, [])
 
-  console.log(persons)
 
   const handleNameChange = (event) => {
     //console.log(event.target.value)
@@ -57,7 +61,12 @@ const App = () => {
         Contact
           .addContact(newPerson)
           .then(response => {
-              console.log(response)
+              setErrorMessage(`Added ${response.name}`)
+              setErrorType ('notification')
+              setTimeout(() => {
+                setErrorMessage(null)
+                setErrorType (null)
+              }, 5000)
           })
         setPersons(persons.concat(newPerson))
       }
@@ -93,6 +102,7 @@ const App = () => {
   return (
     <div>
       <h2>Phonebook</h2>
+      <Notification message={errorMessage} type={errorType} />
       <Filter value={newSearch} onChange={handleSearchChange} />
       
       <h2>Add new contact</h2>

part2/2.15-2.20/src/components/Notification.js

@@ -0,0 +1,13 @@
+const Notification = ({ message, type }) => {
+    if (message === null) {
+      return null
+    }
+
+    return (
+      <div className={type}>
+         {message}
+      </div>
+    )
+  }
+
+  export default Notification

part2/2.15-2.20/src/index.css

@@ -11,3 +11,25 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.error {
+  color: red;
+  background: #FAFAFA;
+  font-size: 20px;
+  border-style: solid;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 10px;
+  max-width: 400px;
+}
+
+.notification {
+  color: green;
+  background: #FAFAFA;
+  font-size: 20px;
+  border-style: solid;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 10px;
+  max-width: 400px;
+}