extract into service

parts/2/phoneBook/db.json

@@ -64,6 +64,11 @@
       "id": "ccc",
       "name": "ccc",
       "number": "333"
+    },
+    {
+      "id": "bbbbbb",
+      "name": "bbbbbb",
+      "number": "eeeeeeeeee"
     }
   ]
 }

parts/2/phoneBook/src/App.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
 
 import PersonList from "./components/PersonList";
 
+import personService from "./services/personService";
+
 const SearchArea = ({ onChangeHandler }) => {
   return (
     <div>
@@ -41,19 +42,8 @@ const App = () => {
   const [newName, setNewName] = useState("");
   const [newNumber, setNewNumber] = useState("");
 
-  const getPersons = () => {
-    return axios.get("http://localhost:3001/persons");
-  };
-  const addPerson = () => {
-    return axios.post("http://localhost:3001/persons", {
-      name: newName,
-      number: newNumber,
-      id: newName,
-    });
-  };
-
   useEffect(() => {
-    getPersons().then((response) => {
+    personService.getPersons().then((response) => {
       console.log(response.data);
       setPersons(response.data);
     });
@@ -70,9 +60,15 @@ const App = () => {
       return;
     }
 
-    addPerson().then((response) => {
-      setPersons(persons.concat(response.data));
-    });
+    personService
+      .addPerson({
+        name: newName,
+        number: newNumber,
+        id: newName,
+      })
+      .then((response) => {
+        setPersons(persons.concat(response.data));
+      });
     setNewName("");
     setNewNumber("");
   };

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

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const getPersons = () => {
+  return axios.get("http://localhost:3001/persons");
+};
+const addPerson = (personData) => {
+  return axios.post("http://localhost:3001/persons", personData);
+};
+
+export default { getPersons, addPerson };