Completed 2.18 (Phonebook Step 10)

part2/2.15-2.18/db.json

@@ -1,24 +1,34 @@
 {
   "persons": [
     {
-      "name": "Arto Hellas",
-      "number": "040-123456",
+      "name": "32iuy4322",
+      "number": "ekfwjlkfd",
       "id": 1
     },
     {
-      "name": "Ada Lovelace",
-      "number": "39-44-5323523",
-      "id": 2
-    },
-    {
-      "name": "Dan Abramov",
-      "number": "12-43-234345",
-      "id": 3
-    },
-    {
-      "name": "Thuan",
-      "number": "0988289099",
+      "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.18/src/App.js

@@ -19,7 +19,7 @@ const App = () => {
       })
   }, [])
 
-  //console.log(persons)
+  console.log(persons)
 
   const handleNameChange = (event) => {
     //console.log(event.target.value)
@@ -38,24 +38,41 @@ const App = () => {
   
   const submitChange = (event) => {
     event.preventDefault()
+  
+    // Check if newName already added to phonebook or not
+    const check = persons.filter(person => person.name === newName )
+    const id = check.length === 0 ?  persons[persons.length - 1].id + 1 : check[0].id
+
     const newPerson = {
       name: newName,
       number: newNumber,
-      id: persons.length + 1
+      id: id
     }
 
-    // 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`)
-
     if (check.length === 0) {
-      Contact
-        .updateContact(newPerson)
-        .then(response => {
-            console.log(response)
-        })
+      if ((newPerson.name === "") || (newPerson.number === "")) {
+        alert(`Name or number cannot be empty`)
+      }
+      else {
+        Contact
+          .addContact(newPerson)
+          .then(response => {
+              console.log(response)
+          })
+        setPersons(persons.concat(newPerson))
+      }
+    }
+    else {
+      const result = window.confirm(`${newName} is already added to phonebook. Replace with new Number?`)
+      console.log(id)
+      if (result) {
+        Contact
+          .updateContact(id, newPerson)
+          .then(response => {
+            setPersons(persons.map(person => person.id !== id ? person : response))
+          })
+      }
     }
-    
 
     setNewNumber('')
     setNewName('')

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

@@ -2,7 +2,7 @@ import React from 'react'
 
 const Person = ({data,click}) => {
     const clickHandler = (person) => {
-        const result = window.confirm("Do you want to continue?")
+        const result = window.confirm(`Do you want to delete ${person.name}?`)
         if (result) {
             click(person.id)
         }

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

@@ -9,7 +9,7 @@ const getContact = () => {
 }
 
  
-const updateContact = newPerson => {
+const addContact = newPerson => {
     const contact = axios.post(baseUrl, newPerson)
     return contact.then(response => response.data)
 }
@@ -18,14 +18,15 @@ const deleteContact = id => {
     const contact = axios.delete(`${baseUrl}/${id}`)
     return contact.then(response => response.data)
 }
-   
-/*
-    const update = (id, newObject) => {
-        return axios.put(`${baseUrl}/${id}`, newObject)
-    }*/
+
+const updateContact = (id, newPerson) => {
+    const contact = axios.put(`${baseUrl}/${id}`, newPerson)
+    return contact.then(response => response.data)
+}
+
 
 const Contact = {
-    getContact, updateContact, deleteContact
+    getContact, addContact, deleteContact, updateContact
 }
 
 export default Contact