[#536] GA search on BE

govtool/frontend/src/components/molecules/DataActionsBar.tsx

@@ -2,7 +2,7 @@ import { Dispatch, FC, SetStateAction } from "react";
 import { Box, InputBase } from "@mui/material";
 import Search from "@mui/icons-material/Search";
 
-import { GovernanceActionsFilters, GovernanceActionsSorting } from "@molecules";
+import { DataActionsFilters, DataActionsSorting } from "@molecules";
 import { OrderActionsChip } from "./OrderActionsChip";
 import { theme } from "@/theme";
 
@@ -12,7 +12,12 @@ type DataActionsBarProps = {
   chosenSorting: string;
   closeFilters?: () => void;
   closeSorts: () => void;
+  filterOptions?: {
+    key: string;
+    label: string;
+  }[];
   filtersOpen?: boolean;
+  filtersTitle?: string;
   isFiltering?: boolean;
   searchText: string;
   setChosenFilters?: Dispatch<SetStateAction<string[]>>;
@@ -22,6 +27,10 @@ type DataActionsBarProps = {
   setSortOpen: Dispatch<SetStateAction<boolean>>;
   sortingActive: boolean;
   sortOpen: boolean;
+  sortOptions?: {
+    key: string;
+    label: string;
+  }[];
 };
 
 export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
@@ -31,7 +40,9 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
     chosenSorting,
     closeFilters = () => {},
     closeSorts,
+    filterOptions = [],
     filtersOpen,
+    filtersTitle,
     isFiltering = true,
     searchText,
     setChosenFilters = () => {},
@@ -41,6 +52,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
     setSortOpen,
     sortingActive,
     sortOpen,
+    sortOptions = [],
   } = props;
   const {
     palette: { boxShadow2 },
@@ -87,17 +99,20 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
           sortOpen={sortOpen}
         >
           {filtersOpen && (
-            <GovernanceActionsFilters
+            <DataActionsFilters
               chosenFilters={chosenFilters}
               setChosenFilters={setChosenFilters}
               closeFilters={closeFilters}
+              options={filterOptions}
+              title={filtersTitle}
             />
           )}
           {sortOpen && (
-            <GovernanceActionsSorting
+            <DataActionsSorting
               chosenSorting={chosenSorting}
               setChosenSorting={setChosenSorting}
               closeSorts={closeSorts}
+              options={sortOptions}
             />
           )}
         </OrderActionsChip>

govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx → govtool/frontend/src/components/molecules/DataActionsFilters.tsx

@@ -7,19 +7,25 @@ import {
   Typography,
 } from "@mui/material";
 
-import { GOVERNANCE_ACTIONS_FILTERS } from "@consts";
-import { useOnClickOutside, useScreenDimension, useTranslation } from "@hooks";
+import { useOnClickOutside, useScreenDimension } from "@hooks";
 
 interface Props {
   chosenFilters: string[];
   setChosenFilters: Dispatch<SetStateAction<string[]>>;
   closeFilters: () => void;
+  options: {
+    key: string;
+    label: string;
+  }[];
+  title?: string;
 }
 
-export const GovernanceActionsFilters = ({
+export const DataActionsFilters = ({
   chosenFilters,
   setChosenFilters,
   closeFilters,
+  options,
+  title,
 }: Props) => {
   const handleFilterChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,7 +43,6 @@ export const GovernanceActionsFilters = ({
     [chosenFilters, setChosenFilters],
   );
 
-  const { t } = useTranslation();
   const { isMobile, screenWidth } = useScreenDimension();
 
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -60,17 +65,19 @@ export const GovernanceActionsFilters = ({
       }}
       ref={wrapperRef}
     >
-      <FormLabel
-        sx={{
-          fontSize: 14,
-          fontWeight: 500,
-          color: "#9792B5",
-          paddingX: "20px",
-        }}
-      >
-        {t("govActions.filterTitle")}
-      </FormLabel>
-      {GOVERNANCE_ACTIONS_FILTERS.map((item) => (
+      {title && (
+        <FormLabel
+          sx={{
+            fontSize: 14,
+            fontWeight: 500,
+            color: "#9792B5",
+            paddingX: "20px",
+          }}
+        >
+          {title}
+        </FormLabel>
+      )}
+      {options.map((item) => (
         <Box
           key={item.key}
           paddingX="20px"

govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx → govtool/frontend/src/components/molecules/DataActionsSorting.tsx

@@ -8,19 +8,23 @@ import {
   Typography,
 } from "@mui/material";
 
-import { GOVERNANCE_ACTIONS_SORTING } from "@consts";
 import { useTranslation, useOnClickOutside } from "@hooks";
 
 interface Props {
   chosenSorting: string;
   setChosenSorting: Dispatch<SetStateAction<string>>;
   closeSorts: () => void;
+  options: {
+    key: string;
+    label: string;
+  }[];
 }
 
-export const GovernanceActionsSorting = ({
+export const DataActionsSorting = ({
   chosenSorting,
   setChosenSorting,
   closeSorts,
+  options,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -63,7 +67,7 @@ export const GovernanceActionsSorting = ({
             setChosenSorting(e.target.value);
           }}
         >
-          {GOVERNANCE_ACTIONS_SORTING.map((item) => (
+          {options.map((item) => (
             <FormControlLabel
               sx={[
                 {

govtool/frontend/src/components/molecules/index.ts

@@ -5,6 +5,8 @@ export * from "./CenteredBoxBottomButtons";
 export * from "./CenteredBoxPageWrapper";
 export * from "./DashboardActionCard";
 export * from "./DataActionsBar";
+export * from "./DataActionsFilters";
+export * from "./DataActionsSorting";
 export * from "./DataMissingInfoBox";
 export * from "./DRepInfoCard";
 export * from "./Field";
@@ -19,8 +21,6 @@ export * from "./GovernanceActionDetailsCardVotes";
 export * from "./GovernanceActionDetailsCardHeader";
 export * from "./GovernanceActionDetailsCardOnChainData";
 export * from "./GovernanceActionsDatesBox";
-export * from "./GovernanceActionsFilters";
-export * from "./GovernanceActionsSorting";
 export * from "./GovernanceVotedOnCard";
 export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";

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

@@ -1,10 +1,11 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Box, CircularProgress, Tab, Tabs, styled } from "@mui/material";
 import { useLocation } from "react-router-dom";
 
-import { GOVERNANCE_ACTIONS_FILTERS } from "@consts";
+import { GOVERNANCE_ACTIONS_FILTERS, GOVERNANCE_ACTIONS_SORTING } from "@consts";
 import { useCardano } from "@context";
 import {
+  useDataActionsBar,
   useGetProposalsQuery,
   useGetVoterInfo,
   useScreenDimension,
@@ -64,11 +65,8 @@ const StyledTab = styled((props: StyledTabProps) => (
 }));
 
 export const DashboardGovernanceActions = () => {
-  const [searchText, setSearchText] = useState<string>("");
-  const [filtersOpen, setFiltersOpen] = useState(false);
-  const [chosenFilters, setChosenFilters] = useState<string[]>([]);
-  const [sortOpen, setSortOpen] = useState(false);
-  const [chosenSorting, setChosenSorting] = useState<string>("");
+  const { debouncedSearchText, ...dataActionsBarProps } = useDataActionsBar();
+  const { chosenFilters, chosenSorting } = dataActionsBarProps;
   const { voter } = useGetVoterInfo();
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
@@ -80,7 +78,7 @@ export const DashboardGovernanceActions = () => {
   const { proposals, isProposalsLoading } = useGetProposalsQuery({
     filters: queryFilters,
     sorting: chosenSorting,
-    searchPhrase: searchText,
+    searchPhrase: debouncedSearchText,
   });
 
   const { state } = useLocation();
@@ -92,14 +90,6 @@ export const DashboardGovernanceActions = () => {
     setContent(newValue);
   };
 
-  const closeFilters = useCallback(() => {
-    setFiltersOpen(false);
-  }, [setFiltersOpen]);
-
-  const closeSorts = useCallback(() => {
-    setSortOpen(false);
-  }, [setSortOpen]);
-
   useEffect(() => {
     window.history.replaceState({}, document.title);
   }, []);
@@ -114,20 +104,10 @@ export const DashboardGovernanceActions = () => {
     >
       <>
         <DataActionsBar
-          chosenFilters={chosenFilters}
-          chosenFiltersLength={chosenFilters.length}
-          chosenSorting={chosenSorting}
-          closeFilters={closeFilters}
-          closeSorts={closeSorts}
-          filtersOpen={filtersOpen}
-          searchText={searchText}
-          setChosenFilters={setChosenFilters}
-          setChosenSorting={setChosenSorting}
-          setFiltersOpen={setFiltersOpen}
-          setSearchText={setSearchText}
-          setSortOpen={setSortOpen}
-          sortingActive={Boolean(chosenSorting)}
-          sortOpen={sortOpen}
+          {...dataActionsBarProps}
+          filterOptions={GOVERNANCE_ACTIONS_FILTERS}
+          filtersTitle={t("govActions.filterTitle")}
+          sortOptions={GOVERNANCE_ACTIONS_SORTING}
         />
         {!proposals || !voter || isEnableLoading || isProposalsLoading ? (
           <Box
@@ -177,15 +157,15 @@ export const DashboardGovernanceActions = () => {
               <GovernanceActionsToVote
                 filters={chosenFilters}
                 onDashboard
-                searchPhrase={searchText}
+                searchPhrase={debouncedSearchText}
                 sorting={chosenSorting}
                 proposals={proposals}
               />
             </CustomTabPanel>
             <CustomTabPanel value={content} index={1}>
               <DashboardGovernanceActionsVotedOn
                 filters={chosenFilters}
-                searchPhrase={searchText}
+                searchPhrase={debouncedSearchText}
                 sorting={chosenSorting}
               />
             </CustomTabPanel>

govtool/frontend/src/hooks/index.ts

@@ -1,4 +1,7 @@
 export { useTranslation } from "react-i18next";
+
+export * from "./useDataActionsBar";
+export * from "./useDebounce";
 export * from "./useFetchNextPageDetector";
 export * from "./useOutsideClick";
 export * from "./useSaveScrollPosition";

govtool/frontend/src/hooks/queries/useGetProposalsInfiniteQuery.ts

@@ -2,13 +2,14 @@ import { useInfiniteQuery } from "react-query";
 
 import { QUERY_KEYS } from "@consts";
 import { useCardano } from "@context";
-import { getProposals, getProposalsArguments } from "@services";
+import { getProposals, GetProposalsArguments } from "@services";
 
 export const useGetProposalsInfiniteQuery = ({
   filters = [],
   pageSize = 10,
+  searchPhrase,
   sorting = "",
-}: getProposalsArguments) => {
+}: GetProposalsArguments) => {
   const { dRepID, isEnabled, pendingTransaction } = useCardano();
 
   const fetchProposals = ({ pageParam = 0 }) =>
@@ -17,6 +18,7 @@ export const useGetProposalsInfiniteQuery = ({
       filters,
       page: pageParam,
       pageSize,
+      searchPhrase,
       sorting,
     });
 
@@ -34,6 +36,7 @@ export const useGetProposalsInfiniteQuery = ({
       filters,
       isEnabled,
       pendingTransaction.vote?.transactionHash,
+      searchPhrase,
       sorting,
     ],
     fetchProposals,