Completed 2.17 (phonebook step 9)

part2/2.15-2.18/db.json

@@ -15,25 +15,10 @@
       "number": "12-43-234345",
       "id": 3
     },
-    {
-      "name": "Mary Poppendieck",
-      "number": "39-23-6423122",
-      "id": 4
-    },
     {
       "name": "Thuan",
       "number": "0988289099",
       "id": 5
-    },
-    {
-      "name": "Thao",
-      "number": "0934023910",
-      "id": 6
-    },
-    {
-      "name": "Minh",
-      "number": "023124",
-      "id": 7
     }
   ]
 }

part2/2.15-2.18/src/App.js

@@ -64,6 +64,15 @@ const App = () => {
 
   const search = persons.filter(person => person.name.toLowerCase().includes(newSearch.toLowerCase()))
 
+  const deleteHandler = (id) => {
+    Contact
+    .deleteContact(id)
+    .then(response => {
+      console.log(`${id} deleted`)
+      setPersons(persons.filter(n => n.id !== id))
+    })
+  }
+
   return (
     <div>
       <h2>Phonebook</h2>
@@ -73,7 +82,7 @@ const App = () => {
       <PersonForm onSubmit={submitChange} name={newName} number={newNumber} handleNumberChange={handleNumberChange} handleNameChange={handleNameChange}/>
       
       <h2>Numbers</h2>
-      <Person data={search} />
+      <Person data={search} click={deleteHandler} />
       
     </div>
   )

part2/2.15-2.18/src/components/Person.js

@@ -1,9 +1,15 @@
 import React from 'react'
 
-const Person = ({data}) => {
+const Person = ({data,click}) => {
+    const clickHandler = (person) => {
+        const result = window.confirm("Do you want to continue?")
+        if (result) {
+            click(person.id)
+        }
+    }
     return (
         <ul>
-            {data.map(person => <li key={person.name}>{person.name}: {person.number}</li>)}
+            {data.map(person => <li key={person.name}><span>{person.name}: {person.number}</span><span><button onClick={() => clickHandler(person)}>Delete</button></span></li>)}
         </ul>
     )
 }

part2/2.15-2.18/src/services/Contact.js

@@ -14,6 +14,10 @@ const updateContact = newPerson => {
     return contact.then(response => response.data)
 }
 
+const deleteContact = id => {
+    const contact = axios.delete(`${baseUrl}/${id}`)
+    return contact.then(response => response.data)
+}
    
 /*
     const update = (id, newObject) => {
@@ -21,7 +25,7 @@ const updateContact = newPerson => {
     }*/
 
 const Contact = {
-    getContact, updateContact
+    getContact, updateContact, deleteContact
 }
 
 export default Contact