Upload 2.14

part2/phonebook/src/App.js

@@ -30,6 +30,16 @@ const App = () => {
     });
   };
 
+  const deletePerson = (id, name) => {
+    if (window.confirm(`Delete ${name}?`)) {
+      personService.deletePerson(id).then((response) => {
+        const newPersons = persons.filter((person) => person.id !== id);
+        setPersons(newPersons);
+        setShowedPersons(newPersons);
+      });
+    }
+  };
+
   const handleChange = (event) => {
     const { name, value } = event.target;
     setNewPerson({ ...newPerson, [name]: value });
@@ -47,13 +57,14 @@ const App = () => {
     <div>
       <h2>Phonebook</h2>
       <Filter filter={filter} filterByName={filterByName} />
+      <h2>Add a new number</h2>
       <PersonForm
         addPerson={addPerson}
         newPerson={newPerson}
         handleChange={handleChange}
       />
       <h2>Numbers</h2>
-      <ShowPersons showedPersons={showedPersons} />
+      <ShowPersons showedPersons={showedPersons} deletePerson={deletePerson} />
     </div>
   );
 };

part2/phonebook/src/components/Person.js

@@ -1,7 +1,10 @@
-const Person = ({ person }) => {
+const Person = ({ person, deletePerson }) => {
   return (
-    <div>
+    <div key={person.id}>
-      {person.name} {person.number}
+      {person.name} {person.number}{" "}
+      <button onClick={() => deletePerson(person.id, person.name)}>
+        Delete
+      </button>
     </div>
   );
 };

part2/phonebook/src/components/ShowPersons.js

@@ -1,10 +1,10 @@
 import Person from "./Person";
 
-const ShowPersons = ({ showedPersons }) => {
+const ShowPersons = ({ showedPersons, deletePerson }) => {
   return (
     <div>
       {showedPersons.map((person) => (
-        <Person key={person.name} person={person} />
+        <Person key={person.name} person={person} deletePerson={deletePerson} />
       ))}
     </div>
   );

part2/phonebook/src/services/personService.js

@@ -1,11 +1,9 @@
 import axios from "axios";
 const baseUrl = "http://localhost:3001/persons";
-
 const getAll = () => {
   const request = axios.get(baseUrl);
   return request.then((response) => response.data);
 };
-
 const create = (newObject) => {
   const request = axios.post(baseUrl, newObject);
   return request.then((response) => response.data);
@@ -16,4 +14,9 @@ const update = (id, newObject) => {
   return request.then((response) => response.data);
 };
 
-export default { getAll, create, update };
+const deletePerson = (id) => {
+  const request = axios.delete(`${baseUrl}/${id}`);
+  return request.then((response) => response);
+};
+
+export default { getAll, create, update, deletePerson };