Upload 2.17

part2/phonebook/db.json

@@ -2,7 +2,7 @@
   "persons": [
     {
       "name": "Arto Hellas",
-      "number": "040-123456",
+      "number": "0402213599",
       "id": 1
     },
     {

part2/phonebook/src/App.js

@@ -1,14 +1,16 @@
 import { useState, useEffect } from "react";
-import personService from "./services/personService.js";
+import personService from "./services/personService";
 import PersonForm from "./components/PersonForm";
 import Filter from "./components/Filter";
 import ShowPersons from "./components/ShowPersons";
+import Message from "./components/Message";
 
 const App = () => {
   const [persons, setPersons] = useState([]);
   const [newPerson, setNewPerson] = useState({ name: "", number: "" });
   const [filter, setFilter] = useState("");
   const [showedPersons, setShowedPersons] = useState([]);
+  const [message, setMessage] = useState(null);
 
   useEffect(() => {
     personService.getAll().then((initialPersons) => {
@@ -17,39 +19,64 @@ const App = () => {
     });
   }, []);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setMessage(null);
+    }, 5000);
+  }, [message]);
+
   const addPerson = (event) => {
     event.preventDefault();
-    if (persons.find((person) => person.name === newPerson.name)) {
+    const personExists = persons.find(
+      (person) => person.name === newPerson.name
+    );
+    if (personExists) {
       if (
         window.confirm(
           `${newPerson.name} is already added to phonebook, replace the old number with a new one?`
         )
       ) {
-        const person = persons.find((person) => person.name === newPerson.name);
+        const updatedPerson = { ...personExists, number: newPerson.number };
-        const changedPerson = { ...person, number: newPerson.number };
         personService
-          .update(person.id, changedPerson)
+          .update(updatedPerson.id, updatedPerson)
           .then((returnedPerson) => {
             setPersons(
               persons.map((person) =>
-                person.id !== returnedPerson.id ? person : returnedPerson
+                person.id !== updatedPerson.id ? person : returnedPerson
               )
             );
             setShowedPersons(
-              persons.map((person) =>
+              showedPersons.map((person) =>
-                person.id !== returnedPerson.id ? person : returnedPerson
+                person.id !== updatedPerson.id ? person : returnedPerson
               )
             );
-            setNewPerson({ name: "", number: "" });
+            setMessage(`Updated ${returnedPerson.name}`);
+          })
+          .catch((error) => {
+            setMessage(
+              `Information of ${updatedPerson.name} has already been removed from server`
+            );
+            setPersons(
+              persons.filter((person) => person.id !== updatedPerson.id)
+            );
+            setShowedPersons(
+              showedPersons.filter((person) => person.id !== updatedPerson.id)
+            );
           });
       }
     } else {
-      personService.create(newPerson).then((returnedPerson) => {
+      personService
+        .create(newPerson)
+        .then((returnedPerson) => {
           setPersons(persons.concat(returnedPerson));
-        setShowedPersons(persons.concat(returnedPerson));
+          setShowedPersons(showedPersons.concat(returnedPerson));
-        setNewPerson({ name: "", number: "" });
+          setMessage(`Added ${returnedPerson.name}`);
+        })
+        .catch((error) => {
+          setMessage(error.response.data.error);
         });
     }
+    setNewPerson({ name: "", number: "" });
   };
 
   const deletePerson = (id, name) => {
@@ -78,6 +105,7 @@ const App = () => {
   return (
     <div>
       <h2>Phonebook</h2>
+      <Message message={message} />
       <Filter filter={filter} filterByName={filterByName} />
       <h2>Add a new number</h2>
       <PersonForm

part2/phonebook/src/components/Message.js

@@ -0,0 +1,11 @@
+const Message = ({ message }) => {
+  if (message === null) {
+    return null;
+  } else if (message.includes("Added") || message.includes("Updated")) {
+    return <div className="success-message">{message}</div>;
+  } else {
+    return <div className="error-message">{message}</div>;
+  }
+};
+
+export default Message;

part2/phonebook/src/components/PersonForm.js

@@ -10,7 +10,7 @@ const PersonForm = ({ addPerson, newPerson, handleChange }) => {
         <input name="number" value={newPerson.number} onChange={handleChange} />
       </div>
       <div>
-        <button type="submit">add</button>
+        <button type="submit">Add</button>
       </div>
     </form>
   );

part2/phonebook/src/index.css

@@ -0,0 +1,16 @@
+.success-message {
+    color: green;
+}
+
+.error-message {
+    color: red;
+}
+
+.success-message, .error-message {
+    background: gray;
+    font-size: 20px;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+}

part2/phonebook/src/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import "./index.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

part2/phonebook/src/services/personService.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 const baseUrl = "http://localhost:3001/persons";
+
 const getAll = () => {
   const request = axios.get(baseUrl);
   return request.then((response) => response.data);