diff --git a/parts/2/phoneBook/db.json b/parts/2/phoneBook/db.json index 0e2bb2a..98fcdaf 100644 --- a/parts/2/phoneBook/db.json +++ b/parts/2/phoneBook/db.json @@ -64,6 +64,11 @@ "id": "ccc", "name": "ccc", "number": "333" + }, + { + "id": "bbbbbb", + "name": "bbbbbb", + "number": "eeeeeeeeee" } ] } \ No newline at end of file diff --git a/parts/2/phoneBook/src/App.jsx b/parts/2/phoneBook/src/App.jsx index 2fa4a94..e14d9fd 100644 --- a/parts/2/phoneBook/src/App.jsx +++ b/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 (
@@ -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(""); }; diff --git a/parts/2/phoneBook/src/services/personService.js b/parts/2/phoneBook/src/services/personService.js new file mode 100644 index 0000000..9a5da35 --- /dev/null +++ b/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 };