From 5fe3b0920142db0f101114afbfbfd47c20d80b05 Mon Sep 17 00:00:00 2001 From: Thuan Bui Date: Sat, 18 Sep 2021 09:55:44 +0700 Subject: [PATCH] Completed 2.18 (Phonebook Step 10) --- part2/2.15-2.18/db.json | 38 ++++++++++++++-------- part2/2.15-2.18/src/App.js | 41 +++++++++++++++++------- part2/2.15-2.18/src/components/Person.js | 2 +- part2/2.15-2.18/src/services/Contact.js | 15 +++++---- 4 files changed, 62 insertions(+), 34 deletions(-) diff --git a/part2/2.15-2.18/db.json b/part2/2.15-2.18/db.json index cfdd249..8ab12b2 100644 --- a/part2/2.15-2.18/db.json +++ b/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 } ] } \ No newline at end of file diff --git a/part2/2.15-2.18/src/App.js b/part2/2.15-2.18/src/App.js index c6ca8cd..0e12b6b 100644 --- a/part2/2.15-2.18/src/App.js +++ b/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('') diff --git a/part2/2.15-2.18/src/components/Person.js b/part2/2.15-2.18/src/components/Person.js index 238f8ea..4e3c80c 100644 --- a/part2/2.15-2.18/src/components/Person.js +++ b/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) } diff --git a/part2/2.15-2.18/src/services/Contact.js b/part2/2.15-2.18/src/services/Contact.js index 02b41ab..9f67628 100644 --- a/part2/2.15-2.18/src/services/Contact.js +++ b/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 \ No newline at end of file