chore(frontend): search parameters adjustments

shini4i · May 9, 2024 · 6a6fac0 · 6a6fac0
1 parent af2cb29
commit 6a6fac0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/web/src/Components/HistoryTasks.js b/web/src/Components/HistoryTasks.js
@@ -54,12 +54,19 @@ function HistoryTasks() {
   );
 
   const updateSearchParameters = (start, end, application, page) => {
-    setSearchParams({
-      app: application ?? '',
-      start: Math.floor(start.getTime() / 1000),
-      end: Math.floor(end.getTime() / 1000),
-      page,
-    });
+    application ?
+      setSearchParams({
+        app: application ?? '',
+        start: Math.floor(start.getTime() / 1000),
+        end: Math.floor(end.getTime() / 1000),
+        page,
+      })
+      :
+      setSearchParams({
+        start: Math.floor(start.getTime() / 1000),
+        end: Math.floor(end.getTime() / 1000),
+        page,
+      });
   };
 
   const refreshWithFilters = (start, end, application, page) => {

diff --git a/web/src/Components/RecentTasks.js b/web/src/Components/RecentTasks.js
@@ -9,7 +9,7 @@ import {
   MenuItem,
   Select,
   Stack,
-  Typography
+  Typography,
 } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 
@@ -34,8 +34,9 @@ function RecentTasks() {
   });
 
   const [currentAutoRefresh, setCurrentAutoRefresh] = useState(
-    searchParams.get('refresh') ?? autoRefreshIntervals['30s'],
+    () => localStorage.getItem('refresh') || autoRefreshIntervals['30s'],
   );
+
   const autoRefreshIntervalRef = useRef(null);
   const [currentApplication, setCurrentApplication] = useState(
     searchParams.get('app') ?? null,
@@ -45,12 +46,16 @@ function RecentTasks() {
     searchParams.get('page') ? Number(searchParams.get('page')) : 1,
   );
 
-  const updateSearchParameters = (application, refresh, page) => {
-    setSearchParams({
-      app: application ?? '',
-      refresh,
-      page,
-    });
+  const updateSearchParameters = (application, page) => {
+    application ?
+      setSearchParams({
+        app: application,
+        page,
+      })
+      :
+      setSearchParams({
+        page,
+      });
   };
 
   // Initial load
@@ -60,9 +65,13 @@ function RecentTasks() {
     // Current page is reset to the first one
     setCurrentPage(1);
     // Save search parameters - application name and auto-refresh interval - to Local Storage for preservation across sessions
-    updateSearchParameters(currentApplication, currentAutoRefresh, currentPage);
+    updateSearchParameters(currentApplication, currentPage);
   }, []);
 
+  useEffect(() => {
+    localStorage.setItem('refresh', currentAutoRefresh.toString());
+  }, [currentAutoRefresh]);
+
   // Reset the interval on any state change (because we use the state variables for data retrieval)
   useEffect(() => {
     // Reset the current interval
@@ -93,7 +102,7 @@ function RecentTasks() {
     // Change the value
     setCurrentAutoRefresh(event.target.value);
     // Save to URL
-    updateSearchParameters(currentApplication, event.target.value, 1);
+    updateSearchParameters(currentApplication, 1);
   };
 
   return (
@@ -129,7 +138,7 @@ function RecentTasks() {
                 // Reset page
                 setCurrentPage(1);
                 // Update URL
-                updateSearchParameters(value, currentAutoRefresh, 1);
+                updateSearchParameters(value, 1);
               }}
               setError={setError}
               setSuccess={setSuccess}
@@ -167,7 +176,6 @@ function RecentTasks() {
                 setCurrentPage(1);
                 updateSearchParameters(
                   currentApplication,
-                  currentAutoRefresh,
                   1,
                 );
               }}
@@ -189,7 +197,6 @@ function RecentTasks() {
             setCurrentPage(page);
             updateSearchParameters(
               currentApplication,
-              currentAutoRefresh,
               page,
             );
           }}