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..eab02a6f6 --- /dev/null +++ b/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>; + 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(""); + }, []); + + 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 ( + + {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"; diff --git a/govtool/frontend/src/hooks/index.ts b/govtool/frontend/src/hooks/index.ts index bb78d455f..e2a7c78e7 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..7a1a27b9f 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, @@ -44,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; 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,