diff --git a/part2/phonebook/db.json b/part2/phonebook/db.json index 0636619..9d4321f 100644 --- a/part2/phonebook/db.json +++ b/part2/phonebook/db.json @@ -1,22 +1,22 @@ { - "persons":[ - { - "name": "Arto Hellas", + "persons": [ + { + "name": "Arto Hellas", "number": "040-123456", "id": 1 }, - { - "name": "Ada Lovelace", + { + "name": "Ada Lovelace", "number": "39-44-5323523", "id": 2 }, - { - "name": "Dan Abramov", + { + "name": "Dan Abramov", "number": "12-43-234345", "id": 3 }, - { - "name": "Mary Poppendieck", + { + "name": "Mary Poppendieck", "number": "39-23-6423122", "id": 4 } diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js index bdf8d56..71aef48 100644 --- a/part2/phonebook/src/App.js +++ b/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) => { - setPersons(response.data); - setShowedPersons(response.data); + personService.getAll().then((initialPersons) => { + setPersons(initialPersons); + setShowedPersons(initialPersons); }); }, []); @@ -23,9 +23,11 @@ const App = () => { alert(`${newPerson.name} is already added to phonebook`); return; } - setPersons(persons.concat(newPerson)); - setShowedPersons(persons.concat(newPerson)); - setNewPerson({ name: "", number: "" }); + personService.create(newPerson).then((returnedPerson) => { + setPersons(persons.concat(returnedPerson)); + setShowedPersons(persons.concat(returnedPerson)); + setNewPerson({ name: "", number: "" }); + }); }; const handleChange = (event) => { diff --git a/part2/phonebook/src/services/personService.js b/part2/phonebook/src/services/personService.js new file mode 100644 index 0000000..53acc3e --- /dev/null +++ b/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 };