ex2.13 extract communication with server into module persons.js

2 files changed, 21 insertions, 8 deletions

diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
index b8de8a6..bbf7fc2 100644
--- a/part2/phonebook/src/App.js
+++ b/part2/phonebook/src/App.js
@@ -1,6 +1,6 @@
 /* eslint no-use-before-define: 0 */ // --> OFF
 import { useEffect, useState } from 'react'
-import axios from 'axios'
+import personService from './services/persons'
 
 const ShowPerson = (props) => {
   const searchTerm = props.searchTerm
@@ -35,15 +35,12 @@ const App = () => {
   const [newName, setNewName] = useState('')
   const [number, setPhoneNumber] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
-  const baseURL = 'http://localhost:3001/persons'
 
   useEffect(() => {
-    axios
-      .get(baseURL)
+    personService
+      .getAll()
       .then(response => {
-        console.log('promise fulfilled')
         setPersons(response.data)
-        console.log(persons)
       })
   })
 
@@ -59,8 +56,8 @@ const App = () => {
         number: number
       }
       // store new person locally and on the local server
-      axios
-        .post(baseURL, newPerson)
+      personService
+        .create(newPerson)
         .then(response =>
           console.log(response))
       setPersons(persons.concat(newPerson))
diff --git a/part2/phonebook/src/services/persons.js b/part2/phonebook/src/services/persons.js
new file mode 100644
index 0000000..d65f4a3
--- /dev/null
+++ b/part2/phonebook/src/services/persons.js
@@ -0,0 +1,16 @@
+import axios from 'axios'
+const baseUrl = 'http://localhost:3001/persons'
+
+const getAll = () => {
+  return axios.get(baseUrl)
+}
+
+const create = (person) => {
+  return axios.post(baseUrl, person)
+}
+
+const update = (id, changedPerson) => {
+  return axios.put(`${baseUrl}/${id}`, changedPerson)
+}
+
+export default { getAll, create, update }