From b0a378fec539da3f5eb34ebf0da11b6c525cde81 Mon Sep 17 00:00:00 2001 From: Jan Jaroszczak Date: Wed, 17 Apr 2024 16:14:21 +0200 Subject: [PATCH 1/4] [#604] GA Display: search, sort and filter is not kept after Back from Item details --- .../organisms/DashboardGovernanceActions.tsx | 3 +- .../frontend/src/context/contextProviders.tsx | 5 +- .../frontend/src/context/dataActionsBar.tsx | 125 ++++++++++++++++++ govtool/frontend/src/context/index.ts | 1 + 4 files changed, 131 insertions(+), 3 deletions(-) create mode 100644 govtool/frontend/src/context/dataActionsBar.tsx diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx index d931db1be..d2a2619e6 100644 --- a/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx +++ b/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, diff --git a/govtool/frontend/src/context/contextProviders.tsx b/govtool/frontend/src/context/contextProviders.tsx index 8dd95da9c..451beb2f0 100644 --- a/govtool/frontend/src/context/contextProviders.tsx +++ b/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) => ( - {children} + + {children} + ); diff --git a/govtool/frontend/src/context/dataActionsBar.tsx b/govtool/frontend/src/context/dataActionsBar.tsx new file mode 100644 index 000000000..ffb666e23 --- /dev/null +++ b/govtool/frontend/src/context/dataActionsBar.tsx @@ -0,0 +1,125 @@ +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>; + setChosenSorting: Dispatch>; + setFiltersOpen: Dispatch>; + setSearchText: Dispatch>; + setSortOpen: Dispatch>; + sortingActive: boolean; + sortOpen: boolean; +} + +const DataActionsBarContext = createContext< + DataActionsBarContextType | undefined +>(undefined); +DataActionsBarContext.displayName = "DataActionsBarContext"; + +interface ProviderProps { + children: React.ReactNode; +} + +const DataActionsBarProvider: FC = ({ children }) => { + const [searchText, setSearchText] = useState(""); + const debouncedSearchText = useDebounce(searchText, 300); + const [filtersOpen, setFiltersOpen] = useState(false); + const [chosenFilters, setChosenFilters] = useState([]); + const [sortOpen, setSortOpen] = useState(false); + const [chosenSorting, setChosenSorting] = useState(""); + const [lastPath, setLastPath] = useState(""); + + const { pathname } = useLocation(); + + const closeFilters = useCallback(() => { + setFiltersOpen(false); + }, []); + + const closeSorts = useCallback(() => { + setSortOpen(false); + }, []); + + 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, + }), + [ + chosenFilters, + chosenSorting, + debouncedSearchText, + filtersOpen, + searchText, + sortOpen, + closeFilters, + closeSorts, + ], + ); + + return ( + + {children} + + ); +}; + +function useDataActionsBar() { + const context = useContext(DataActionsBarContext); + if (!context) { + throw new Error( + "useDataActionsBar must be used within a DataActionsBarProvider", + ); + } + return context; +} + +export { DataActionsBarProvider, useDataActionsBar }; diff --git a/govtool/frontend/src/context/index.ts b/govtool/frontend/src/context/index.ts index 94d2bc0e7..3a67109b3 100644 --- a/govtool/frontend/src/context/index.ts +++ b/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"; From 48219eb323cc0935d1ed7af142c8f359dea6637d Mon Sep 17 00:00:00 2001 From: Jan Jaroszczak Date: Thu, 18 Apr 2024 15:22:09 +0200 Subject: [PATCH 2/4] [#604] Implementing dataActionsBar context for all other DataActionsBar useges --- .../frontend/src/context/dataActionsBar.tsx | 12 +++- govtool/frontend/src/hooks/index.ts | 1 - .../frontend/src/hooks/useDataActionsBar.tsx | 58 ------------------- .../src/pages/DRepDirectoryContent.tsx | 3 +- .../DashboardGovernanceActionsCategory.tsx | 3 +- .../frontend/src/pages/GovernanceActions.tsx | 3 +- .../src/pages/GovernanceActionsCategory.tsx | 3 +- 7 files changed, 15 insertions(+), 68 deletions(-) delete mode 100644 govtool/frontend/src/hooks/useDataActionsBar.tsx diff --git a/govtool/frontend/src/context/dataActionsBar.tsx b/govtool/frontend/src/context/dataActionsBar.tsx index ffb666e23..29e38ed2f 100644 --- a/govtool/frontend/src/context/dataActionsBar.tsx +++ b/govtool/frontend/src/context/dataActionsBar.tsx @@ -66,7 +66,17 @@ const DataActionsBarProvider: FC = ({ children }) => { }, []); useEffect(() => { - if (lastPath && pathname !== lastPath && !pathname.startsWith(lastPath)) { + if ( + (lastPath && + pathname !== lastPath && + !pathname.startsWith(lastPath) && + !( + lastPath.includes("governance_actions/category") && + pathname.includes("governance_actions/") + )) || + (lastPath.endsWith("governance_actions") && + pathname.includes("governance_actions/category")) + ) { resetState(); } }, [pathname, lastPath, resetState]); diff --git a/govtool/frontend/src/hooks/index.ts b/govtool/frontend/src/hooks/index.ts index 8fdb31e31..a3a054c54 100644 --- a/govtool/frontend/src/hooks/index.ts +++ b/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"; diff --git a/govtool/frontend/src/hooks/useDataActionsBar.tsx b/govtool/frontend/src/hooks/useDataActionsBar.tsx deleted file mode 100644 index 61723d0ea..000000000 --- a/govtool/frontend/src/hooks/useDataActionsBar.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useState, useCallback, Dispatch, SetStateAction } from "react"; - -import { - useDebounce, -} from "@hooks"; - -type UseDataActionsBarReturnType = { - chosenFilters: string[]; - chosenFiltersLength: number; - chosenSorting: string; - closeFilters: () => void; - closeSorts: () => void; - debouncedSearchText: string; - filtersOpen: boolean; - searchText: string; - setChosenFilters: Dispatch>; - setChosenSorting: Dispatch>; - setFiltersOpen: Dispatch>; - setSearchText: Dispatch>; - setSortOpen: Dispatch>; - sortingActive: boolean; - sortOpen: boolean; -}; - -export const useDataActionsBar = (): UseDataActionsBarReturnType => { - const [searchText, setSearchText] = useState(""); - const debouncedSearchText = useDebounce(searchText, 300); - const [filtersOpen, setFiltersOpen] = useState(false); - const [chosenFilters, setChosenFilters] = useState([]); - const [sortOpen, setSortOpen] = useState(false); - const [chosenSorting, setChosenSorting] = useState(""); - - const closeFilters = useCallback(() => { - setFiltersOpen(false); - }, [setFiltersOpen]); - - const closeSorts = useCallback(() => { - setSortOpen(false); - }, [setSortOpen]); - - return { - chosenFilters, - chosenFiltersLength: chosenFilters.length, - chosenSorting, - closeFilters, - closeSorts, - debouncedSearchText, - filtersOpen, - searchText, - setChosenFilters, - setChosenSorting, - setFiltersOpen, - setSearchText, - setSortOpen, - sortingActive: Boolean(chosenSorting), - sortOpen, - }; -}; diff --git a/govtool/frontend/src/pages/DRepDirectoryContent.tsx b/govtool/frontend/src/pages/DRepDirectoryContent.tsx index a0de0023a..ef32729fb 100644 --- a/govtool/frontend/src/pages/DRepDirectoryContent.tsx +++ b/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, diff --git a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx index d0369ccd5..70975a860 100644 --- a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx +++ b/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, diff --git a/govtool/frontend/src/pages/GovernanceActions.tsx b/govtool/frontend/src/pages/GovernanceActions.tsx index 6fb8676d2..c62279494 100644 --- a/govtool/frontend/src/pages/GovernanceActions.tsx +++ b/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, diff --git a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx index 19562ec85..cb5a7d0b4 100644 --- a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx +++ b/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, From 6096a5a2e184b5b91def2e7b76bc6ae7f245ad05 Mon Sep 17 00:00:00 2001 From: Jan Jaroszczak Date: Thu, 18 Apr 2024 16:17:14 +0200 Subject: [PATCH 3/4] [#604] dataActionsBar refactor --- .../frontend/src/context/dataActionsBar.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/govtool/frontend/src/context/dataActionsBar.tsx b/govtool/frontend/src/context/dataActionsBar.tsx index 29e38ed2f..eab02a6f6 100644 --- a/govtool/frontend/src/context/dataActionsBar.tsx +++ b/govtool/frontend/src/context/dataActionsBar.tsx @@ -65,21 +65,23 @@ const DataActionsBarProvider: FC = ({ children }) => { 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 ( - (lastPath && - pathname !== lastPath && - !pathname.startsWith(lastPath) && - !( - lastPath.includes("governance_actions/category") && - pathname.includes("governance_actions/") - )) || - (lastPath.endsWith("governance_actions") && - pathname.includes("governance_actions/category")) + (userMovedToDifferentAppArea && !userOpenedGADetailsFromCategoryPage) || + userMovedFromGAListToCategoryPage ) { resetState(); } - }, [pathname, lastPath, resetState]); + }, [pathname, resetState]); useEffect(() => { setLastPath(pathname); From acf757f7abf2fc79573f997e9ea6d38379f2aaa4 Mon Sep 17 00:00:00 2001 From: Jan Jaroszczak Date: Thu, 18 Apr 2024 16:43:36 +0200 Subject: [PATCH 4/4] Additional fix for DRepDirectoryContent --- govtool/frontend/src/pages/DRepDirectoryContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/govtool/frontend/src/pages/DRepDirectoryContent.tsx b/govtool/frontend/src/pages/DRepDirectoryContent.tsx index ef32729fb..7a1a27b9f 100644 --- a/govtool/frontend/src/pages/DRepDirectoryContent.tsx +++ b/govtool/frontend/src/pages/DRepDirectoryContent.tsx @@ -43,7 +43,7 @@ export const DRepDirectoryContent: FC = ({ const { delegate, isDelegating } = useDelegateTodRep(); - const { votingPower } = useGetAdaHolderVotingPowerQuery(); + const { votingPower } = useGetAdaHolderVotingPowerQuery(stakeKey); const { currentDelegation } = useGetAdaHolderCurrentDelegationQuery(stakeKey); const inProgressDelegation = pendingTransaction.delegate?.resourceId;