All api calls are now piped through utils script to easier control base url.

src/components/Calendar.vue

@@ -34,6 +34,8 @@ import DayElement from '@/components/calendar/DayElement'
 import MonthSummary from '@/components/calendar/MonthSummary'
 import moment from 'moment'
 
+import { adventureList } from '@/utils/leifsbackend-api'
+
 export default {
   components: { DayElement, MonthSummary },
   props: {
@@ -95,8 +97,7 @@ export default {
         .then(events => this.populateCalendar(events))
     },
     getEvents() {
-      return fetch('http://localhost:5000/api/adventure')
+      return adventureList()
-        .then(resp => resp.json())
         .then(events => {
           console.log('events', events)
           this.eventsFound = events;

src/components/EditEvent.vue

@@ -54,6 +54,8 @@ import VueGridLayout from 'vue-grid-layout';
 import ClickOutside from 'vue-click-outside'
 import EventForm from './EventForm'
 
+import { adventureById, createAdventure } from '@/utils/leifsbackend-api'
+
 export default {
   components: { 
     GridLayout: VueGridLayout.GridLayout,
@@ -147,12 +149,11 @@ export default {
   },
   methods: {
     fetchById(id) {
-      fetch('http://localhost:5000/api/adventure/' + id)
+      adventureById(id)
-      .then(resp => resp.json())
+        .then(data => {
-      .then(data => {
+          this.formData = data;
-        this.formData = data;
+          console.log('data', data)
-        console.log('data', data)
+        })
-      })
     },
 
     processForm: function() {
@@ -166,19 +167,7 @@ export default {
         mapboxData: this.selectedPlace
       }
 
-      fetch('http://localhost:5000/api/adventure', {
+      createAdventure(data)
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(data)
-      })
-      // axios.post('localhost:5000/api/adventure', {
-      //   body: JSON.stringify(data)
-      // })
-      .then((resp) => console.log('response from posting to server:', resp))
-      .catch((error) => console.error('error from post request:', error))
     },
     processFile(event) {
       this.files = event.target.files;

src/components/EventForm.vue

@@ -60,6 +60,8 @@ import FormElementLocation from './form/FormElementLocation'
 import FormElementUpload from './form/FormElementUpload'
 import { dateToDayMonthYearDashed } from '@/utils/dates'
 
+import { createAdventure } from '@/utils/leifsbackend-api'
+
 export default {
   components: {
     FormElementLocation,
@@ -118,20 +120,7 @@ export default {
       console.log('Processing form to post to backend with data', data)
 
 
-      fetch('http://localhost:5000/api/adventure', {
+      createAdventure(data)
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(data)
-      })
-
-      // axios.post('localhost:5000/api/adventure', {
-      //   body: JSON.stringify(data)
-      // })
-      .then((resp) => console.log('response from posting to server:', resp))
-      .catch((error) => console.error('error from post request:', error))
     },
   }
 }

src/components/EventPage.vue

@@ -39,6 +39,8 @@ import Gallery from '@/components/Gallery'
 import MapView from '@/components/MapView'
 import moment from 'moment'
 
+import { locationByName } from '@/utils/leifsbackend-api'
+
 export default {
   components: {
     Gallery, MapView
@@ -74,12 +76,8 @@ export default {
     const id = this.$route.params.id;
     console.log('id found', id)
     if (id) {
-      fetch('http://localhost:5000/api/adventure/' + id)
+      adventureById(id)
-      .then(resp => {
+        .then(data => this.eventData = data)
-        console.log('resp', resp)
-        resp.json()
-      })
-      .then(data => this.eventData = data)
     }
   },
   methods: {
@@ -93,16 +91,12 @@ export default {
         return
       }
 
-      var url = new URL('http://localhost:5000/api/location')
+      locationByName(this.eventData.locationName)
-      url.search = new URLSearchParams({ name: this.eventData.locationName })
+        .then(data => {
-
+          this.mapboxData = data.mapboxData;
-      fetch(url)
+          this.showMap = true;
-      .then(resp => resp.json())
+        })
-      .then(data => {
+        .catch((err) => console.log('error fetching locations by name from server. Error:', err))
-        this.mapboxData = data.mapboxData;
-        this.showMap = true;
-      })
-      .catch((err) => console.log('error fetching locations by name from server. Error:', err))
     }
   }
 }

src/components/Gallery.vue

@@ -21,6 +21,9 @@ import GalleryText from '@/components/GalleryText'
 import { mapGetters } from 'vuex'
 import store from '@/store'
 
+import { imagesByAdventureId } from '@/utils/leifsbackend-api'
+
+
 export default {
   name: 'Gallery-Item',
   components: { GalleryImage, GalleryText },
@@ -49,8 +52,7 @@ export default {
     }
   },
   created() {
-    fetch('http://localhost:5000/api/images/' + this.id)
+    imagesByAdventureId(this.id)
-      .then(resp => resp.json())
       .then(images => {
         console.log('events', images)
         images.forEach(image => {

src/components/Home.vue

@@ -26,6 +26,8 @@ import EventPage from '@/components/EventPage'
 import Calendar from '@/components/Calendar'
 import Footer from '@/components/Footer'
 
+import { adventureList } from '@/utils/leifsbackend-api'
+
 export default {
   components: { Header, EventPage, Calendar, Footer },
   data() {
@@ -41,13 +43,12 @@ export default {
  
   methods: {
     fetchEvents() {
-      fetch('http://localhost:5000/api/adventure')
+      adventureList()
-      .then(resp => resp.json())
+        .then((data) => {
-      .then((data) => {
+          console.log('response from fetch events', data)
-        console.log('response from fetch events', data)
+          this.events = data;
-        this.events = data;
+        })
-      })
+        .catch((error) => console.log('unable to fetch events from api; error message:', error))
-      .catch((error) => console.log('unable to fetch events from api; error message:', error))
     },
     navigate: function() {
       console.log(this.$router)

src/components/form/FormElementUpload.vue

@@ -17,6 +17,8 @@
 import axios from 'axios'
 import store from '@/store'
 
+import { createImages } from '@/utils/leifsbackend-api'
+
 export default {
   data() {
     return {
@@ -43,9 +45,11 @@ export default {
       }
 
       console.log('formdata', formData)
-      axios.post('http://localhost:5000/api/upload/' + 1, formData, { onUploadProgress: progressEvent => console.log(100 * (progressEvent.loaded / progressEvent.totalSize))} )
+      createImages(formData, 1, this.progressEvent) // passes formData (fileList of images) and adventureId
-      .then((resp) => console.log('response from posting to server:', resp))
+    },
-      .catch((error) => console.error('error from post request:', error))
+
+    progressEvent(event) {
+      console.log(100 * (event.loaded / event.totalSize))
     },
 
     processFiles(event) {

src/utils/leifsbackend-api.js

@@ -0,0 +1,68 @@
+import axios from 'axios'
+
+const BASE_URL = 'http://localhost:5000/api/'
+
+function adventureList() {
+  const url = BASE_URL + 'adventure';
+  
+  return fetch(url)
+    .then(resp => resp.json())
+    .catch(err => console.log('unable to fetch adventure.'))
+}
+
+function adventureById(id) {
+  const url = BASE_URL + 'adventure/' + id;
+  
+  return fetch(url)
+    .then(resp => resp.json())
+    .catch(err => console.log('unable to fetch adventure.'))
+}
+
+function createAdventure(data) {
+  const url = BASE_URL + 'adventure';
+  const jsonBody = JSON.stringify(data);
+  const headers = { 
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  };
+
+  return fetch(url, { method: 'POST', headers: headers, body: jsonBody })
+    .then((resp) => console.log('response from posting to server:', resp))
+    .catch((error) => console.error('error from post request:', error))
+}
+
+
+function locationByName(locationName) {
+  let url = new URL(BASE_URL + 'location')
+  url.search = new URLSearchParams({ name: locationName })
+
+  return fetch(url)
+    .then(resp => resp.json())
+    .catch(err => console.log('unable to fetch location.'))
+}
+
+function imagesByAdventureId(adventureId) {
+  const url = BASE_URL + 'images/' + adventureId;
+
+  return fetch(url)
+    .then(resp => resp.json())
+    .catch(err => console.log('unable to fetch images.'))
+}
+
+function createImages(FileFormData, adventureId, progressEvent=undefined) {
+  const url = BASE_URL + 'upload/' + adventureId;
+
+  axios.post(url, FileFormData, { onUploadProgress: progressEvent } )
+    .then((resp) => console.log('response from posting to server:', resp))
+    .catch((error) => console.error('error from post request:', error))
+}
+
+
+export { 
+  adventureList,
+  adventureById,
+  createAdventure,
+  locationByName,
+  imagesByAdventureId,
+  createImages
+}