From 6676f277a006953c48c3de5cb56c2bc6af8f0120 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <2pi_r2@gmx.de>
Date: Mon, 14 Feb 2022 15:05:52 +0100
Subject: [PATCH 1/3] abort fetch!

---
 verwaltung/composables/auth/sse.ts       | 15 +++-
 verwaltung/composables/reloadableData.ts | 88 +++++++++++++++++++-----
 verwaltung/pages/user/[id].vue           | 40 +++++------
 verwaltung/pages/user/index.vue          | 11 ++-
 vite-plugins/server-router.ts            |  3 +-
 5 files changed, 107 insertions(+), 50 deletions(-)

diff --git a/verwaltung/composables/auth/sse.ts b/verwaltung/composables/auth/sse.ts
index 76e6e04..17e6538 100644
--- a/verwaltung/composables/auth/sse.ts
+++ b/verwaltung/composables/auth/sse.ts
@@ -5,7 +5,11 @@ const invalidationCb: Record<string, (() => void)[]> = {};
 
 const { authToken } = useAuthData();
 
-export function onInvalidate(key: string[], cb: () => void) {
+export function onInvalidate(
+  key: string[],
+  cb: () => void,
+  signal?: AbortSignal
+) {
   if (currentSource?.readyState === 2) {
     createNewEventSource();
   }
@@ -18,10 +22,17 @@ export function onInvalidate(key: string[], cb: () => void) {
     }
   });
 
