Changes based on review feedback

Author: johnsimons

src/Frontend/src/components/audit/AuditList.vue

@@ -8,14 +8,14 @@ import AuditListItem from "@/components/audit/AuditListItem.vue";
 import { onBeforeMount, ref, watch } from "vue";
 import RefreshConfig from "../RefreshConfig.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import createAutoRefresh from "@/composables/autoRefresh";
+import useFetchWithAutoRefresh from "@/composables/autoRefresh";
 
 const store = useAuditStore();
 const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
-const { refreshNow, isRefreshing, updateInterval, start, stop } = createAutoRefresh("audit-list", store.refresh, 3000);
+const { refreshNow, isRefreshing, updateInterval, start, stop } = useFetchWithAutoRefresh("audit-list", store.refresh, 3000);
 const firstLoad = ref(true);
 
 onBeforeMount(() => {

src/Frontend/src/composables/autoRefresh.ts

@@ -1,12 +1,15 @@
 import { watch, ref, shallowReadonly, type WatchStopHandle } from "vue";
-import { useDocumentVisibility, useTimeoutPoll } from "@vueuse/core";
+import { useCounter, useDocumentVisibility, useTimeoutPoll } from "@vueuse/core";
 
-export default function createAutoRefresh(name: string, fetch: () => Promise<void>, intervalMs: number) {
-  let refCount = 0;
+export default function useFetchWithAutoRefresh(name: string, fetch: () => Promise<void>, intervalMs: number) {
   let watchStop: WatchStopHandle | null = null;
+  const { count, inc, dec, reset } = useCounter(0);
   const interval = ref(intervalMs);
   const isRefreshing = ref(false);
   const fetchWrapper = async () => {
+    if (isRefreshing.value) {
+      return;
+    }
     isRefreshing.value = true;
     await fetch();
     isRefreshing.value = false;
@@ -20,8 +23,8 @@ export default function createAutoRefresh(name: string, fetch: () => Promise<voi
   const visibility = useDocumentVisibility();
 
   const start = async () => {
-    refCount++;
-    if (refCount === 1) {
+    inc();
+    if (count.value === 1) {
       console.debug(`[AutoRefresh] Starting auto-refresh for ${name} every ${interval.value}ms`);
       resume();
       watchStop = watch(visibility, (current, previous) => {
@@ -36,22 +39,22 @@ export default function createAutoRefresh(name: string, fetch: () => Promise<voi
         }
       });
     } else {
-      console.debug(`[AutoRefresh] Incremented refCount for ${name} to ${refCount}`);
+      console.debug(`[AutoRefresh] Incremented refCount for ${name} to ${count.value}`);
       // Because another component has started using the auto-refresh, do an immediate refresh to ensure it has up-to-date data
       await fetchWrapper();
     }
   };
 
   const stop = () => {
-    refCount--;
-    if (refCount <= 0) {
+    dec();
+    if (count.value <= 0) {
       console.debug(`[AutoRefresh] Stopping auto-refresh for ${name}`);
       pause();
       watchStop?.();
       watchStop = null;
-      refCount = 0;
+      reset();
     } else {
-      console.debug(`[AutoRefresh] Decremented refCount for ${name} to ${refCount}`);
+      console.debug(`[AutoRefresh] Decremented refCount for ${name} to ${count.value}`);
     }
   };
 

src/Frontend/src/composables/useAutoRefresh.ts

@@ -1,8 +1,8 @@
 import { onMounted, onUnmounted } from "vue";
-import createAutoRefresh from "./autoRefresh";
+import useFetchWithAutoRefresh from "./autoRefresh";
 
 export function useAutoRefresh(name: string, refresh: () => Promise<void>, intervalMs: number) {
-  const { start, stop } = createAutoRefresh(name, refresh, intervalMs);
+  const { start, stop } = useFetchWithAutoRefresh(name, refresh, intervalMs);
 
   function useAutoRefresh() {
     onMounted(start);
@@ -22,7 +22,7 @@ export function useAutoRefresh(name: string, refresh: () => Promise<void>, inter
  * @param intervalMs - Refresh interval in milliseconds
  * @returns A composable function that sets up auto-refresh and returns the store
  */
-export function createStoreAutoRefresh<TStore extends { refresh: () => Promise<void> }>(name: string, useStore: () => TStore, intervalMs: number) {
+export function useStoreAutoRefresh<TStore extends { refresh: () => Promise<void> }>(name: string, useStore: () => TStore, intervalMs: number) {
   const refresh = () => {
     if (!store) {
       return Promise.resolve();

src/Frontend/src/composables/useCustomChecksStoreAutoRefresh.ts

@@ -1,4 +1,4 @@
 import { useCustomChecksStore } from "@/stores/CustomChecksStore";
-import { createStoreAutoRefresh } from "./useAutoRefresh";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default createStoreAutoRefresh("customChecks", useCustomChecksStore, 5000);
+export default useStoreAutoRefresh("customChecks", useCustomChecksStore, 5000);

src/Frontend/src/composables/useHeartbeatInstancesStoreAutoRefresh.ts

@@ -1,4 +1,4 @@
 import { useHeartbeatInstancesStore } from "@/stores/HeartbeatInstancesStore";
-import { createStoreAutoRefresh } from "./useAutoRefresh";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default createStoreAutoRefresh("heartbeatInstances", useHeartbeatInstancesStore, 5000);
+export default useStoreAutoRefresh("heartbeatInstances", useHeartbeatInstancesStore, 5000);

src/Frontend/src/composables/useHeartbeatsStoreAutoRefresh.ts

@@ -1,4 +1,4 @@
 import { useHeartbeatsStore } from "@/stores/HeartbeatsStore";
-import { createStoreAutoRefresh } from "./useAutoRefresh";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default createStoreAutoRefresh("heartbeats", useHeartbeatsStore, 5000);
+export default useStoreAutoRefresh("heartbeats", useHeartbeatsStore, 5000);

src/Frontend/src/composables/useThroughputStoreAutoRefresh.ts

@@ -1,4 +1,4 @@
 import { useThroughputStore } from "@/stores/ThroughputStore";
-import { createStoreAutoRefresh } from "./useAutoRefresh";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-export default createStoreAutoRefresh("throughput", useThroughputStore, 60 * 60 * 1000 /* 1 hour */);
+export default useStoreAutoRefresh("throughput", useThroughputStore, 60 * 60 * 1000 /* 1 hour */);

src/Frontend/src/stores/CustomChecksStore.ts

@@ -11,7 +11,7 @@ export const useCustomChecksStore = defineStore("CustomChecksStore", () => {
   const failingCount = ref(0);
   const failedChecks = ref<CustomCheck[]>([]);
 
-  const { count, inc, dec } = useCounter();
+  const { count, inc, dec } = useCounter(0);
   const skipRefresh = computed(() => count.value > 0);
 
   const refresh = async () => {