[notifications] Fixed some warnings about inject outside setup()

src/boot/plugins.ts

@@ -5,7 +5,6 @@ import { api } from 'boot/axios';
 import { AxiosResponse } from 'axios';
 import { RouteRecordRaw } from 'vue-router';
 import { Notify } from 'quasar';
-import { notEmpty } from 'src/utils/validators';
 
 const config: { [key: string]: Array<string> } = {
   // Do not change required Modules !!

src/config.ts

@@ -1,5 +1,6 @@
 const config = {
   baseURL: '/api',
+  pollingInterval: 30000,
 };
 
 export default config;

src/layouts/MainLayout.vue

@@ -104,11 +104,12 @@
 import EssentialLink from 'src/components/navigation/EssentialLink.vue';
 import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
 import Notification from 'src/components/Notification.vue';
-import { Screen } from 'quasar';
-import { defineComponent, ref, inject, computed, onBeforeMount } from 'vue';
+import { defineComponent, ref, inject, computed, onBeforeMount, onBeforeUnmount } from 'vue';
 import { useMainStore } from 'src/stores';
 import { FG_Plugin } from 'src/plugins';
 import { useRouter } from 'vue-router';
+import { Screen } from 'quasar';
+import config from 'src/config';
 
 const essentials: FG_Plugin.MenuLink[] = [
   {
@@ -126,24 +127,25 @@ export default defineComponent({
     const mainStore = useMainStore();
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
     const leftDrawer = ref(false);
-    const shortcuts = flaschengeist?.shortcuts;
-    const mainLinks = flaschengeist?.menuLinks;
+    const leftDrawerMini = ref(false);
+    const shortcuts = flaschengeist?.shortcuts || [];
+    const mainLinks = flaschengeist?.menuLinks || [];
     const notifications = computed(() => mainStore.notifications.slice().reverse());
     const noPermission = ref(window.Notification.permission !== 'granted');
+    const polling = ref(NaN);
 
-    function requestPermission() {
-      void window.Notification.requestPermission().then(
-        (p) => (noPermission.value = p !== 'granted')
-      );
-    }
-
-    onBeforeMount(() => window.setInterval(() => void mainStore.loadNotifications(), 30000));
+    onBeforeMount(() => pollNotification());
+    onBeforeUnmount(() => window.clearInterval(polling.value));
 
     const leftDrawerOpen = computed({
       get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
       set: (val: boolean) => (leftDrawer.value = val),
     });
-    const leftDrawerMini = ref(false);
+
+    const subLinks = computed(() => {
+      const matched = router.currentRoute.value.matched[1];
+      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
+    });
 
     function leftDrawerClicker() {
       if (leftDrawerMini.value) {
@@ -151,11 +153,6 @@ export default defineComponent({
       }
     }
 
-    const subLinks = computed(() => {
-      const matched = router.currentRoute.value.matched[1];
-      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
-    });
-
     function logout() {
       void router.push({ name: 'login', params: { logout: 'logout' } });
       void mainStore.logout();
@@ -165,6 +162,18 @@ export default defineComponent({
       await mainStore.removeNotification(id);
     }
 
+    function requestPermission() {
+      void window.Notification.requestPermission().then(
+        (p) => (noPermission.value = p !== 'granted')
+      );
+    }
+
+    function pollNotification() {
+      polling.value = window.setInterval(() => {
+        void mainStore.loadNotifications(<FG_Plugin.Flaschengeist>flaschengeist);
+      }, config.pollingInterval);
+    }
+
     return {
       essentials,
       leftDrawerOpen,

src/stores/index.ts

@@ -5,7 +5,6 @@ import { FG_Plugin } from 'src/plugins';
 import { AxiosResponse } from 'axios';
 import { api } from 'src/boot/axios';
 import { defineStore } from 'pinia';
-import { inject } from 'vue';
 
 function loadCurrentSession() {
   const session = LocalStorage.getItem<FG.Session>('session');
@@ -109,8 +108,7 @@ export const useMainStore = defineStore({
         );
     },
 
-    async loadNotifications() {
-      const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
+    async loadNotifications(flaschengeist: FG_Plugin.Flaschengeist) {
       const params =
         this.notifications.length > 0
           ? { from: this.notifications[this.notifications.length - 1].time }