[#604] GA Display: search, sort and filter is not kept after Back fro…

…m Item details

govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx

@@ -6,9 +6,8 @@ import {
   GOVERNANCE_ACTIONS_FILTERS,
   GOVERNANCE_ACTIONS_SORTING,
 } from "@consts";
-import { useCardano } from "@context";
+import { useCardano, useDataActionsBar } from "@context";
 import {
-  useDataActionsBar,
   useGetProposalsQuery,
   useGetVoterInfo,
   useScreenDimension,

govtool/frontend/src/context/contextProviders.tsx

@@ -1,6 +1,7 @@
 import { CardanoProvider, useCardano } from "./wallet";
 import { ModalProvider, useModal } from "./modal";
 import { SnackbarProvider, useSnackbar } from "./snackbar";
+import { DataActionsBarProvider } from "./dataActionsBar";
 
 interface Props {
   children: React.ReactNode;
@@ -9,7 +10,9 @@ interface Props {
 const ContextProviders = ({ children }: Props) => (
   <ModalProvider>
     <SnackbarProvider>
-      <CardanoProvider>{children}</CardanoProvider>
+      <DataActionsBarProvider>
+        <CardanoProvider>{children}</CardanoProvider>
+      </DataActionsBarProvider>
     </SnackbarProvider>
   </ModalProvider>
 );

govtool/frontend/src/context/dataActionsBar.tsx

@@ -0,0 +1,131 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  FC,
+} from "react";
+import { useLocation } from "react-router-dom";
+
+import { useDebounce } from "@hooks";
+
+interface DataActionsBarContextType {
+  chosenFilters: string[];
+  chosenFiltersLength: number;
+  chosenSorting: string;
+  closeFilters: () => void;
+  closeSorts: () => void;
+  debouncedSearchText: string;
+  filtersOpen: boolean;
+  searchText: string;
+  setChosenFilters: Dispatch<SetStateAction<string[]>>;
+  setChosenSorting: Dispatch<SetStateAction<string>>;
+  setFiltersOpen: Dispatch<SetStateAction<boolean>>;
+  setSearchText: Dispatch<SetStateAction<string>>;
+  setSortOpen: Dispatch<SetStateAction<boolean>>;
+  sortingActive: boolean;
+  sortOpen: boolean;
+  updateLastPath: (path: string) => void;
+}
+
+const DataActionsBarContext = createContext<
+  DataActionsBarContextType | undefined
+>(undefined);
+DataActionsBarContext.displayName = "DataActionsBarContext";
+
+interface ProviderProps {
+  children: React.ReactNode;
+}
+
+const DataActionsBarProvider: FC<ProviderProps> = ({ children }) => {
+  const [searchText, setSearchText] = useState<string>("");
+  const debouncedSearchText = useDebounce(searchText, 300);
+  const [filtersOpen, setFiltersOpen] = useState<boolean>(false);
+  const [chosenFilters, setChosenFilters] = useState<string[]>([]);
+  const [sortOpen, setSortOpen] = useState<boolean>(false);
+  const [chosenSorting, setChosenSorting] = useState<string>("");
+  const [lastPath, setLastPath] = useState<string>("");
+
+  const { pathname } = useLocation();
+
+  const closeFilters = useCallback(() => {
+    setFiltersOpen(false);
+  }, []);
+
+  const closeSorts = useCallback(() => {
+    setSortOpen(false);
+  }, []);
+
+  const updateLastPath = useCallback((path: string) => {
+    setLastPath(path);
+  }, []);
+
+  const resetState = useCallback(() => {
+    setSearchText("");
+    setChosenFilters([]);
+    setChosenSorting("");
+  }, []);
+
+  useEffect(() => {
+    if (lastPath && pathname !== lastPath && !pathname.startsWith(lastPath)) {
+      resetState();
+    }
+  }, [pathname, lastPath, resetState]);
+
+  useEffect(() => {
+    setLastPath(pathname);
+  }, [searchText, chosenFilters, chosenSorting]);
+
+  const contextValue = useMemo(
+    () => ({
+      chosenFilters,
+      chosenFiltersLength: chosenFilters.length,
+      chosenSorting,
+      closeFilters,
+      closeSorts,
+      debouncedSearchText,
+      filtersOpen,
+      searchText,
+      setChosenFilters,
+      setChosenSorting,
+      setFiltersOpen,
+      setSearchText,
+      setSortOpen,
+      sortingActive: Boolean(chosenSorting),
+      sortOpen,
+      updateLastPath,
+    }),
+    [
+      chosenFilters,
+      chosenSorting,
+      debouncedSearchText,
+      filtersOpen,
+      searchText,
+      sortOpen,
+      closeFilters,
+      closeSorts,
+    ],
+  );
+
+  return (
+    <DataActionsBarContext.Provider value={contextValue}>
+      {children}
+    </DataActionsBarContext.Provider>
+  );
+};
+
+function useDataActionsBar() {
+  const context = useContext(DataActionsBarContext);
+  if (!context) {
+    throw new Error(
+      "useDataActionsBar must be used within a DataActionsBarProvider",
+    );
+  }
+  return context;
+}
+
+export { DataActionsBarProvider, useDataActionsBar };

govtool/frontend/src/context/index.ts

@@ -1,4 +1,5 @@
 export * from "./contextProviders";
+export * from "./dataActionsBar";
 export * from "./modal";
 export * from "./pendingTransaction";
 export * from "./snackbar";