axios: baseURL

.env

@@ -1,2 +1,3 @@
 VITE_API_URL="https://spythere.pl"
-VITE_API_URL_DEV="https://spythere.pl"
+VITE_API_URL_DEV="http://localhost:3000"
+VITE_API_DEV=1

src/App.vue

@@ -6,23 +6,20 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import dataMixin from './mixins/dataMixin';
 import PopUpCard from './components/PopUpCard.vue';
-import axios from 'axios';
 import { RouterView } from 'vue-router';
-import { IUser, AuthState } from './types/types';
+import { AuthState } from './types/types';
 import useRouteGuard from './mixins/useRouteGuard';
 import { useStore } from './store';
 import useLocalStorage from './mixins/useLocalStorage';
 
 export default defineComponent({
-  mixins: [dataMixin],
   components: { PopUpCard },
 
   setup() {
     const { routeAuthGuard } = useRouteGuard();
     const { setupStorage } = useLocalStorage();
-    
+
     routeAuthGuard();
     setupStorage();
 
@@ -41,9 +38,8 @@ export default defineComponent({
 
       this.store.token = token;
 
-      const data = axios.post<{ user: IUser }>(`${this.API_URL}/auth/token`, { token: this.store.token });
+      this.store
-
+        .fetchTokenData()
-      data
         .then((res) => {
           this.store.user = res.data.user;
           this.store.authState = AuthState.AUTHORIZED;

src/components/TableActions.vue

@@ -55,7 +55,7 @@
 
     <div class="pane">
       Pokazuj maks.
-      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 50px; margin: 0 0.5em;" />
+      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 50px; margin: 0 0.5em" />
       wyników
     </div>
 
@@ -76,7 +76,6 @@
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent } from 'vue';
-import dataMixin from '../mixins/dataMixin';
 import routesMixin from '../mixins/routesMixin';
 import { useStore } from '../store';
 import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRowItem } from '../types/types';
@@ -95,7 +94,7 @@ export default defineComponent({
     };
   },
 
-  mixins: [dataMixin, routesMixin],
+  mixins: [routesMixin],
 
   computed: {
     changelog() {
@@ -133,7 +132,7 @@ export default defineComponent({
     confirmLoadData() {
       const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
 
-      if (confirmed) this.loadData();
+      if (confirmed) this.store.fetchSceneriesData();
     },
 
     confirmRestoreList() {
@@ -174,24 +173,10 @@ export default defineComponent({
           return { ...v };
         });
 
-        const response = await axios.post(
+        const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data
-          `${this.API_URL}/manager/updateSceneryList`,
+        this.store.changesResponse = updateResData;
-          {
-            changeList: mappedChangeList,
-            token: this.store.token,
-            notify: this.store.notifyDiscord,
-          },
-          {
-            headers: {
-              'Content-Type': 'application/json',
-              Authorization: `Bearer ${this.store.token}`,
-            },
-          }
-        );
 
-        this.store.changesResponse = response.data;
+        this.store.fetchSceneriesData();
-
-        this.loadData();
       } catch (error) {
         this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
       }

src/mixins/dataMixin.ts

@@ -1,45 +0,0 @@
-import { defineComponent } from 'vue';
-import { useStore } from '../store';
-import axios from 'axios';
-
-export default defineComponent({
-  setup() {
-    return {
-      store: useStore(),
-    };
-  },
-
-  data() {
-    return {
-      API_URL: import.meta.env.PROD ? import.meta.env.VITE_API_URL : import.meta.env.VITE_API_URL_DEV,
-    };
-  },
-
-  methods: {
-    async loadData() {
-      try {
-        this.store.dataState = 'LOADING';
-
-        const data = (
-          await axios.get(`${this.API_URL}/api/getSceneries?time=${Date.now()}`, {
-            headers: {
-              'Content-Type': 'application/json',
-              Authorization: `Bearer ${this.store.token}`,
-            },
-          })
-        ).data;
-
-        this.store.backupList = JSON.parse(JSON.stringify(data));
-        this.store.stationList = data;
-        this.store.unsavedChanges = false;
-        this.store.changeList = [];
-
-        this.store.dataState = 'LOADED';
-      } catch (error) {
-        this.store.dataState = 'ERROR';
-        this.store.token = '';
-        this.store.isAuthorized = false;
-      }
-    },
-  },
-});

src/store.ts

@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia';
-import { AuthState, IStore } from './types/types';
+import { AuthState, ILoginResponse, IStore, IUser, SceneryRowItem } from './types/types';
+import axios from 'axios';
+
+const baseURL = import.meta.env[`VITE_API_URL${import.meta.env.DEV ? '_DEV' : ''}`];
 
 export const useStore = defineStore('store', {
   state: () =>
@@ -29,4 +32,68 @@ export const useStore = defineStore('store', {
 
       changesResponse: [],
     } as IStore),
+  actions: {
+    fetchSceneriesData() {
+      this.dataState = 'LOADING';
+
+      const data = axios.get<SceneryRowItem[]>(`api/getSceneries?time=${Date.now()}`, {
+        baseURL,
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${this.token}`,
+        },
+      });
+
+      data
+        .then((res) => {
+          this.dataState = 'LOADED';
+          this.backupList = JSON.parse(JSON.stringify(res.data));
+          this.stationList = res.data;
+          this.unsavedChanges = false;
+          this.changeList = [];
+        })
+        .catch(() => {
+          this.dataState = 'ERROR';
+          this.token = '';
+          this.isAuthorized = false;
+        });
+    },
+
+    updateSceneriesData(mappedChangeList: any[]) {
+      const response = axios.post(
+        '/manager/updateSceneryList',
+        {
+          changeList: mappedChangeList,
+          token: this.token,
+          notify: this.notifyDiscord,
+        },
+        {
+          baseURL,
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.token}`,
+          },
+        }
+      );
+
+      return response;
+    },
+
+    login(name: string, pwd: string) {
+      return axios.post<ILoginResponse>(
+        'auth/login',
+        { username: name, password: pwd },
+        {
+          baseURL,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+    },
+
+    fetchTokenData() {
+      return axios.post<{ user: IUser }>('auth/token', { token: this.token }, { baseURL });
+    },
+  },
 });

src/views/LoginView.vue

@@ -23,7 +23,6 @@
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent } from 'vue';
-import dataMixin from '../mixins/dataMixin';
 import { useStore } from '../store';
 import { AuthState, ILoginResponse } from '../types/types';
 
@@ -34,8 +33,6 @@ enum LoginState {
 }
 
 export default defineComponent({
-  mixins: [dataMixin],
-
   data() {
     return {
       errorMessage: '',
@@ -61,31 +58,19 @@ export default defineComponent({
       console.log('Ładowanie');
 
       try {
-        const data: ILoginResponse = (
+        const loginData = (await this.store.login(this.name, this.password)).data;
-          await axios.post(
-            `${this.API_URL}/auth/login`,
-            { username: this.name, password: this.password },
-            {
-              headers: {
-                'Content-Type': 'application/json',
-              },
-            }
-          )
-        ).data;
 
         this.store.authState = AuthState.AUTHORIZED;
         this.loginState = LoginState.LOADED;
 
-        this.store.token = data.token;
+        this.store.token = loginData.token;
-        this.store.user = data.user;
+        this.store.user = loginData.user;
 
         window.localStorage.setItem('auth-token', this.store.token);
         window.localStorage.setItem('user', JSON.stringify(this.store.user));
 
-        console.log('Gituwa');
-
         this.$router.push('/');
-        this.loadData();
+        this.store.fetchSceneriesData();
       } catch (e: any) {
         this.store.authState = AuthState.UNAUTHORIZED;
         this.loginState = LoginState.LOADED;

src/views/ManagerView.vue

@@ -58,7 +58,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import changeMixin from '../mixins/changeMixin';
-import dataMixin from '../mixins/dataMixin';
 import { useStore } from '../store';
 import { SceneryRowItem, Availability, AuthState } from '../types/types';
 import RoutesModal from '../components/RoutesModal.vue';
@@ -68,7 +67,7 @@ import UpdateCard from '../components/UpdateCard.vue';
 
 export default defineComponent({
   components: { RoutesModal, TableActions, UpdateCard },
-  mixins: [dataMixin, changeMixin, routesMixin],
+  mixins: [changeMixin, routesMixin],
 
   data: () => ({
     AuthState,
@@ -97,7 +96,7 @@ export default defineComponent({
   },
 
   mounted() {
-    this.loadData();
+    this.store.fetchSceneriesData();
   },
 
   computed: {