From 81558d9f5a4897d483a31ff2150c9d1939f9f5c0 Mon Sep 17 00:00:00 2001
From: Joonas Nivala <joonas.nivala@csc.fi>
Date: Wed, 11 Jun 2025 15:57:29 +0300
Subject: [PATCH] store search results/query/filters to local storage for
 30mins

---
 src/components/SiteSearch.jsx | 53 +++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/components/SiteSearch.jsx b/src/components/SiteSearch.jsx
index 274727bc2f5e..c51e541790d9 100644
--- a/src/components/SiteSearch.jsx
+++ b/src/components/SiteSearch.jsx
@@ -121,14 +121,17 @@ function capitalizeFirstLetter(val) {
   return String(val).charAt(0).toUpperCase() + String(val).slice(1);
 }
 
-const SearchBar = ({ setResults }) => {
-  const [query, setQuery] = useState("");
-
+const SearchBar = ({ setResults, setQuery, query }) => {
   const handleSearchBar = (e) => {
     const input = e.target.value;
     setQuery(input);
   };
 
+  const handleClose = () => {
+    setQuery("");
+    setResults({ general: [], blogs: [], events: [] });
+  }
+
   const handleSubmit = (event) => {
     event.preventDefault();
     const input = query;
@@ -146,7 +149,7 @@ const SearchBar = ({ setResults }) => {
       <form onSubmit={handleSubmit} className='pb-[1px] w-full mr-3'>
         <input onChange={handleSearchBar} className="w-full focus:outline-none" placeholder="Search..." type="text" id="search-box" name="query" value={query} />
       </form>
-      <CIcon className='mx-3 self-center text-on-white' onClick={() => setQuery("")} path={mdiClose} />
+      <CIcon className='mx-3 self-center text-on-white' onClick={() => handleClose()} path={mdiClose} />
       <CButton onClick={handleSubmit} className='mr-3' style={style} ghost>Search</CButton>
     </div>
   )
@@ -246,6 +249,26 @@ const FilterModal = ({ isModalOpen, setIsModalOpen, filters, handleCheckboxChang
   )
 };
 
+function setLocalStorageState(key, value, minutes) {
+  const expires = Date.now() + minutes * 60 * 1000;
+  localStorage.setItem(key, JSON.stringify({ value, expires }));
+}
+
+function getLocalStorageState(key) {
+  const item = localStorage.getItem(key);
+  if (!item) return null;
+  try {
+    const { value, expires } = JSON.parse(item);
+    if (Date.now() > expires) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    return value;
+  } catch {
+    return null;
+  }
+}
+
 export const SiteSearch = () => {
 
   const [isModalOpen, setIsModalOpen] = useState(false); //modal control
@@ -281,6 +304,8 @@ export const SiteSearch = () => {
     pageSizes: [5, 10, 15, 25, 50]
   });
 
+  const [query, setQuery] = useState("");
+
   useEffect(() => {
     document.body.classList.add("min-w-fit")
   })
@@ -304,6 +329,24 @@ export const SiteSearch = () => {
     setOptionsEvent(prev => ({ ...prev, itemCount: results.events.length }));
   }, [results]);
 
+  // Try to load from localStorage on mount
+  useEffect(() => {
+    const state = getLocalStorageState('siteSearchState');
+    if (state && state.query !== undefined && state.filters) {
+      setFilters(state.filters);
+      setQuery(state.query);
+      if (state.query && state.query.trim() !== "") {
+        const searchResults = searchContent(state.query, STORE);
+        setResults(searchResults);
+      }
+    }
+  }, []);
+
+  // Save to localStorage on query or filter change
+  useEffect(() => {
+    setLocalStorageState('siteSearchState', { query, filters }, 30);
+  }, [query, filters]);
+
   const handleCheckboxChange = useCallback((option) => {
     handleFilterChange({
       ...filters,
@@ -366,7 +409,7 @@ export const SiteSearch = () => {
 
       <div className='mt-24 col-span-5 lg:col-span-3'>
         <div className='mb-2 lg:mb-20 border-2 border-on-white min-h-[45px] flex flex-row items-center text-lg'>
-          <SearchBar setResults={setResults} />
+          <SearchBar setResults={setResults} setQuery={setQuery} query={query} />
         </div>
         <div>
           <CButton