Merge pull request #758 from IntersectMBO/604-bt-ga-display-searching…

…-sort-order-and-filtering-is-not-kept-after-back-from-item-details-planned-to-next-iter

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

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,137 @@
+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;
+}
+
+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 resetState = useCallback(() => {
+    setSearchText("");
+    setChosenFilters([]);
+    setChosenSorting("");
+  }, []);
+
+  const userMovedToDifferentAppArea =
+    pathname !== lastPath && !pathname.startsWith(lastPath);
+  const userOpenedGADetailsFromCategoryPage =
+    lastPath.includes("governance_actions/category") &&
+    pathname.includes("governance_actions/");
+  const userMovedFromGAListToCategoryPage =
+    lastPath.endsWith("governance_actions") &&
+    pathname.includes("governance_actions/category");
+
+  useEffect(() => {
+    if (
+      (userMovedToDifferentAppArea && !userOpenedGADetailsFromCategoryPage) ||
+      userMovedFromGAListToCategoryPage
+    ) {
+      resetState();
+    }
+  }, [pathname, 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,
+    }),
+    [
+      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";

govtool/frontend/src/hooks/index.ts

@@ -1,6 +1,5 @@
 export { useTranslation } from "react-i18next";
 
-export * from "./useDataActionsBar";
 export * from "./useDebounce";
 export * from "./useDelegateToDrep";
 export * from "./useFetchNextPageDetector";

govtool/frontend/src/pages/DRepDirectoryContent.tsx

@@ -4,9 +4,8 @@ import { Box, CircularProgress } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { DREP_DIRECTORY_FILTERS, DREP_DIRECTORY_SORTING } from "@consts";
-import { useCardano } from "@context";
+import { useCardano, useDataActionsBar } from "@context";
 import {
-  useDataActionsBar,
   useDelegateTodRep,
   useGetAdaHolderCurrentDelegationQuery,
   useGetAdaHolderVotingPowerQuery,
@@ -44,7 +43,7 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
 
   const { delegate, isDelegating } = useDelegateTodRep();
 
-  const { votingPower } = useGetAdaHolderVotingPowerQuery();
+  const { votingPower } = useGetAdaHolderVotingPowerQuery(stakeKey);
   const { currentDelegation } = useGetAdaHolderCurrentDelegationQuery(stakeKey);
   const inProgressDelegation = pendingTransaction.delegate?.resourceId;
 

govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx

@@ -4,14 +4,13 @@ import { Box, CircularProgress, Link } from "@mui/material";
 
 import { Background, Typography } from "@atoms";
 import { GOVERNANCE_ACTIONS_SORTING, ICONS, PATHS } from "@consts";
-import { useCardano } from "@context";
+import { useCardano, useDataActionsBar } from "@context";
 import {
   DataActionsBar,
   EmptyStateGovernanceActionsCategory,
   GovernanceActionCard,
 } from "@molecules";
 import {
-  useDataActionsBar,
   useFetchNextPageDetector,
   useGetProposalsInfiniteQuery,
   useGetVoterInfo,

govtool/frontend/src/pages/GovernanceActions.tsx

@@ -8,9 +8,8 @@ import {
   GOVERNANCE_ACTIONS_SORTING,
   PATHS,
 } from "@consts";
-import { useCardano } from "@context";
+import { useCardano, useDataActionsBar } from "@context";
 import {
-  useDataActionsBar,
   useGetProposalsQuery,
   useScreenDimension,
   useTranslation,

govtool/frontend/src/pages/GovernanceActionsCategory.tsx

@@ -4,7 +4,7 @@ import { Box, CircularProgress, Link } from "@mui/material";
 
 import { Background, Typography } from "@atoms";
 import { GOVERNANCE_ACTIONS_SORTING, ICONS, PATHS } from "@consts";
-import { useCardano } from "@context";
+import { useCardano, useDataActionsBar } from "@context";
 import {
   DataActionsBar,
   EmptyStateGovernanceActionsCategory,
@@ -18,7 +18,6 @@ import {
   useScreenDimension,
   useTranslation,
   useGetVoterInfo,
-  useDataActionsBar,
 } from "@hooks";
 import {
   WALLET_LS_KEY,