implementing snapshots

dashboard/composables/Projects.ts

@@ -49,6 +49,11 @@ export function useActiveProject() {
 
 
 export async function setActiveProject(project_id: string) {
+    changingProject.value = true;
+    await new Promise(e => setTimeout(e, 500));
     await $fetch<string>(`/api/user/set_active_project?project_id=${project_id}`, signHeaders());
     await activeProjectId.refresh();
+    changingProject.value = false;
 }
+
+export const changingProject = ref<boolean>(false);

dashboard/composables/useCustomFetch.ts

@@ -1,5 +1,5 @@
 import type { InternalApi } from 'nitropack';
-import type { WatchSource } from 'vue';
+import type { WatchSource, WatchStopHandle } from 'vue';
 
 
 type NitroFetchRequest = Exclude<keyof InternalApi, `/_${string}` | `/api/_${string}`> | (string & {});
@@ -8,10 +8,15 @@ export type CustomFetchOptions = {
     watchProps?: WatchSource[],
     lazy?: boolean,
     method?: string,
-    getBody?: () => Record<string, any>
+    getBody?: () => Record<string, any>,
+    watchKey?: string
 }
 
 type OnResponseCallback<TData> = (data: Ref<TData | undefined>) => any
+type OnRequestCallback = () => any
+
+
+const watchStopHandles: Record<string, WatchStopHandle> = {}
 
 export function useCustomFetch<T>(url: NitroFetchRequest, getHeaders: () => Record<string, string>, options?: CustomFetchOptions) {
 
@@ -20,12 +25,18 @@ export function useCustomFetch<T>(url: NitroFetchRequest, getHeaders: () => Reco
     const error = ref<Error | undefined>();
 
     let onResponseCallback: OnResponseCallback<T> = () => { }
+    let onRequestCallback: OnRequestCallback = () => { }
 
     const onResponse = (callback: OnResponseCallback<T>) => {
         onResponseCallback = callback;
     }
 
+    const onRequest = (callback: OnRequestCallback) => {
+        onRequestCallback = callback;
+    }
+
     const execute = async () => {
+        onRequestCallback();
         pending.value = true;
         error.value = undefined;
         try {
@@ -49,12 +60,21 @@ export function useCustomFetch<T>(url: NitroFetchRequest, getHeaders: () => Reco
     }
 
     if (options?.watchProps) {
-        watch(options.watchProps, () => {
+
+        const watchStop = watch(options.watchProps, () => {
             execute();
         });
+
+        const key = options?.watchKey || `${url}`;
+        if (watchStopHandles[key]) watchStopHandles[key]();
+        watchStopHandles[key] = watchStop;
+
+        console.log('Watchers:', Object.keys(watchStopHandles).length);
+
+
     }
 
     const refresh = execute;
 
-    return { pending, execute, data, error, refresh, onResponse };
+    return { pending, execute, data, error, refresh, onResponse, onRequest };
 }

dashboard/composables/useDataService.ts

@@ -167,4 +167,3 @@ export function useDevicesData(limit: number = 10) {
     );
     return res;
 }
-