Merge pull request #3332 from yujiiroo/humble-devel

Save search bar and filter state using sessionStorage (fixes #3257)

Author: javizqh

react_frontend/src/components/buttons/Search.tsx

@@ -11,8 +11,13 @@ import {
   MenuItem,
 } from "@mui/material";
 import { useHomepage } from "Contexts/HomepageContext";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useAcademyTheme } from "Contexts/AcademyThemeContext";
+import { Filters } from "src/types/exercises";
+
+// SessionStorage keys
+const FILTER_STORAGE_KEY = "ra_home_filters_v1";
+const SEARCH_STORAGE_KEY = "ra_home_search_v1";
 
 // Estilos
 const Search = styled("div")(({ roundness }: { roundness: number }) => ({
@@ -85,13 +90,67 @@ const StyledMenu = styled(Menu)(
   })
 );
 
-// Componente FilterMenu
+// Filter persistence structure
+type FilterState = {
+  tags: boolean;
+  description: boolean;
+  status: boolean;
+};
+
+const DEFAULT_FILTER_STATE: FilterState = {
+  tags: true,
+  description: false,
+  status: false,
+};
+
+const filtersFromState = (state: FilterState): Filters[] => {
+  const list: Filters[] = ["name"]; // name is always active
+  if (state.tags) list.push("tags");
+  if (state.description) list.push("description");
+  if (state.status) list.push("status");
+  return list;
+};
+
 const FilterMenu = () => {
-  const { appendFilterItem } = useHomepage();
+  const { appendFilterItem, setFilterItemsList } = useHomepage();
   const theme = useAcademyTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open: boolean = Boolean(anchorEl);
 
+  const [filterState, setFilterState] =
+    useState<FilterState>(DEFAULT_FILTER_STATE);
+
+  // Restore session filter state
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    try {
+      const raw = window.sessionStorage.getItem(FILTER_STORAGE_KEY);
+      if (!raw) return;
+
+      const parsed = JSON.parse(raw) as Partial<FilterState>;
+      const persisted: FilterState = {
+        tags:
+          typeof parsed.tags === "boolean"
+            ? parsed.tags
+            : DEFAULT_FILTER_STATE.tags,
+        description:
+          typeof parsed.description === "boolean"
+            ? parsed.description
+            : DEFAULT_FILTER_STATE.description,
+        status:
+          typeof parsed.status === "boolean"
+            ? parsed.status
+            : DEFAULT_FILTER_STATE.status,
+      };
+
+      setFilterState(persisted);
+      setFilterItemsList(filtersFromState(persisted));
+    } catch (err) {
+      console.error("Failed to restore filter state", err);
+    }
+  }, [setFilterItemsList]);
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -100,9 +159,31 @@ const FilterMenu = () => {
     setAnchorEl(null);
   };
 
-  const handleFilterList = (e: any) => {
-    const item = e.target.name;
-    appendFilterItem(item);
+  // Toggle and persist filter values
+  const handleFilterCheckboxChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const name = e.target.name as keyof FilterState;
+
+    setFilterState((prev) => {
+      const updated: FilterState = {
+        ...prev,
+        [name]: !prev[name],
+      };
+
+      try {
+        window.sessionStorage.setItem(
+          FILTER_STORAGE_KEY,
+          JSON.stringify(updated)
+        );
+      } catch (err) {
+        console.error("Failed to save filter state", err);
+      }
+
+      return updated;
+    });
+
+    appendFilterItem(name as Filters);
   };
 
   return (
@@ -127,44 +208,77 @@ const FilterMenu = () => {
         checkboxColor={theme.palette.text!}
         roundness={theme.roundness!}
       >
+        {/* Name always active and not persisted */}
         <MenuItem>
           <Checkbox defaultChecked disabled size="small" name="name" />
           Name
         </MenuItem>
         <MenuItem>
           <Checkbox
-            defaultChecked
             size="small"
-            onClick={handleFilterList}
             name="tags"
+            checked={filterState.tags}
+            onChange={handleFilterCheckboxChange}
           />
           Tags
         </MenuItem>
         <MenuItem>
           <Checkbox
             size="small"
-            onClick={handleFilterList}
             name="description"
+            checked={filterState.description}
+            onChange={handleFilterCheckboxChange}
           />
           Description
         </MenuItem>
         <MenuItem>
-          <Checkbox size="small" onClick={handleFilterList} name="status" />
+          <Checkbox
+            size="small"
+            name="status"
+            checked={filterState.status}
+            onChange={handleFilterCheckboxChange}
+          />
           Status
         </MenuItem>
       </StyledMenu>
     </>
   );
 };
 
