Fix all messages / audit view not loading data when selected

src/Frontend/src/composables/useAuditStoreAutoRefresh.ts

@@ -1,10 +1,6 @@
 import { useAuditStore } from "@/stores/AuditStore";
 import { useStoreAutoRefresh } from "./useAutoRefresh";
 
-// Override the refresh method to use checkForSuccessfulMessages, which is more lightweight
-const useAuditStoreWithRefresh = () => {
-  const store = useAuditStore();
-  return Object.assign(store, { refresh: store.checkForSuccessfulMessages });
-};
-
-export default useStoreAutoRefresh("auditStoreSuccessfulMessages", useAuditStoreWithRefresh, 5000).autoRefresh;
+// Use checkForSuccessfulMessages for auto-refresh (lightweight) via customRefresh
+// instead of mutating the store's refresh method, which would break AuditList's full fetch
+export default useStoreAutoRefresh("auditStoreSuccessfulMessages", useAuditStore, 5000, (store) => store.checkForSuccessfulMessages()).autoRefresh;

src/Frontend/src/composables/useAutoRefresh.ts

@@ -21,14 +21,15 @@ function useAutoRefresh(name: string, refresh: () => Promise<void>, intervalMs:
  * @param name - Name for logging purposes
  * @param useStore - Function that returns the Pinia store (called within component lifecycle)
  * @param intervalMs - Refresh interval in milliseconds
+ * @param customRefresh - Optional custom refresh function. When provided, this is called instead of store.refresh() during auto-refresh, avoiding the need to mutate the store.
  * @returns A composable function that sets up auto-refresh and returns the store. Also provides a method to update the refresh interval and a ref indicating when a refresh is happening
  */
-export function useStoreAutoRefresh<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, customRefresh?: (store: TStore) => Promise<void>) {
   const refresh = () => {
     if (!store) {
       return Promise.resolve();
     }
-    return store.refresh();
+    return customRefresh ? customRefresh(store) : store.refresh();
   };
   let store: TStore | null = null;
   const { refresh: autoRefresh, isRefreshing, updateInterval } = useAutoRefresh(name, refresh, intervalMs);