refactor(http): removed axios; changed all requests to native fetch

src/App.vue

@@ -30,7 +30,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import axios from 'axios';
 
 import { version } from '../package.json';
 import { Status } from './typings/common';
@@ -114,11 +113,15 @@ export default defineComponent({
       }
 
       try {
-        const releaseData = await (
-          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
-        ).data;
+        const response = await fetch(
+          'https://api.github.com/repos/Spythere/stacjownik/releases/latest'
+        );
 
-        if (!releaseData) return;
+        if (!response.ok) {
+          throw new Error('Failed to fetch release data from repository!');
+        }
+
+        const releaseData = await response.json();
 
         this.store.appUpdate = {
           version,
@@ -130,7 +133,7 @@ export default defineComponent({
           (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
           import.meta.env.VITE_UPDATE_TEST === 'test';
       } catch (error) {
-        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+        console.error(error);
       }
 
       StorageManager.setStringValue(STORAGE_VERSION_KEY, version);

src/components/JournalView/JournalOptions.vue

@@ -269,9 +269,9 @@ export default defineComponent({
 
       this.searchTimeout = window.setTimeout(async () => {
         try {
-          const suggestions: string[] = await (
-            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
-          ).data;
+          const suggestions: string[] = await this.apiStore.client.get(
+            `api/get${type}Suggestions?name=${value}`
+          );
 
           this[`${type}Suggestions`] = suggestions;
         } catch (error) {

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -201,22 +201,20 @@ const driverRouteLocation = computed<RouteLocationRaw | null>(() => {
 
 async function fetchTimetableDetails() {
   try {
-    const responseData = await apiStore.client!.get<API.TimetableHistory.Response>(
+    const responseData = await apiStore.client.get<API.TimetableHistory.Response>(
       'api/getTimetables',
       {
-        params: {
-          timetableId: props.timetableEntry.id,
-          returnType: 'detailed'
-        }
+        timetableId: props.timetableEntry.id,
+        returnType: 'detailed'
       }
     );
 
-    if (!responseData || responseData.data.length != 1) {
+    if (!responseData || responseData.length != 1) {
       timetableDetails.value = null;
       return;
     }
 
-    timetableDetails.value = responseData.data[0];
+    timetableDetails.value = responseData[0];
   } catch (error) {
     // this.dataStatus = Status.Data.Error;
     console.error(error);

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -127,9 +127,8 @@ export default defineComponent({
           this.station?.name || this.onlineScenery?.name
         }&countFrom=${countFrom}&countLimit=${countLimit}`;
 
-        const historyAPIData: API.DispatcherHistory.Response = await (
-          await this.apiStore.client!.get(requestString)
-        ).data;
+        const historyAPIData: API.DispatcherHistory.Response =
+          await this.apiStore.client.get(requestString);
 
         this.dataStatus = Status.Data.Loaded;
         return historyAPIData;

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -149,11 +149,12 @@ export default defineComponent({
       requestFilters['returnType'] = 'short';
 
       try {
-        const response: API.TimetableHistory.ResponseShort = await (
-          await this.apiStore.client!.get('api/getTimetables', {
-            params: requestFilters
-          })
-        ).data;
+        const response: API.TimetableHistory.ResponseShort = await this.apiStore.client.get(
+          'api/getTimetables',
+          requestFilters
+        );
+
+        console.log(response);
 
         this.historyList = response;
 

src/http.ts

@@ -0,0 +1,23 @@
+export class HttpClient {
+  constructor(private readonly baseURL: string) {}
+
+  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
+    const absoluteURL = new URL(this.baseURL + '/' + url);
+
+    if (params) {
+      Object.keys(params).forEach((key) => {
+        if (params[key] === undefined) return;
+
+        absoluteURL.searchParams.append(key, params[key]);
+      });
+    }
+
+    const data = await fetch(absoluteURL);
+
+    if (!data.ok) {
+      throw new Error(`Cannot fetch: ${absoluteURL}`);
+    }
+
+    return data.json();
+  }
+}

src/store/apiStore.ts

@@ -2,7 +2,20 @@ import { defineStore } from 'pinia';
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
-import axios, { AxiosInstance } from 'axios';
+import { HttpClient } from '../http';
+
+let baseURL = 'https://stacjownik.spythere.eu';
+
+switch (import.meta.env.VITE_API_MODE) {
+  case 'development':
+    baseURL = 'http://localhost:3001';
+    break;
+  case 'mocking':
+    baseURL = 'http://localhost:3123';
+    break;
+  default:
+    break;
+}
 
 export const useApiStore = defineStore('apiStore', {
   state: () => ({
@@ -25,30 +38,13 @@ export const useApiStore = defineStore('apiStore', {
     nextUpdateTime: 0,
     nextDataCheckTime: 0,
 
-    client: undefined as AxiosInstance | undefined,
+    client: new HttpClient(baseURL),
 
     activeDataScheduler: undefined as number | undefined
   }),
 
   actions: {
     async setupAPIData() {
-      let baseURL = 'https://stacjownik.spythere.eu';
-
-      switch (import.meta.env.VITE_API_MODE) {
-        case 'development':
-          baseURL = 'http://localhost:3001';
-          break;
-        case 'mocking':
-          baseURL = 'http://localhost:3123';
-          break;
-        default:
-          break;
-      }
-
-      this.client = axios.create({
-        baseURL
-      });
-
       this.connectToAPI();
     },
 
@@ -82,9 +78,9 @@ export const useApiStore = defineStore('apiStore', {
       if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
       try {
-        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
+        const response = await this.client.get<API.ActiveData.Response>('api/getActiveData');
 
-        this.activeData = response.data;
+        this.activeData = response;
         this.dataStatuses.connection = Status.Data.Loaded;
       } catch (error) {
         this.dataStatuses.connection = Status.Data.Error;
@@ -94,9 +90,9 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchDonatorsData() {
       try {
-        const response = await this.client!.get<API.Donators.Response>('api/getDonators');
+        const response = await this.client.get<API.Donators.Response>('api/getDonators');
 
-        this.donatorsData = response.data;
+        this.donatorsData = response;
       } catch (error) {
         console.error('Ups! Wystąpił błąd podczas pobierania informacji o donatorach:', error);
       }
@@ -104,9 +100,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchStationsGeneralInfo() {
       try {
-        const sceneryData: StationJSONData[] = (
-          await this.client!.get<StationJSONData[]>(`api/getSceneries`)
-        ).data;
+        const sceneryData = await this.client.get<StationJSONData[]>(`api/getSceneries`);
 
         this.dataStatuses.sceneries = Status.Data.Loaded;
         this.sceneryData = sceneryData;
@@ -118,10 +112,10 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchVehiclesInfo() {
       try {
-        const response = await this.client!.get<API.VehiclesData.Response>('api/getVehiclesData');
+        const response = await this.client.get<API.VehiclesData.Response>('api/getVehiclesData');
 
-        this.vehiclesData = response.data;
-        this.dataStatuses.vehicles = response.data ? Status.Data.Loaded : Status.Data.Warning;
+        this.vehiclesData = response;
+        this.dataStatuses.vehicles = response ? Status.Data.Loaded : Status.Data.Warning;
       } catch (error) {
         this.dataStatuses.vehicles = Status.Data.Error;
         console.error('Ups! Wystąpił błąd podczas pobierania informacji o pojazdach:', error);
@@ -130,9 +124,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchDailyStats() {
       try {
-        const res: API.DailyStats.Response = await (
-          await this.client!.get('api/getDailyStats')
-        ).data;
+        const res = await this.client.get<API.DailyStats.Response>('api/getDailyStats');
 
         this.dailyStatsData = res;
 

src/views/JournalDispatchers.vue

@@ -217,9 +217,10 @@ export default defineComponent({
       this.scrollDataLoaded = false;
       this.currentQueryParams['countFrom'] = this.historyList.length;
 
-      const responseData: API.DispatcherHistory.Response = await (
-        await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
-      ).data;
+      const responseData: API.DispatcherHistory.Response = await await this.apiStore.client.get(
+        `api/getDispatchers`,
+        this.currentQueryParams
+      );
 
       if (!responseData) return;
 
@@ -276,9 +277,10 @@ export default defineComponent({
       this.currentQueryParams = queryParams;
 
       try {
-        const responseData: API.DispatcherHistory.Response = await (
-          await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
-        ).data;
+        const responseData: API.DispatcherHistory.Response = await this.apiStore.client.get(
+          `api/getDispatchers`,
+          this.currentQueryParams
+        );
 
         if (!responseData) {
           this.dataStatus = Status.Data.Error;

src/views/JournalTimetables.vue

@@ -277,11 +277,10 @@ export default defineComponent({
 
       this.currentQueryParams['countFrom'] = this.timetableHistory.length;
 
-      const responseData: API.TimetableHistory.Response = await (
-        await this.apiStore.client!.get('api/getTimetables', {
-          params: this.currentQueryParams
-        })
-      ).data;
+      const responseData: API.TimetableHistory.Response = await this.apiStore.client.get(
+        'api/getTimetables',
+        this.currentQueryParams
+      );
 
       if (!responseData) return;
 
@@ -400,11 +399,10 @@ export default defineComponent({
       this.currentQueryParams = queryParams;
 
       try {
-        const responseData: API.TimetableHistory.ResponseShort = await (
-          await this.apiStore.client!.get('api/getTimetables', {
-            params: this.currentQueryParams
-          })
-        ).data;
+        const responseData: API.TimetableHistory.ResponseShort = await this.apiStore.client.get(
+          'api/getTimetables',
+          this.currentQueryParams
+        );
 
         if (!responseData) {
           this.dataStatus = Status.Data.Error;

src/views/PlayerProfileView.vue

@@ -40,7 +40,6 @@ import Loading from '../components/Global/Loading.vue';
 import ProfileSummary from '../components/PlayerProfileView/ProfileSummary.vue';
 import ProfileRecentStats from '../components/PlayerProfileView/ProfileRecentStats.vue';
 import ProfileHistoryList from '../components/PlayerProfileView/ProfileHistoryList.vue';
-import axios from 'axios';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -71,29 +70,28 @@ onDeactivated(() => {
 });
 
 async function fetchPlayerInfo(playerId: number) {
-  return apiStore.client!.get<API.PlayerInfo.Data>('api/getPlayerInfo', {
-    params: {
-      playerId
-    }
+  return apiStore.client.get<API.PlayerInfo.Data>('api/getPlayerInfo', {
+    playerId
   });
 }
 
 async function fetchPlayerJournal(playerId: number) {
-  return apiStore.client!.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
-    params: {
-      playerId,
-      dateScope: '30d'
-    }
+  return apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
+    playerId,
+    dateScope: '30d'
   });
 }
 
-async function fetchPlayerTd2Info(playerName: string) {
-  return axios.get<Td2API.UsersInfoByName.Response>('https://api.td2.info.pl', {
-    params: {
-      method: 'getUsersInfoByName',
-      name: playerName
-    }
-  });
+async function fetchPlayerTd2Info(playerName: string): Promise<Td2API.UsersInfoByName.Response> {
+  const response = await fetch(
+    `https://api.td2.info.pl?method=getUsersInfoByName&name=${playerName}`
+  );
+
+  if (!response.ok) {
+    throw new Error('fetchPlayerTd2Info: could not fetch data');
+  }
+
+  return response.json();
 }
 
 async function fetchPlayerData() {
@@ -116,23 +114,21 @@ async function fetchPlayerData() {
     const playerInfoResp = await fetchPlayerInfo(playerId.value);
 
     playerName.value =
-      playerInfoResp.data.driverStats.driverName ||
-      playerInfoResp.data.dispatcherStats.dispatcherName ||
-      '';
+      playerInfoResp.driverStats.driverName || playerInfoResp.dispatcherStats.dispatcherName || '';
 
     if (!playerName.value) {
       router.push('/');
       return;
     }
 
-    playerInfo.value = playerName.value ? playerInfoResp.data : undefined;
+    playerInfo.value = playerName.value ? playerInfoResp : undefined;
     playerInfoStatus.value = Status.Data.Loaded;
 
     if (playerName.value) {
       const playerTD2InfoResp = await fetchPlayerTd2Info(playerName.value);
 
-      if (playerTD2InfoResp.data.success && playerTD2InfoResp.data.message.length == 1) {
-        playerTD2Info.value = playerTD2InfoResp.data.message[0];
+      if (playerTD2InfoResp.success && playerTD2InfoResp.message.length == 1) {
+        playerTD2Info.value = playerTD2InfoResp.message[0];
       }
     }
   } catch (error) {
@@ -144,7 +140,7 @@ async function fetchPlayerData() {
   try {
     const playerJournalResp = await fetchPlayerJournal(playerId.value);
 
-    playerJournal.value = playerJournalResp.data;
+    playerJournal.value = playerJournalResp;
     playerJournalStatus.value = Status.Data.Loaded;
   } catch (error) {
     playerJournal.value = undefined;