expose the dataGridProps from ProgressReportsGrid

It seems as if when the slot props where merging, the slot props from the expanded where not merging properly, causing the filter to not work. Instead of duplicating the code for generating the dataGridProps, we are instead exposing the dataGripProps "build" and reusing it in the Expanded view.
SeedCompany · Oct 17, 2024 · 74bd5eb · 74bd5eb
1 parent 44379e0
commit 74bd5eb
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 36 deletions.
diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpandedGrid.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpandedGrid.tsx
@@ -8,6 +8,7 @@ import {
   useGridApiRef,
 } from '@mui/x-data-grid-pro';
 import { entries } from '@seedcompany/common';
+import { merge } from 'lodash';
 import { useMemo } from 'react';
 import { extendSx } from '~/common';
 import {
@@ -29,6 +30,7 @@ import {
   ProgressReportsColumnMap,
   ProgressReportsGrid,
   ProgressReportsGridProps,
+  useProgressReportsDataGrid,
 } from './ProgressReportsGrid';
 
 const COLLAPSED_ROW_HEIGHT = 54;
@@ -47,9 +49,6 @@ const wrapForNonExpansion = (renderCell?: GridColDef['renderCell']) => {
 
         display: 'flex',
         alignItems: 'center',
-        '.MuiDataGrid-cell--textCenter &': {
-          justifyContent: 'center',
-        },
       }}
     >
       {renderCell ? renderCell(props) : props.formattedValue ?? props.value}
@@ -116,18 +115,24 @@ export const ProgressReportsExpandedGrid = (
   props: Omit<ProgressReportsGridProps, 'columns'>
 ) => {
   const apiRef = useGridApiRef();
-
   const { expanded, onMouseDown, onRowClick } = useExpandedSetup();
 
-  const slotProps = useMemo(
-    (): DataGridProps['slotProps'] => ({
-      row: {
-        onMouseDown,
-      },
-    }),
+  const dataGridProps = useProgressReportsDataGrid({
+    ...props,
+    apiRef,
+    columns,
+  });
+
+  const mouseSlotProps = useMemo(
+    (): DataGridProps['slotProps'] => ({ row: { onMouseDown } }),
     [onMouseDown]
   );
 
+  const slotProps = useMemo(
+    () => merge({}, dataGridProps.slotProps, mouseSlotProps),
+    [dataGridProps.slotProps, mouseSlotProps]
+  );
+
   return (
     <ExpansionContext.Provider value={expanded}>
       <ProgressReportsGrid

diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx
@@ -39,6 +39,40 @@ export type ProgressReportColumnMapShape = Record<
 
 export const ExpansionMarker = 'expandable';
 
+export const useProgressReportsDataGrid = ({
+  quarter,
+  ...props
+}: ProgressReportsGridProps) => {
+  const source = useMemo(() => {
+    return {
+      query: ProgressReportsDocument,
+      variables: {
+        input: {
+          filter: {
+            start: {
+              afterInclusive: quarter.startOf('quarter'),
+            },
+            end: {
+              beforeInclusive: quarter.endOf('quarter'),
+            },
+          },
+        },
+      },
+      listAt: 'progressReports',
+      initialInput: {
+        sort: 'status',
+        order: 'DESC',
+      },
+    } as const;
+  }, [quarter]);
+  const [dataGridProps] = useDataGridSource({
+    ...source,
+    apiRef: props.apiRef,
+  });
+
+  return dataGridProps;
+};
+
 export const ProgressReportsColumnMap = {
   project: {
     headerName: 'Project',
@@ -179,32 +213,7 @@ export const ProgressReportsGrid = ({
   quarter,
   ...props
 }: ProgressReportsGridProps) => {
-  const source = useMemo(() => {
-    return {
-      query: ProgressReportsDocument,
-      variables: {
-        input: {
-          filter: {
-            start: {
-              afterInclusive: quarter.startOf('quarter'),
-            },
-            end: {
-              beforeInclusive: quarter.endOf('quarter'),
-            },
-          },
-        },
-      },
-      listAt: 'progressReports',
-      initialInput: {
-        sort: 'status',
-        order: 'DESC',
-      },
-    } as const;
-  }, [quarter]);
-  const [dataGridProps] = useDataGridSource({
-    ...source,
-    apiRef: props.apiRef,
-  });
+  const dataGridProps = useProgressReportsDataGrid({ quarter, ...props });
 
   const slots = useMemo(
     () =>