ex2.14 add option to delete selected contact. Input validation could be

added

3 files changed, 32 insertions, 19 deletions

diff --git a/part2/phonebook/db.json b/part2/phonebook/db.json
index f12c730..9e7b167 100644
--- a/part2/phonebook/db.json
+++ b/part2/phonebook/db.json
@@ -1,16 +1,6 @@
 {
   "persons": [
     {
-      "name": "Arto Hellas",
-      "number": "040-123456",
-      "id": 1
-    },
-    {
-      "name": "Ada Lovelace",
-      "number": "39-44-5323523",
-      "id": 2
-    },
-    {
       "name": "Dan Abramov",
       "number": "12-43-234345",
       "id": 3
diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
index bbf7fc2..1cc7210 100644
--- a/part2/phonebook/src/App.js
+++ b/part2/phonebook/src/App.js
@@ -1,21 +1,41 @@
-/* eslint no-use-before-define: 0 */ // --> OFF
+/* eslint-disable */ 
 import { useEffect, useState } from 'react'
 import personService from './services/persons'
 
 const ShowPerson = (props) => {
   const searchTerm = props.searchTerm
   const persons = props.persons
+  const setPersons = props.setPersons
+
+  const removePerson = (id) => {
+    return () => {
+      if (confirm(`Are you sure you want to delete this contact? `)) {
+          personService
+              .remove(id)
+              .then(response => console.log(response.data))
+            setPersons(personService.getAll())
+
+      }
+     }
+  }
+
   if (searchTerm === undefined) {
     return persons.map((person) => {
-      return (<li key={person.id}>{person.name} {person.number}</li>)
+      return (<li key={person.id}>{person.name} {person.number}
+        <button onClick={removePerson(person.id)} >delete</button></li>)
     })
   } else {
-    const searchedList = persons.filter((person) =>
-    { return person.name.includes(props.searchTerm)
-    });
+      if (persons === undefined) {
+        return (<p> Nothing found </p>)
+      }
+      const searchedList = persons.filter((person) =>
+        { return person.name.includes(props.searchTerm)
+      });
+
       console.log(searchedList)
       return searchedList.map( (searched) => {
-        return (<li key={searched.id}>{searched.name} {searched.number}</li>)
+        return (<li key={searched.id}>{searched.name} {searched.number}
+          <button onClick={removePerson(searched.id)} >delete</button></li>)
     })
   }
 }
@@ -52,7 +72,6 @@ const App = () => {
     } else {
       const newPerson = {
         name: newName,
-        id: persons.length + 1, // eslint-disable-next-line
         number: number
       }
       // store new person locally and on the local server
@@ -90,7 +109,7 @@ const App = () => {
       </form>
       <h2>Numbers</h2>
       <ShowPerson
-        searchTerm={searchTerm} persons={persons}
+        searchTerm={searchTerm} persons={persons} setPersons={setPersons}
       />
     </div>
   )
diff --git a/part2/phonebook/src/services/persons.js b/part2/phonebook/src/services/persons.js
index d65f4a3..1da7de4 100644
--- a/part2/phonebook/src/services/persons.js
+++ b/part2/phonebook/src/services/persons.js
@@ -13,4 +13,8 @@ const update = (id, changedPerson) => {
   return axios.put(`${baseUrl}/${id}`, changedPerson)
 }
 
-export default { getAll, create, update }
+const remove = (id) => {
+  return axios.delete(`${baseUrl}/${id}`)
+}
+
+export default { getAll, create, update, remove }