completed 2.14

parts/2/phoneBook/db.json

@@ -1,74 +1,9 @@
 {
   "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"
-    },
-    {
-      "name": "Mary Poppendieck",
-      "number": "39-23-6423122",
-      "id": "4"
-    },
-    {
-      "id": "aaa",
-      "name": "aaa",
-      "number": "123"
-    },
-    {
-      "id": "bbb",
-      "name": "bbb",
-      "number": "333"
-    },
-    {
-      "id": "",
-      "name": "",
-      "number": ""
-    },
-    {
-      "id": "",
-      "name": "",
-      "number": ""
-    },
-    {
-      "id": "",
-      "name": "",
-      "number": ""
-    },
-    {
-      "id": "",
-      "name": "",
-      "number": ""
-    },
-    {
-      "id": "",
-      "name": "",
-      "number": ""
-    },
-    {
-      "id": "",
-      "name": "",
-      "number": ""
-    },
-    {
-      "id": "ccc",
-      "name": "ccc",
-      "number": "333"
-    },
-    {
-      "id": "bbbbbb",
-      "name": "bbbbbb",
-      "number": "eeeeeeeeee"
     }
   ]
 }

parts/2/phoneBook/src/App.jsx

@@ -85,6 +85,24 @@ const App = () => {
     setSearchString(event.target.value);
   };
 
+  const handlePersonDeletionFactory = ({ person }) => {
+    return (event) => {
+      personService
+        .deletePerson(person.id)
+        .then(() => {
+          setTimeout(() => {
+            console.log("postimeout");
+          }, 3000);
+        })
+        .then(() => {
+          return personService.getPersons();
+        })
+        .then((response) => {
+          setPersons(response.data);
+        });
+    };
+  };
+
   return (
     <div>
       <h2>Phonebook</h2>
@@ -102,6 +120,7 @@ const App = () => {
         persons={persons.filter((person) =>
           person.name.toUpperCase().includes(searchString.toUpperCase())
         )}
+        deletionHandlerFactory={handlePersonDeletionFactory}
       />
     </div>
   );

parts/2/phoneBook/src/components/PersonList.jsx

@@ -1,4 +1,4 @@
-const PersonList = ({ persons }) => {
+const PersonList = ({ persons, deletionHandlerFactory }) => {
   return (
     <>
       <ul>
@@ -6,6 +6,7 @@ const PersonList = ({ persons }) => {
           return (
             <li key={person.name}>
               {person.name} --- {person.number}
+              <button onClick={deletionHandlerFactory({person})}>delete</button>
             </li>
           );
         })}

parts/2/phoneBook/src/services/personService.js

@@ -6,5 +6,8 @@ const getPersons = () => {
 const addPerson = (personData) => {
   return axios.post("http://localhost:3001/persons", personData);
 };
+const deletePerson = (personId) => {
+  return axios.delete(`http://localhost:3001/persons/${personId}`);
+};
 
-export default { getPersons, addPerson };
+export default { getPersons, addPerson, deletePerson };