completed 2.14

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 };