convert API to composable

src/components/Login.vue

@@ -62,7 +62,6 @@
 import { Component, Vue, Emit, Prop } from 'vue-property-decorator';
 import { Action } from 'vuex-class';
 import userService from '@/shared/userService';
-import { setBaseUrl } from '@/shared/apiService';
 
 import { AuthPayload } from '@/types';
 
@@ -132,7 +131,9 @@ export default class Login extends Vue {
       .login(this.auth)
       .then(() => {
         this.setLoggedIn(true);
-        setBaseUrl(userService.getAPIUrl());
+        // TODO: Investigate how this needs to be done properly
+        // setBaseUrl(userService.getAPIUrl());
+
         this.emitLoginResult(true);
         if (this.inModal === false) {
           if (typeof this.$route.query.redirect === 'string') {

src/shared/apiService.ts

@@ -1,17 +1,18 @@
 import axios from 'axios';
-import userService from './userService';
+import { UserService } from './userService';
-
-export const api = axios.create({
-  baseURL: userService.apiBase,
-  timeout: 10000,
-  withCredentials: true,
-});
 
 /**
- * Initialize api so store is accessible.
+ * Global store variable - keep a reference here to be able to emmit alerts
- * @param store Vuex store
  */
-export function initApi(store) {
+let globalStore;
+
+export function useApi(userService: UserService) {
+  const api = axios.create({
+    baseURL: userService.getBaseUrl(),
+    timeout: 10000,
+    withCredentials: true,
+  });
+  // Sent auth headers interceptor
   api.interceptors.request.use(
     (config) => {
       const custconfig = config;
@@ -59,7 +60,7 @@ export function initApi(store) {
       }
       if ((err.response && err.response.status === 500) || err.message === 'Network Error') {
         console.log('Bot not running...');
-        store.dispatch('setIsBotOnline', false);
+        globalStore.dispatch('setIsBotOnline', false);
       }
 
       return new Promise((resolve, reject) => {
@@ -67,17 +68,17 @@ export function initApi(store) {
       });
     },
   );
+
+  return {
+    api,
+  };
 }
 
-export function setBaseUrl(baseURL: string) {
+/**
-  if (baseURL === null) {
+ * Initialize api so store is accessible.
-    // Reset to "local" baseurl
+ * @param store Vuex store
-    api.defaults.baseURL = userService.apiBase;
+ */
-  } else if (!baseURL.endsWith(userService.apiBase)) {
+export function initApi(store) {
-    api.defaults.baseURL = `${baseURL}${userService.apiBase}`;
+  globalStore = store;
-  } else {
+  //
-    api.defaults.baseURL = `${baseURL}${userService.apiBase}`;
-  }
 }
-
-setBaseUrl(userService.getAPIUrl());

src/store/modules/ftbot/index.ts

@@ -1,4 +1,5 @@
-import { api } from '@/shared/apiService';
+import { useApi } from '@/shared/apiService';
+import userService from '@/shared/userService';
 
 import {
   BacktestResult,
@@ -85,6 +86,8 @@ export enum BotStoreGetters {
 }
 
 export function createBotSubStore() {
+  const { api } = useApi(userService);
+
   return {
     namespaced: true,
     state,