Add new global pinia webcron store to handle webcron requests. The old implementation would add additional intervals for each page request.

resources/js/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, usePage } from '@inertiajs/vue3'
+import { Head, usePage, } from '@inertiajs/vue3'
 import AppSidebar from '@/components/AppSidebar.vue';
 import { onMounted } from 'vue';
 import 'vue-sonner/style.css'
@@ -9,36 +9,27 @@ import { Button } from '@/components/ui/crm-button'
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
 import { alertStore } from '@/stores/alertStore';
-import axios from 'axios';
+import { webcronStore } from '@/stores/webcronStore';
 
 const alert = alertStore()
+const webcron = webcronStore()
+
 const props = defineProps<{
     title: string
 }>();
 const isOpen = usePage().props.sidebarOpen;
 const cron = usePage().props.cron
 
-
 onMounted(() => {
     if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
         document.body.classList.add('is-mac')
     }
 
     if (cron) {
-        triggerWebcron()
+        webcron.start()
-        setInterval(triggerWebcron, 30000)
     }
 })
 
-const triggerWebcron = async function () {
-    await axios.get('/webcron')
-        .catch(function (response) {
-            if (response.status >= 400) {
-                console.error(response.message)
-            }
-        })
-}
-
 </script>
 
 <template>

resources/js/stores/alertStore.ts

@@ -1,4 +1,3 @@
-import { options } from '@coders-tm/vue-number-format';
 import { defineStore } from 'pinia'
 
 export interface AlertOptions {

resources/js/stores/webcronStore.ts

@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia'
+import axios from 'axios';
+
+export const webcronStore = defineStore('webcron', {
+    state: () => {
+        return {
+            timeout: 1000 * 30,
+            interval: 0,
+            url: '/webcron'
+        }
+    },
+    actions: {
+        start() {
+            if (this.interval) return
+            this.triggerWebcron(this.url)
+            this.interval = setInterval(this.triggerWebcron, this.timeout, this.url)
+        },
+
+        stop() {
+            clearInterval(this.interval)
+            this.interval = 0
+        },
+        triggerWebcron: async (url: string) => {
+            await axios.get(url)
+                .catch(function (response) {
+                    if (response.status >= 400) {
+                        console.error(response.message)
+                    }
+                })
+        }
+    }
+})