[cueweb] Fix autoload and caching (#1623)

- Fixed autoload user jobs by not including finished user jobs
- Added a reinitialization of data table state values on re-mount using
local storage values

Author: Zach-Fong

cueweb/app/jobs/data-table.tsx

@@ -122,22 +122,24 @@ const initialColumnVisibility = {
   maxRss: false,
 }
 
-// Initial state
-const initialState: State = {
-  autoloadMine: getItemFromLocalStorage("autoloadMine", "true"),
-  tableData: getItemFromLocalStorage("tableData", "[]"),
-  tableDataUnfiltered: getItemFromLocalStorage("tableDataUnfiltered", "[]"),
-  sorting: getItemFromLocalStorage("sorting", "[]"),
-  columnFilters: getItemFromLocalStorage("columnFilters", "[]"),
-  stateSelectValue: getItemFromLocalStorage("stateSelectValue", JSON.stringify("All States")),
-  jobSearchResults: [],
-  filteredJobSearchResults: [],
-  searchQuery: "",
-  apiQuery: "",
-  rowSelection: {},
-  columnVisibility: getItemFromLocalStorage("columnVisibility", JSON.stringify(initialColumnVisibility)),
-  error: null,
-  username: UNKNOWN_USER,
+// The initial state of the data table on remount using local storage to preserve states
+function getInitialState(): State {
+  return {
+    autoloadMine: getItemFromLocalStorage("autoloadMine", "true"),
+    tableData: getItemFromLocalStorage("tableData", "[]"),
+    tableDataUnfiltered: getItemFromLocalStorage("tableDataUnfiltered", "[]"),
+    sorting: getItemFromLocalStorage("sorting", "[]"),
+    columnFilters: getItemFromLocalStorage("columnFilters", "[]"),
+    stateSelectValue: getItemFromLocalStorage("stateSelectValue", JSON.stringify("All States")),
+    jobSearchResults: [],
+    filteredJobSearchResults: [],
+    searchQuery: "",
+    apiQuery: "",
+    rowSelection: {},
+    columnVisibility: getItemFromLocalStorage("columnVisibility", JSON.stringify(initialColumnVisibility)),
+    error: null,
+    username: UNKNOWN_USER,
+  }
 };
 
 // Reducer function
@@ -174,10 +176,10 @@ function reducer(state: State, action: Action): State {
     case "RESET_COLUMN_VISIBILITY":
       return {
         ...state,
-        columnVisibility: initialState.columnVisibility,
+        columnVisibility: initialColumnVisibility,
       };
     case "RESET_STATE":
-      return initialState;
+      return getInitialState();
     default:
       return state;
   }
@@ -215,7 +217,11 @@ export function DataTable({ columns, username }: DataTableProps) {
   const { theme, setTheme } = useTheme();
 
   // useReducer hook to manage state
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const [state, dispatch] = useReducer(reducer, getInitialState());
+
+  useEffect(() => {
+    dispatch({ type: "RESET_STATE"});
+  }, []);
 
   useEffect(() => {
     addUsersJobs();
@@ -380,17 +386,16 @@ export function DataTable({ columns, username }: DataTableProps) {
           // Filter out any of the old data in the data table which no longer exists (has been finished for over 48 hours)
           updatedTableDataUnfiltered = updatedTableDataUnfiltered.filter((oldJob: Job) => newData.some((newJob: Job) => oldJob.id === newJob.id));
           updatedTableData = updatedTableData.filter((oldJob: Job) => newData.some((newJob: Job) => oldJob.id === newJob.id));
-
           // Update table data as both a variable and in local storage
           dispatch({ type: "SET_TABLE_DATA_UNFILTERED", payload: updatedTableDataUnfiltered });
           dispatch({ type: "SET_TABLE_DATA", payload: updatedTableData });
         }
       };
 
       // Trigger table updates every 5000ms
-      interval = setInterval(() => {
+      interval = setInterval(async () => {
         updateData();
-        addUsersJobs();
+        await addUsersJobs();
       }, 5000);
     } catch (error) {
       handleError(error, "Error updating table");
@@ -633,9 +638,14 @@ export function DataTable({ columns, username }: DataTableProps) {
     const jobsToAdd = userJobs.filter(userJob => {
       return !state.tableData.some(existingJob => existingJob.name === userJob.name)
     });
-    
-    dispatch({ type: "SET_TABLE_DATA", payload: [...state.tableDataUnfiltered, ...jobsToAddUnfiltered] });
-    dispatch({ type: "SET_TABLE_DATA_UNFILTERED", payload: [...state.tableData, ...jobsToAdd] });
+
+    if (jobsToAddUnfiltered.length > 0) {
+      dispatch({ type: "SET_TABLE_DATA", payload: [...state.tableDataUnfiltered, ...jobsToAddUnfiltered] });
+    }
+
+    if (jobsToAdd.length > 0) {
+      dispatch({ type: "SET_TABLE_DATA_UNFILTERED", payload: [...state.tableData, ...jobsToAdd] });
+    }
   };
 
   const handleStateFiltering = (stateFilter: string) => {

cueweb/app/utils/get_utils.ts

@@ -45,7 +45,7 @@ export async function getLayers(body: string): Promise<Layer[]> {
 
 // Fetch jobs for a specific user, including finished jobs
 export async function getJobsForUser(user: string): Promise<Job[]> {
-    const body = { r: { include_finished: true, users: [`${user}`] } };
+    const body = { r: { include_finished: false, users: [`${user}`] } };
     return await getJobs(JSON.stringify(body));
 }