common component props

src/components/ProgressCard/TopPayees.tsx

@@ -1,30 +1,24 @@
 import * as React from "react";
 import { Box, Paper, Typography } from "@mui/material";
-import { ReportData, GroupKey } from "../../features/report";
+import { ComponentProps } from "../report.props";
 import ProgressCard from "./ProgressCard";
 import { extractTopPayees } from "./TopPayees.adapter";
 
-type Props = {
-  reportData: ReportData;
-  flow: "outflows" | "inflows";
-  header: string;
-  selectedPeriodId?: string | null;
-  selectedGroupKey?: GroupKey | null;
-  setSelectedGroupKey?: (key: GroupKey | null) => void;
+interface Props extends ComponentProps {
   compact?: boolean;
-  isFetching?: boolean;
-};
+}
 
 export default function TopPayees({
   reportData,
-  flow,
+  state,
+  stateSetters,
   header,
-  selectedPeriodId,
-  selectedGroupKey,
-  setSelectedGroupKey,
   compact = true,
   isFetching,
 }: Props) {
+  const { flow, selectedPeriodId, selectedGroupKey } = state;
+  const { setSelectedGroupKey } = stateSetters;
+
   const { items, total } = React.useMemo(() => {
     return extractTopPayees(reportData, flow, selectedPeriodId, selectedGroupKey);
   }, [reportData, flow, selectedPeriodId, selectedGroupKey]);