[#536] make filtering and sorting actions reusable

IntersectMBO · Mar 26, 2024 · 8380cb6 · 8380cb6
1 parent 7f9e84c
commit 8380cb6
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 29 deletions.
diff --git a/govtool/frontend/src/components/molecules/DataActionsBar.tsx b/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>

diff --git a/...ts/molecules/GovernanceActionsFilters.tsx → ...mponents/molecules/DataActionsFilters.tsx b/...ts/molecules/GovernanceActionsFilters.tsx → ...mponents/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"

diff --git a/...ts/molecules/GovernanceActionsSorting.tsx → ...mponents/molecules/DataActionsSorting.tsx b/...ts/molecules/GovernanceActionsSorting.tsx → ...mponents/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={[
                 {

diff --git a/govtool/frontend/src/components/molecules/index.ts b/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";

diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx
@@ -2,7 +2,7 @@ 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,
@@ -103,7 +103,12 @@ export const DashboardGovernanceActions = () => {
       flexDirection="column"
     >
       <>
-        <DataActionsBar {...dataActionsBarProps} />
+        <DataActionsBar
+          {...dataActionsBarProps}
+          filterOptions={GOVERNANCE_ACTIONS_FILTERS}
+          filtersTitle={t("govActions.filterTitle")}
+          sortOptions={GOVERNANCE_ACTIONS_SORTING}
+        />
         {!proposals || !voter || isEnableLoading || isProposalsLoading ? (
           <Box
             alignItems="center"

diff --git a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
@@ -3,7 +3,7 @@ import { generatePath, useNavigate, useParams } from "react-router-dom";
 import { Box, CircularProgress, Link } from "@mui/material";
 
 import { Background, Typography } from "@atoms";
-import { ICONS, PATHS } from "@consts";
+import { GOVERNANCE_ACTIONS_SORTING, ICONS, PATHS } from "@consts";
 import { useCardano } from "@context";
 import { DataActionsBar, GovernanceActionCard } from "@molecules";
 import {
@@ -95,6 +95,7 @@ export const DashboardGovernanceActionsCategory = () => {
             <DataActionsBar
               {...dataActionsBarProps}
               isFiltering={false}
+              sortOptions={GOVERNANCE_ACTIONS_SORTING}
             />
             <Typography
               variant="title2"

diff --git a/govtool/frontend/src/pages/GovernanceActions.tsx b/govtool/frontend/src/pages/GovernanceActions.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { Box, CircularProgress, Divider } from "@mui/material";
 
 import { Background, ScrollToManage, Typography } from "@atoms";
-import { GOVERNANCE_ACTIONS_FILTERS, PATHS } from "@consts";
+import { GOVERNANCE_ACTIONS_FILTERS, GOVERNANCE_ACTIONS_SORTING, PATHS } from "@consts";
 import { useCardano } from "@context";
 import {
   useDataActionsBar,
@@ -69,7 +69,12 @@ export const GovernanceActions = () => {
             />
           )}
           <Box flex={1} px={pagePadding}>
-            <DataActionsBar {...dataActionsBarProps} />
+            <DataActionsBar
+              {...dataActionsBarProps}
+              filterOptions={GOVERNANCE_ACTIONS_FILTERS}
+              filtersTitle={t("govActions.filterTitle")}
+              sortOptions={GOVERNANCE_ACTIONS_SORTING}
+            />
             <Box height={isMobile ? 60 : 80} />
             {!proposals || isProposalsLoading ? (
               <Box

diff --git a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Box, CircularProgress, Link } from "@mui/material";
 
 import { Background, Typography } from "@atoms";
-import { ICONS, PATHS } from "@consts";
+import { GOVERNANCE_ACTIONS_SORTING, ICONS, PATHS } from "@consts";
 import { useCardano } from "@context";
 import { DataActionsBar, GovernanceActionCard } from "@molecules";
 import { Footer, TopNav } from "@organisms";
@@ -105,6 +105,7 @@ export const GovernanceActionsCategory = () => {
             <DataActionsBar
               {...dataActionsBarProps}
               isFiltering={false}
+              sortOptions={GOVERNANCE_ACTIONS_SORTING}
             />
             <Typography
               variant="title2"