From 715856738956359017fec629981dd7e7413ab2d9 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Wed, 21 Aug 2024 15:00:25 +0200
Subject: [PATCH] migrate to useFetch

this makes sure that there is no double fetching
---
 src/pages/index.vue  | 10 ++++------
 src/stores/global.ts | 42 ++++++++++++++++++------------------------
 src/utils/api.ts     | 10 +++++-----
 3 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 474ddf92..6dc80c84 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -50,6 +50,10 @@ const clientsStore = useClientsStore();
 
 const intervalId = ref<NodeJS.Timeout | null>(null);
 
+globalStore.fetchUITrafficStats();
+globalStore.fetchChartType();
+globalStore.fetchRelease();
+
 onMounted(() => {
   // TODO?: replace with websocket or similar
   intervalId.value = setInterval(() => {
@@ -59,12 +63,6 @@ onMounted(() => {
       })
       .catch(console.error);
   }, 1000);
-
-  globalStore.fetchUITrafficStats();
-
-  globalStore.fetchChartType();
-
-  globalStore.fetchRelease();
 });
 
 onUnmounted(() => {
diff --git a/src/stores/global.ts b/src/stores/global.ts
index bff14b05..13a512ec 100644
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -12,40 +12,34 @@ export const useGlobalStore = defineStore('Global', () => {
   const { availableLocales, locale } = useI18n();
 
   async function fetchRelease() {
-    const lang = await api.getLang();
-    if (lang !== getItem('lang') && availableLocales.includes(lang)) {
-      setItem('lang', lang);
-      locale.value = lang;
+    const { data: lang } = await api.getLang();
+    if (
+      lang.value !== getItem('lang') &&
+      availableLocales.includes(lang.value!)
+    ) {
+      setItem('lang', lang.value!);
+      locale.value = lang.value!;
     }
 
-    const release = await api.getRelease();
+    // this is still called on client. why?
+    const { data: release } = await api.getRelease();
 
-    if (release.currentRelease >= release.latestRelease.version) return;
+    if (release.value!.currentRelease >= release.value!.latestRelease.version) {
+      return;
+    }
 
-    currentRelease.value = release.currentRelease;
-    latestRelease.value = release.latestRelease;
+    currentRelease.value = release.value!.currentRelease;
+    latestRelease.value = release.value!.latestRelease;
   }
 
   async function fetchChartType() {
-    api
-      .getChartType()
-      .then((res) => {
-        uiChartType.value = res;
-      })
-      .catch(() => {
-        uiChartType.value = 0;
-      });
+    const { data: chartType } = await api.getChartType();
+    uiChartType.value = chartType.value ?? 0;
   }
 
   async function fetchUITrafficStats() {
-    api
-      .getUITrafficStats()
-      .then((res) => {
-        uiTrafficStats.value = res;
-      })
-      .catch(() => {
-        uiTrafficStats.value = false;
-      });
+    const { data: trafficStats } = await api.getTrafficStats();
+    uiTrafficStats.value = trafficStats.value ?? false;
   }
 
   const updateCharts = computed(() => {
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 39a11fa4..820f5ead 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,24 +1,24 @@
 class API {
   async getRelease() {
-    return $fetch('/api/release', {
+    return useFetch('/api/release', {
       method: 'get',
     });
   }
 
   async getLang() {
-    return $fetch('/api/lang', {
+    return useFetch('/api/lang', {
       method: 'get',
     });
   }
 
-  async getUITrafficStats() {
-    return $fetch('/api/ui-traffic-stats', {
+  async getTrafficStats() {
+    return useFetch('/api/ui-traffic-stats', {
       method: 'get',
     });
   }
 
   async getChartType() {
-    return $fetch('/api/ui-chart-type', {
+    return useFetch('/api/ui-chart-type', {
       method: 'get',
     });
   }