-// Componente principal SearchBar
 const SearchBar = () => {
   const { setSearchBarText } = useHomepage();
   const theme = useAcademyTheme();
 
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  // Restore session search text
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    try {
+      const saved = window.sessionStorage.getItem(SEARCH_STORAGE_KEY);
+      if (saved) {
+        setSearchValue(saved);
+        setSearchBarText(saved.toLowerCase());
+      }
+    } catch (err) {
+      console.error("Failed to restore search text", err);
+    }
+  }, [setSearchBarText]);
+
+  // Update sessionStorage + context
   const inputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const lowerCase = e.target.value.toLowerCase();
+    const value = e.target.value;
+    setSearchValue(value);
+
+    const lowerCase = value.toLowerCase();
     setSearchBarText(lowerCase);
+
+    try {
+      window.sessionStorage.setItem(SEARCH_STORAGE_KEY, value);
+    } catch (err) {
+      console.error("Failed to save search text", err);
+    }
   };
 
   return (
@@ -181,6 +295,7 @@ const SearchBar = () => {
         </SearchIconWrapper>
         <StyledInputBase
           placeholder="Search…"
+          value={searchValue}
           onChange={inputHandler}
           textColor={theme.palette.text!}
           inputProps={{ "aria-label": "search" }}
@@ -192,3 +307,4 @@ const SearchBar = () => {
 };
 
 export default SearchBar;
+

react_frontend/src/contexts/HomepageContext.tsx

@@ -7,17 +7,15 @@ export interface HomepageContextType {
   setSearchBarText: (text: string) => void;
   appendFilterItem: (item: Filters) => void;
   getFilterItemsList: () => Filters[];
+  setFilterItemsList: (items: Filters[]) => void;
 }
 
 const HomepageContext = createContext<HomepageContextType>({
-  getSearchBarText: () => {
-    return "";
-  },
+  getSearchBarText: () => "",
   setSearchBarText: () => {},
   appendFilterItem: () => {},
-  getFilterItemsList: () => {
-    return [];
-  },
+  getFilterItemsList: () => [],
+  setFilterItemsList: () => {},
 });
 
 export const useHomepage = () => useContext(HomepageContext);
@@ -34,12 +32,12 @@ export function HomepageProvider({ children }: { children?: ReactNode }) {
   const setSearchBarText = (text: string) => {
     setInputText(text);
   };
+
   const getFilterItemsList = () => filterItemsList;
+
   const appendFilterItem = (item: Filters) => {
-    setFilterItemsList(
-      filterItemsList.includes(item)
-        ? filterItemsList.filter((i) => i !== item)
-        : [...filterItemsList, item]
+    setFilterItemsList((prev) =>
+      prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
     );
   };
 
@@ -50,6 +48,7 @@ export function HomepageProvider({ children }: { children?: ReactNode }) {
         setSearchBarText,
         appendFilterItem,
         getFilterItemsList,
+        setFilterItemsList,
       }}
     >
       {children}
@@ -58,3 +57,4 @@ export function HomepageProvider({ children }: { children?: ReactNode }) {
 }
 
 export default HomepageContext;
+