extract service methods

parts/2/phoneBook/db.json

@@ -29,6 +29,41 @@
       "id": "bbb",
       "name": "bbb",
       "number": "333"
+    },
+    {
+      "id": "",
+      "name": "",
+      "number": ""
+    },
+    {
+      "id": "",
+      "name": "",
+      "number": ""
+    },
+    {
+      "id": "",
+      "name": "",
+      "number": ""
+    },
+    {
+      "id": "",
+      "name": "",
+      "number": ""
+    },
+    {
+      "id": "",
+      "name": "",
+      "number": ""
+    },
+    {
+      "id": "",
+      "name": "",
+      "number": ""
+    },
+    {
+      "id": "ccc",
+      "name": "ccc",
+      "number": "333"
     }
   ]
 }

parts/2/phoneBook/src/App.jsx

@@ -41,8 +41,19 @@ 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(() => {
-    axios.get("http://localhost:3001/persons").then((response) => {
+    getPersons().then((response) => {
       console.log(response.data);
       setPersons(response.data);
     });
@@ -59,15 +70,9 @@ const App = () => {
       return;
     }
 
-    axios
+    addPerson().then((response) => {
-      .post("http://localhost:3001/persons", {
+      setPersons(persons.concat(response.data));
-        name: newName,
+    });
-        number: newNumber,
-        id: newName,
-      })
-      .then((response) => {
-        setPersons(persons.concat(response.data));
-      });
     setNewName("");
     setNewNumber("");
   };