From f19a256153fe2ed5549d3a8b8b699c589534b841 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 27 Jan 2025 02:31:08 +0100
Subject: [PATCH] chore: added api mocking

---
 .gitignore                 |  6 ++++
 api-mock/fetchEndpoints.js | 33 +++++++++++++++++++
 api-mock/index.js          | 28 ++++++++++++++++
 api-mock/package.json      | 18 +++++++++++
 package.json               |  4 ++-
 src/App.vue                | 17 +++++-----
 src/stores/api.store.ts    | 66 ++++++++++++++++++++++++++++++++++++++
 src/stores/global.store.ts | 39 ++--------------------
 src/utils/http.ts          |  8 -----
 9 files changed, 164 insertions(+), 55 deletions(-)
 create mode 100644 api-mock/fetchEndpoints.js
 create mode 100644 api-mock/index.js
 create mode 100644 api-mock/package.json
 create mode 100644 src/stores/api.store.ts
 delete mode 100644 src/utils/http.ts

diff --git a/.gitignore b/.gitignore
index a547bf3..73daf68 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
+.env.*
 
 # Editor directories and files
 .vscode/*
@@ -22,3 +24,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# api-mock
+/api-mock/endpoints/
+/api-mock/*.lock
\ No newline at end of file
diff --git a/api-mock/fetchEndpoints.js b/api-mock/fetchEndpoints.js
new file mode 100644
index 0000000..bc2cdf8
--- /dev/null
+++ b/api-mock/fetchEndpoints.js
@@ -0,0 +1,33 @@
+import { existsSync } from 'fs';
+import { mkdir, writeFile } from 'fs/promises';
+
+async function fetchJSONEndpointData(url, fileName) {
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+    await writeFile(`./endpoints/${fileName}`, JSON.stringify(data));
+
+    return true;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return false;
+}
+
+async function main() {
+  if (!existsSync('endpoints')) await mkdir('endpoints');
+
+  Promise.all(
+    ['getActiveData', 'getDonators', 'getSceneries', 'getVehicles'].map((endpointName) =>
+      fetchJSONEndpointData(
+        `https://stacjownik.spythere.eu/api/${endpointName}`,
+        `${endpointName}.json`
+      )
+    )
+  ).then(() => {
+    console.log('Endpoints downloaded!');
+  });
+}
+
+main();
diff --git a/api-mock/index.js b/api-mock/index.js
new file mode 100644
index 0000000..167ff96
--- /dev/null
+++ b/api-mock/index.js
@@ -0,0 +1,28 @@
+import express from 'express';
+import path from 'path';
+import { cwd } from 'process';
+import cors from 'cors';
+
+const app = express();
+
+app.use(cors());
+
+app.get('/api/getActiveData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getActiveData.json'));
+});
+
+app.get('/api/getSceneries', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getSceneries.json'));
+});
+
+app.get('/api/getVehicles', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+});
+
+app.get('/api/getDonators', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getDonators.json'));
+});
+
+app.listen(3123, () => {
+  console.log('Mocking API server...');
+});
diff --git a/api-mock/package.json b/api-mock/package.json
new file mode 100644
index 0000000..3b0b3c1
--- /dev/null
+++ b/api-mock/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "api-mock",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node index.js",
+    "fetch": "node fetchEndpoints.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.3"
+  }
+}
diff --git a/package.json b/package.json
index 4331472..55260a4 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
   "version": "0.1.1",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode staging",
+    "dev:mock": "vite --mode development & yarn --cwd ./api-mock start",
+    "mock:setup": "cd ./api-mock && yarn && yarn fetch",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },
diff --git a/src/App.vue b/src/App.vue
index 0f0bbea..2296bc0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -238,13 +238,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useGlobalStore } from './stores/global.store';
 
 import sceneryCorrections from './data/corrections.json';
 import type { ActiveTrain } from './types/common.types';
 
 import { version } from '../package.json';
 import { PrinterIcon, ArrowPathIcon } from '@heroicons/vue/16/solid';
+import { useApiStore } from './stores/api.store';
 
 interface StopRow {
   pointName: string;
@@ -281,7 +281,7 @@ export default defineComponent({
   components: { PrinterIcon, ArrowPathIcon },
   data: () => ({
     selectedTrainId: '',
-    globalStore: useGlobalStore(),
+    apiStore: useApiStore(),
     selectedTrain: null as ActiveTrain | null,
 
     generatedMs: 0,
@@ -290,12 +290,12 @@ export default defineComponent({
   }),
 
   mounted() {
-    this.globalStore.setupData();
+    this.apiStore.setupAPIData();
   },
 
   methods: {
     selectTrain() {
-      if (!this.globalStore.activeData) return;
+      if (!this.apiStore.activeData) return;
 
       this.selectedTrain = this.activeTimetableTrains.find((train) => train.id == this.selectedTrainId) ?? null;
 
@@ -307,17 +307,16 @@ export default defineComponent({
     },
 
     refreshData() {
+      this.apiStore.fetchActiveData();
       this.selectTrain();
     },
   },
 
   computed: {
     activeTimetableTrains() {
-      if (!this.globalStore.activeData) return [];
+      if (!this.apiStore.activeData) return [];
 
-      return this.globalStore.activeData.trains
-        .filter((train) => train.timetable)
-        .sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'));
+      return this.apiStore.activeData.trains.filter((train) => train.timetable).sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'));
     },
 
     computedTimetable() {
@@ -343,7 +342,7 @@ export default defineComponent({
         const [arrivalLine, scenery, departureLine] = pathEl.split(',');
         const sceneryName = scenery.split(' ').slice(0, -1).join(' ');
 
-        const sceneryData = this.globalStore.sceneryData?.find((sc) => sc.name == sceneryName) ?? null;
+        const sceneryData = this.apiStore.sceneryData?.find((sc) => sc.name == sceneryName) ?? null;
         const arrivalLineData = arrivalLine ? sceneryData?.routesInfo.find((rt) => rt.routeName == arrivalLine) ?? null : null;
         const departureLineData = departureLine ? sceneryData?.routesInfo.find((rt) => rt.routeName == departureLine) ?? null : null;
 
diff --git a/src/stores/api.store.ts b/src/stores/api.store.ts
new file mode 100644
index 0000000..c8e93cb
--- /dev/null
+++ b/src/stores/api.store.ts
@@ -0,0 +1,66 @@
+import type { AxiosInstance } from 'axios';
+import axios from 'axios';
+import { defineStore } from 'pinia';
+import type { ActiveDataResponse, SceneriesDataResponse } from '../types/api.types';
+import type { ActiveData, SceneryData } from '../types/common.types';
+
+export const useApiStore = defineStore('api', {
+  state() {
+    return {
+      client: null as AxiosInstance | null,
+      
+      activeData: null as ActiveData | null,
+      sceneryData: null as SceneryData[] | null,
+    };
+  },
+
+  actions: {
+    async setupAPIData() {
+      if (this.client != null) return;
+
+      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.fetchSceneriesData();
+      this.fetchActiveData();
+
+      setInterval(() => {
+        this.fetchActiveData();
+      }, 20000);
+    },
+
+    async fetchActiveData() {
+      try {
+        const response = (await this.client!.get<ActiveDataResponse>('/api/getActiveData')).data;
+
+        this.activeData = response;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    async fetchSceneriesData() {
+      try {
+        const response = (await this.client!.get<SceneriesDataResponse>('/api/getSceneries')).data;
+
+        this.sceneryData = response;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+});
diff --git a/src/stores/global.store.ts b/src/stores/global.store.ts
index 6762406..f443b54 100644
--- a/src/stores/global.store.ts
+++ b/src/stores/global.store.ts
@@ -1,42 +1,7 @@
 import { defineStore } from 'pinia';
-import httpClient from '../utils/http';
-import type { ActiveDataResponse, SceneriesDataResponse } from '../types/api.types';
-import type { ActiveData, SceneryData } from '../types/common.types';
 
 export const useGlobalStore = defineStore('global', {
-  state: () => ({
-    activeData: null as ActiveData | null,
-    sceneryData: null as SceneryData[] | null,
-  }),
+  state: () => ({}),
   getters: {},
-  actions: {
-    async _fetchActiveData() {
-      try {
-        const response = (await httpClient.get<ActiveDataResponse>('/api/getActiveData')).data;
-
-        this.activeData = response;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-
-    async _fetchSceneriesData() {
-      try {
-        const response = (await httpClient.get<SceneriesDataResponse>('/api/getSceneries')).data;
-
-        this.sceneryData = response;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-
-    setupData() {
-      this._fetchActiveData();
-      this._fetchSceneriesData();
-      
-      setInterval(() => {
-        this._fetchActiveData();
-      }, 20000);
-    },
-  },
+  actions: {},
 });
diff --git a/src/utils/http.ts b/src/utils/http.ts
deleted file mode 100644
index 79c87e2..0000000
--- a/src/utils/http.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import axios from 'axios';
-
-const httpClient = axios.create({
-  baseURL: 'https://stacjownik.spythere.eu',
-  timeout: 3000,
-});
-
-export default httpClient;