Upload 1.13

part2/phonebook/db.json

@@ -1,5 +1,5 @@
 {
-  "persons":[
+  "persons": [
     {
       "name": "Arto Hellas",
       "number": "040-123456",

part2/phonebook/src/App.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
+import personService from "./services/personService.js";
 import PersonForm from "./components/PersonForm";
 import Filter from "./components/Filter";
 import ShowPersons from "./components/ShowPersons";
@@ -11,9 +11,9 @@ const App = () => {
   const [showedPersons, setShowedPersons] = useState([]);
 
   useEffect(() => {
-    axios.get("http://localhost:3001/persons").then((response) => {
+    personService.getAll().then((initialPersons) => {
-      setPersons(response.data);
+      setPersons(initialPersons);
-      setShowedPersons(response.data);
+      setShowedPersons(initialPersons);
     });
   }, []);
 
@@ -23,9 +23,11 @@ const App = () => {
       alert(`${newPerson.name} is already added to phonebook`);
       return;
     }
-    setPersons(persons.concat(newPerson));
+    personService.create(newPerson).then((returnedPerson) => {
-    setShowedPersons(persons.concat(newPerson));
+      setPersons(persons.concat(returnedPerson));
+      setShowedPersons(persons.concat(returnedPerson));
       setNewPerson({ name: "", number: "" });
+    });
   };
 
   const handleChange = (event) => {

part2/phonebook/src/services/personService.js

@@ -0,0 +1,19 @@
+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);
+};
+
+const update = (id, newObject) => {
+  const request = axios.put(`${baseUrl}/${id}`, newObject);
+  return request.then((response) => response.data);
+};
+
+export default { getAll, create, update };