Use single API instance. Server dev/prod url. Debug

webui/src/App.vue

@@ -80,7 +80,7 @@ import ModalCreateClient from '@/components/ModalCreateClient.vue';
 import ModalDeleteClient from '@/components/ModalDeleteClient.vue';
 import Header from '@/components/Header.vue';
 
-import API from '@/services/api';
+import api from '@/services/apiInstance';
 import Client from '@/components/Client.vue';
 
 import { useStore } from '@/store/store';
@@ -113,12 +113,10 @@ const latestRelease = ref(null);
 
 const refreshInterval = ref(null);
 
-const api = new API();
-
 const refresh = store.refresh;
 const setTheme = store.setTheme;
 
-watch(prefersDarkScheme.value, () => {
+watch(prefersDarkScheme, () => {
   setTheme(uiTheme.value);
 });
 

webui/src/components/ClientAddress.vue

@@ -26,9 +26,7 @@
 <script setup>
 import { ref, nextTick } from 'vue';
 import IconEdit from './icons/IconEdit.vue';
-import API from '@/services/api';
-
-const api = new API();
+import api from '@/services/apiInstance';
 
 const props = defineProps({
   client: {

webui/src/components/ClientAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
+  <div class="h-10 w-10 rounded-full bg-gray-50 relative">
     <IconAvatarDefault class="w-6 m-2 text-gray-300" />
     <img v-if="props.client.avatar" :src="props.client.avatar" class="w-10 rounded-full absolute top-0 left-0" />
 

webui/src/components/ClientControls.vue

@@ -73,8 +73,7 @@ import IconQRCode from '@/components/icons/IconQRCode.vue';
 import IconDownload from '@/components/icons/IconDownload.vue';
 import IconDelete from '@/components/icons/IconDelete.vue';
 
-import API from '@/services/api';
-const api = new API();
+import api from '@/services/apiInstance';
 
 import { useStore } from '@/store/store';
 const store = useStore();

webui/src/components/ClientName.vue

@@ -52,9 +52,10 @@
 import { ref, nextTick } from 'vue';
 import { useDateTime } from '../composables/useDateTime';
 import IconEdit from './icons/IconEdit.vue';
-import API from '@/services/api';
 import { useStore } from '@/store/store';
 
+import api from '@/services/apiInstance';
+
 const props = defineProps({
   client: {
     type: Object,
@@ -69,8 +70,6 @@ const { dateTime } = useDateTime();
 const clientEditName = ref(null);
 const clientEditNameId = ref(null);
 
-const api = new API();
-
 const cancelEdit = () => {
   clientEditName.value = null;
   clientEditNameId.value = null;

webui/src/components/UpdateNotification.vue

@@ -26,11 +26,11 @@ import { defineProps } from 'vue';
 
 defineProps({
   latestRelease: {
-    type: Object,
+    type: [String, null],
     required: true,
   },
   currentRelease: {
-    type: String,
+    type: [String, null],
     required: true,
   },
 });

webui/src/services/api.js

@@ -1,6 +1,8 @@
 export default class API {
   constructor() {
-    this.SERVER = 'http://localhost:51821'; //! DEV
+    this.isDev = import.meta.env.MODE === 'development';
+
+    this.SERVER = this.isDev ? import.meta.env.VITE_SERVER_URL_DEV : '.';
   }
   async call({ method, path, body }) {
     const res = await fetch(`${this.SERVER}/api${path}`, {
@@ -8,7 +10,7 @@ export default class API {
       headers: {
         'Content-Type': 'application/json',
       },
-      credentials: 'include', //! DEV
+      credentials: this.isDev ? 'include' : 'same-origin', //DEV
       body: body ? JSON.stringify(body) : undefined,
     });
 

webui/src/services/apiInstance.js

@@ -0,0 +1,5 @@
+import API from '@/services/api';
+
+const api = new API();
+
+export default api;

webui/src/store/store.js

@@ -1,10 +1,9 @@
-import API from '@/services/api';
 import { ref, computed } from 'vue';
 import sha256 from 'crypto-js/sha256';
 
 import { defineStore } from 'pinia';
 
-const api = new API();
+import api from '@/services/apiInstance';
 
 export const useStore = defineStore('store', () => {
   const authenticated = ref(null);
@@ -111,8 +110,11 @@ export const useStore = defineStore('store', () => {
         }
 
         // Debug
-        // client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
-        // client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
+        if (api.isDev) {
+          client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
+          client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
+          client.latestHandshakeAt = new Date('2024-03-20');
+        }
 
         if (updateCharts.value) {
           clientsPersist[client.id].transferRxCurrent =