-  onScopeDispose(() => {
+  const cleanup = () => {
     key.forEach(k => {
       invalidationCb[k].splice(invalidationCb[k].indexOf(cb), 1);
     });
+  };
+
+  signal?.addEventListener('abort', cleanup);
+
+  onScopeDispose(() => {
+    cleanup();
+    signal?.removeEventListener('abort', cleanup);
   });
 }
 let currentSource: EventSource | null = null;
diff --git a/verwaltung/composables/reloadableData.ts b/verwaltung/composables/reloadableData.ts
index 4f49104..93c4550 100644
--- a/verwaltung/composables/reloadableData.ts
+++ b/verwaltung/composables/reloadableData.ts
@@ -1,38 +1,92 @@
-import { ref, onMounted, Ref, watchEffect } from 'vue';
+import {
+  ref,
+  Ref,
+  shallowRef,
+  shallowReadonly,
+  DeepReadonly,
+  watch,
+  isRef,
+  ShallowRef,
+  onScopeDispose
+} from 'vue';
+import { onInvalidate } from '@/composables/auth';
 
-export function useDataReload<T>(cb: () => Promise<T>, init?: T) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const data: Ref<T> = ref<T>() as any;
+export function useDataReload<T, O>(
+  cb: (options: O) => Promise<T>,
+  args: Ref<O> | null,
+  {
+    init,
+    watchArgs = true,
+    invalidations = []
+  }: {
+    init?: T;
+    watchArgs?: boolean;
+    invalidations?: Ref<Array<string>> | Array<string>;
+  } = {}
+) {
+  // Init Refs
   const loading = ref(true);
-  const error = ref<null | Error>(null);
+  const data = shallowRef<T>() as unknown as ShallowRef<T>;
+  const error = shallowRef<null | Error>(null);
 
   if (init) data.value = init;
 
-  async function reload(): Promise<T> {
+  let fetchAbort: AbortController;
+
+  async function reload() {
+    if (fetchAbort) fetchAbort.abort();
+
+    fetchAbort = new AbortController();
+
+    // Stop fetch on unmounted etc.
+    onScopeDispose(() => fetchAbort.abort());
+
     try {
-      const val = await cb();
+      // any wird hier benötigt da signal eigentlich typenmäßig nicht existiert aber praktisch doch.
+      const val = await cb({
+        signal: fetchAbort.signal,
+        ...(args?.value ?? {})
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any);
       data.value = val;
       error.value = null;
       loading.value = false;
-      return val;
     } catch (ex) {
       loading.value = false;
       error.value = ex as Error;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return null as any;
     }
   }
 
-  onMounted(() => watchEffect(() => reload()));
+  // Watch argument change?
+  if (watchArgs && args) watch(args, reload);
+
+  if (isRef(invalidations)) {
+    // watch invalidations
+    let invalidateAbort = new AbortController();
+
+    onInvalidate(invalidations.value, reload, invalidateAbort.signal);
+
+    onScopeDispose(() => invalidateAbort.abort());
+
+    watch(invalidations, () => {
+      invalidateAbort.abort();
+      invalidateAbort = new AbortController();
+      onInvalidate(invalidations.value, reload, invalidateAbort.signal);
+    });
+  } else {
+    // Static invalidations
+    onInvalidate(invalidations, reload);
+  }
+
+  // Load data!
+  reload();
 
   return {
-    data,
+    // Typenmäßig machen wir den return nur readable um bugs zu vermeiden. Wir machen daher auch nur ein shallow da die Datenstrucktur nicht komplett proxifiziert werden muss.
+    // Da der .value wert readonly sein sollte nutzen wir shallowReadonly.
+    data: shallowReadonly(data as Ref<DeepReadonly<T>>),
     reload,
     loading,
-    error,
-    nav: () => {
-      reload();
-      return true;
-    }
+    error
   };
 }
diff --git a/verwaltung/pages/user/[id].vue b/verwaltung/pages/user/[id].vue
index ac25d13..250c718 100644
--- a/verwaltung/pages/user/[id].vue
+++ b/verwaltung/pages/user/[id].vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 
-import { onInvalidate } from '@/composables/auth';
 import { useDataReload } from '@/composables/reloadableData';
 import { toDateFormat } from '@/composables/date';
 
@@ -15,20 +14,13 @@ import loadUser from '@api/admin/user/_id.get';
 
 const route = useRoute();
 
-const {
-  data: user,
-  reload,
-  loading,
-  error,
-  nav
-} = useDataReload(() =>
-  loadUser({
-    params: { id: route.params.id as string }
-  })
-);
+const args = computed(() => ({
+  params: { id: route.params.id as string }
+}));
 
-onInvalidate([`user:${route.params.id}`], () => reload());
-onBeforeRouteUpdate(nav);
+const invalidations = computed(() => [`user:${route.params.id}`]);
+
+const reloadable = useDataReload(loadUser, args, { invalidations });
 
 const valid_until_date = ref<string>();
 function extend() {
@@ -73,16 +65,16 @@ function addRecht() {
 </script>
 <template lang="pug">
 v-container(fluid)
-  template(v-if="loading")
+  template(v-if="reloadable.loading")
     EcLoader(size="50px")
-  template(v-else-if="error")
-    p Ein fehler beim laden ist aufgetreten: {{error}}
-    v-btn(@click="reload") Nochmal versuchen
+  template(v-else-if="reloadable.error")
+    p Ein fehler beim laden ist aufgetreten: {{reloadable.error}}
+    v-btn(@click="reloadable.reload") Nochmal versuchen
   template(v-else)
-    h2 Benutzerverwaltung {{ user.user.username }} ({{ user.user.name }})
-    p Benutzer freigeschaltet bis: {{ toDateFormat(user.user.valid_until) }}
-    p Benutzer ist {{ user.user.is_admin ? '' : 'kein' }} Administrator
-    p E-Mail: {{user.user.email}}
+    h2 Benutzerverwaltung {{ reloadable.data.user.username }} ({{ reloadable.data.user.name }})
+    p Benutzer freigeschaltet bis: {{ toDateFormat(reloadable.data.user.valid_until) }}
+    p Benutzer ist {{ reloadable.data.user.is_admin ? '' : 'kein' }} Administrator
+    p E-Mail: {{reloadable.data.user.email}}
 
     FormDialog(title="Benutzer hinzufügen" @save="extend")
       template(v-slot:activator="{ props }")
@@ -106,7 +98,7 @@ v-container(fluid)
       
 
     v-list
-      v-list-item(v-for="recht in user.rechte" :key="recht.user_rechte_id" @click="")
+      v-list-item(v-for="recht in reloadable.data.rechte" :key="recht.user_rechte_id" @click="")
         v-list-item-title {{ recht.recht }} für {{ recht.recht_object_name }} (ID: {{ recht.recht_object_id }})
         template(v-slot:append)
           v-list-item-avatar(right)
diff --git a/verwaltung/pages/user/index.vue b/verwaltung/pages/user/index.vue
index 0c9ebc5..a55663d 100644
--- a/verwaltung/pages/user/index.vue
+++ b/verwaltung/pages/user/index.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { reactive, toRaw } from 'vue';
+import { reactive, toRaw, ref } from 'vue';
 
-import { onInvalidate } from '@/composables/auth';
 import { useDataReload } from '@/composables/reloadableData';
-
+@/composables/reloadableData
 import { required } from '@/rules/requires';
 
 import FormDialog from '@/components/FormDialog.vue';
@@ -17,7 +16,9 @@ const {
   reload,
   loading,
   error
-} = useDataReload(() => loadUserList(), []);
+} = useDataReload(loadUserList, null, {
+  invalidations: ['user']
+});
 
 const newUserData = reactive({
   username: '',
@@ -31,8 +32,6 @@ function saveNewUser() {
     body: toRaw(newUserData)
   });
 }
-
-onInvalidate(['user'], reload);
 </script>
 <template lang="pug">
 v-container(fluid)
diff --git a/vite-plugins/server-router.ts b/vite-plugins/server-router.ts
index 6453e3c..391c576 100644
--- a/vite-plugins/server-router.ts
+++ b/vite-plugins/server-router.ts
@@ -29,7 +29,7 @@ export default () => {
         import { wrapFetchOptions } from '@/composables/api'
         import { handleDate } from '@/composables/apiDateHandler'
 
-        export default async ({ params, query, body } = {}) => {
+        export default async ({ params, query, body, signal } = {}) => {
           const url = new URL(\`${pathLit}\`, __API_BASE_URL__)
 
           if(query) {
@@ -39,6 +39,7 @@ export default () => {
 
           const res = await fetch(url.href, wrapFetchOptions({
             method: '${METHOD}',
+            signal,
             ${
               METHOD !== 'get'
                 ? `headers: {

From b9da0e266dcc5c579d3a1135a7e0d09f49aca55f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <2pi_r2@gmx.de>
Date: Mon, 14 Feb 2022 16:07:16 +0100
Subject: [PATCH 2/3] fix

---
 verwaltung/pages/user/[id].vue  | 2 +-
 verwaltung/pages/user/index.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/verwaltung/pages/user/[id].vue b/verwaltung/pages/user/[id].vue
index 250c718..6fa74b6 100644
--- a/verwaltung/pages/user/[id].vue
+++ b/verwaltung/pages/user/[id].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useRoute } from 'vue-router';
 
 import { useDataReload } from '@/composables/reloadableData';
 import { toDateFormat } from '@/composables/date';
diff --git a/verwaltung/pages/user/index.vue b/verwaltung/pages/user/index.vue
index a55663d..88c15c2 100644
--- a/verwaltung/pages/user/index.vue
+++ b/verwaltung/pages/user/index.vue
@@ -2,7 +2,6 @@
 import { reactive, toRaw, ref } from 'vue';
 
 import { useDataReload } from '@/composables/reloadableData';
-@/composables/reloadableData
 import { required } from '@/rules/requires';
 
 import FormDialog from '@/components/FormDialog.vue';

From 4795a2ad1ea8cf1e5536f1ec7be6e4550eee6171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <2pi_r2@gmx.de>
Date: Mon, 14 Feb 2022 16:13:18 +0100
Subject: [PATCH 3/3] fix

---
 verwaltung/pages/user/[id].vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/verwaltung/pages/user/[id].vue b/verwaltung/pages/user/[id].vue
index 6fa74b6..c6ee900 100644
--- a/verwaltung/pages/user/[id].vue
+++ b/verwaltung/pages/user/[id].vue
@@ -20,7 +20,9 @@ const args = computed(() => ({
 
 const invalidations = computed(() => [`user:${route.params.id}`]);
 
-const reloadable = useDataReload(loadUser, args, { invalidations });
+const { data, error, reload, loading } = useDataReload(loadUser, args, {
+  invalidations
+});
 
 const valid_until_date = ref<string>();
 function extend() {
@@ -65,16 +67,16 @@ function addRecht() {
 </script>
 <template lang="pug">
 v-container(fluid)
-  template(v-if="reloadable.loading")
+  template(v-if="loading")
     EcLoader(size="50px")
-  template(v-else-if="reloadable.error")
-    p Ein fehler beim laden ist aufgetreten: {{reloadable.error}}
-    v-btn(@click="reloadable.reload") Nochmal versuchen
+  template(v-else-if="error")
+    p Ein fehler beim laden ist aufgetreten: {{error}}
+    v-btn(@click="reload") Nochmal versuchen
   template(v-else)
-    h2 Benutzerverwaltung {{ reloadable.data.user.username }} ({{ reloadable.data.user.name }})
-    p Benutzer freigeschaltet bis: {{ toDateFormat(reloadable.data.user.valid_until) }}
-    p Benutzer ist {{ reloadable.data.user.is_admin ? '' : 'kein' }} Administrator
-    p E-Mail: {{reloadable.data.user.email}}
+    h2 Benutzerverwaltung {{ data.user.username }} ({{ data.user.name }})
+    p Benutzer freigeschaltet bis: {{ toDateFormat(data.user.valid_until) }}
+    p Benutzer ist {{ data.user.is_admin ? '' : 'kein' }} Administrator
+    p E-Mail: {{data.user.email}}
 
     FormDialog(title="Benutzer hinzufügen" @save="extend")
       template(v-slot:activator="{ props }")
@@ -98,7 +100,7 @@ v-container(fluid)
       
 
     v-list
-      v-list-item(v-for="recht in reloadable.data.rechte" :key="recht.user_rechte_id" @click="")
+      v-list-item(v-for="recht in data.rechte" :key="recht.user_rechte_id" @click="")
         v-list-item-title {{ recht.recht }} für {{ recht.recht_object_name }} (ID: {{ recht.recht_object_id }})
         template(v-slot:append)
           v-list-item-avatar(right)