Globalized axios config.

.env

@@ -0,0 +1,2 @@
+NODE_ENV=development
+VUE_APP_API_BASE_URL=http://localhost:9090

src/App.vue

@@ -31,7 +31,6 @@
 import Vue from 'vue'
 import Login from "@/views/Login"
 import router from './router'
-import axios from 'axios'
 import LoadingSpinner from "@/components/LoadingSpinner";
 
 export default Vue.extend({
@@ -62,7 +61,7 @@ export default Vue.extend({
           this.loggedin = state;
           if(state) {
             router.push("/calendar")
-            axios.get('http://localhost:9090/profile', {
+            this.$axios.get('/profile', {
               headers: {
                 'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
               }
@@ -86,7 +85,7 @@ export default Vue.extend({
           return;
       }
       try{
-         const response = await axios.get('http://localhost:9090/profile',{
+         const response = await this.$axios.get('/profile',{
              headers : {
                 'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
              }

src/components/AppointmentModal.vue

@@ -70,8 +70,6 @@
 import DatetimePicker from '@/components/DatetimePicker'
 import Typeahead from '@/components/Typeahead';
 import dayjs from 'dayjs'
-import axios from 'axios';
-//import axios from 'axios';
 
 export default{
     components: {
@@ -100,7 +98,7 @@ export default{
             this.showModal = true;
         },
         saveClicked:  function(){
-            axios.post('http://localhost:9090/appointments', {
+            this.$axios.post('/appointments', {
                 start: dayjs(this.start, 'YYYY-MM-DDTHH:mm').toISOString(), 
                 end: dayjs(this.end, 'YYYY-MM-DDTHH:mm').toISOString(), 
                 online: this.online,
@@ -134,7 +132,7 @@ export default{
             this.patient = entry.patient;
         },
         updatePatientSuggestions: function(searchTerm){
-            axios.get('http://localhost:9090/patients', {
+            this.$axios.get('/patients', {
             params: {
                 name: searchTerm
             },

src/components/LoginForm.vue

@@ -65,7 +65,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import { StorageManagement, isEmail } from "@sebgroup/frontend-tools";
 
 export default  {
@@ -91,7 +90,7 @@ export default  {
                 }
                 this.emailValid = true
                 this.loginError = false
-                axios.post('http://localhost:9090/login', {
+                this.$axios.post('/login', {
                     email: this.email,
                     password: this.password
                   })
@@ -112,7 +111,7 @@ export default  {
                       }
                       this.loginError = true
                   });
-            }
+        }
     }
 }
 </script>

src/main.js

@@ -2,7 +2,14 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import '@/assets/styles/index.css'
+import axios from "axios";
 
+const axiosConfig = {
+  baseUrl: process.env.VUE_APP_API_BASE_URL,
+  timeout: 30000
+}
+
+Vue.prototype.$axios = axios.create(axiosConfig)
 Vue.config.productionTip = false
 Vue.config.devtools = true
 Vue.config.performance = true

src/views/Calendar.vue

@@ -32,7 +32,6 @@ import AppointmentModal from '@/components/AppointmentModal'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import timeGridPlugin from "@fullcalendar/timegrid"
 import interactionPlugin from '@fullcalendar/interaction'
-import axios from 'axios';
 import { mixin as clickaway } from 'vue-clickaway';
 import Popper from "popper.js";
 
@@ -86,7 +85,7 @@ export default {
           this.calendarElementClickedLast = false
         },
         deleteAppointment: function(){
-            axios.post('http://localhost:9090/appointments/delete',this.selectedEvent.extendedProps.appObj,{
+            this.$axios.post('/delete',this.selectedEvent.extendedProps.appObj,{
                 headers: {
                     'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
                 },
@@ -114,7 +113,7 @@ export default {
             console.log(info)
         },
         getEvents: function(info, successCallback, failureCallback){
-            axios.get('http://localhost:9090/appointments', {
+            this.$axios.get('/appointments', {
                 params: {
                     start: info.startStr,
                     end: info.endStr
@@ -152,7 +151,7 @@ export default {
              });
         },
         getDisabled: function(info, successCallback, failureCallback){
-            axios.get('http://localhost:9090/disabled', {
+            this.$axios.get('/disabled', {
                 params: {
                     start: info.startStr,
                     end: info.endStr

src/views/Disabled.vue

@@ -9,7 +9,6 @@
 
 <script>
 import DisabledCard from "@/components/DisabledCard";
-import axios from "axios";
 
 export default {
   name: "Disabled",
@@ -21,7 +20,7 @@ export default {
   },
   methods: {
     updateRule: function(rule){
-      axios.post('http://localhost:9090/disabled/update', rule.obj,{
+      this.$axios.post('/disabled/update', rule.obj,{
         headers: {
           'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
         }
@@ -31,7 +30,7 @@ export default {
       })
     },
     createRule: function(rule){
-      axios.post('http://localhost:9090/disabled', rule.obj,{
+      this.$axios.post('/disabled', rule.obj,{
         headers: {
           'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
         }
@@ -42,7 +41,7 @@ export default {
       })
     },
     deleteRule: function(rule){
-      axios.get('http://localhost:9090/disabled/delete', {
+      this.$axios.get('/disabled/delete', {
         params: {
           id: rule.obj.id
         },
@@ -56,7 +55,7 @@ export default {
     },
   },
   mounted(){
-    axios.get('http://localhost:9090/disabled/rules', {
+    this.$axios.get('/disabled/rules', {
       headers: {
         'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
       }

src/views/Patients.vue

@@ -14,7 +14,6 @@
 import PatientSearchField from '@/components/PatientSearchField'
 import PatientCard from '@/components/PatientCard'
 import Pagination from '@/components/Pagination'
-import axios from 'axios';
 import PatientModal from "@/components/PatientModal";
 
 export default {
@@ -42,7 +41,7 @@ export default {
     methods: {
         pageChanged: function(page){
             this.searchFields.page = page - 1;
-            axios.get('http://localhost:9090/patients', {
+            this.$axios.get('/patients', {
                 params: this.searchFields,
                 headers: {
                     'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
@@ -55,7 +54,7 @@ export default {
         search: function(fields){
             this.searchFields = fields;
             this.searchFields.page = 0;
-            axios.get('http://localhost:9090/patients', {
+            this.$axios.get('/patients', {
                 params: this.searchFields,
                 headers: {
                     'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`
@@ -88,7 +87,7 @@ export default {
         }
     },
     mounted(){
-        axios.get('http://localhost:9090/patients', {
+        this.$axios.get('/patients', {
             params: this.searchFields,
             headers: {
                 'Authorization': `Bearer ${window.localStorage.getItem('JWT')}`