[DataGrid] Apply review from #412 (#515)

packages/grid/_modules_/grid/GridComponent.tsx

@@ -2,8 +2,8 @@
  * Data Grid component implementing [[GridComponentProps]].
  * @returns JSX.Element
  */
-import useForkRef from '@material-ui/core/utils/useForkRef';
 import * as React from 'react';
+import { useForkRef } from '@material-ui/core/utils';
 import { AutoSizer } from './components/AutoSizer';
 import { ColumnsHeader } from './components/column-headers';
 import { DefaultFooter } from './components/default-footer';

packages/grid/_modules_/grid/components/AutoSizer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useForkRef, ownerWindow } from '@material-ui/core/utils';
-import { useEventCallback } from '../utils/material-ui-utils';
+import { useEventCallback, useEnhancedEffect } from '../utils/material-ui-utils';
 import createDetectElementResize from '../lib/createDetectElementResize';
 // TODO replace with https://caniuse.com/resizeobserver.
 
@@ -47,9 +47,6 @@ export interface AutoSizerProps extends Omit<React.HTMLAttributes<HTMLDivElement
   onResize?: (size: AutoSizerSize) => void;
 }
 
-// TODO v5: replace with @material-ui/core/utils/useEnhancedEffect.
-const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 export const AutoSizer = React.forwardRef<HTMLDivElement, AutoSizerProps>(function AutoSizer(
   props,
   ref,

packages/grid/_modules_/grid/hooks/features/core/gridState.ts

@@ -28,8 +28,8 @@ export interface GridState {
 
 export const getInitialState: () => GridState = () => ({
   rows: getInitialRowState(),
-  pagination: { ...INITIAL_PAGINATION_STATE },
-  options: { ...DEFAULT_GRID_OPTIONS },
+  pagination: INITIAL_PAGINATION_STATE,
+  options: DEFAULT_GRID_OPTIONS,
   isScrolling: false,
   columns: getInitialColumnsState(),
   columnReorder: getInitialColumnReorderState(),

packages/grid/_modules_/grid/hooks/features/core/useGridReducer.ts

@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react';
 import * as React from 'react';
 import { ApiRef } from '../../../models/api/apiRef';
 import { useGridApi } from './useGridApi';
@@ -10,34 +9,31 @@ export const useGridReducer = <State, Action>(
   reducer: React.Reducer<State, Action>,
   initialState: State,
 ) => {
-  const api = useGridApi(apiRef);
+  const gridApi = useGridApi(apiRef);
   const [gridState, setGridState, forceUpdate] = useGridState(apiRef);
 
   const gridDispatch = React.useCallback(
     (action: Action) => {
       if (gridState[stateId] === undefined) {
         gridState[stateId] = initialState;
       }
-      const newLocalState = reducer(api.state[stateId], action);
       setGridState((oldState) => {
-        const updatingState: any = {};
-        updatingState[stateId] = { ...newLocalState };
-
-        oldState = { ...oldState, ...updatingState };
-        return oldState;
+        const newState = { ...oldState };
+        newState[stateId] = reducer(oldState[stateId], action);
+        return newState;
       });
       forceUpdate();
     },
-    [api, forceUpdate, gridState, initialState, reducer, setGridState, stateId],
+    [forceUpdate, gridState, initialState, reducer, setGridState, stateId],
   );
 
-  const dispatchRef = useRef(gridDispatch);
+  const dispatchRef = React.useRef(gridDispatch);
 
-  useEffect(() => {
+  React.useEffect(() => {
     dispatchRef.current = gridDispatch;
   }, [gridDispatch]);
 
   const dispatch = React.useCallback((args) => dispatchRef.current(args), []);
 
-  return { gridState, dispatch, gridApi: api };
+  return { gridState, dispatch, gridApi };
 };

packages/grid/_modules_/grid/hooks/features/core/useGridSelector.ts

@@ -5,7 +5,6 @@ export const useGridSelector = <State>(
   apiRef: ApiRef | undefined,
   selector: (state: any) => State,
 ) => {
-  const [state, ,] = useGridState(apiRef!);
-
+  const [state] = useGridState(apiRef!);
   return selector(state);
 };

packages/grid/_modules_/grid/hooks/features/pagination/paginationReducer.ts

@@ -8,19 +8,19 @@ export interface PaginationState {
   paginationMode: FeatureMode;
 }
 
-const SET_PAGE_ACTION = 'SetPage';
-const SET_PAGESIZE_ACTION = 'SetPageSize';
-const SET_PAGINATION_MODE_ACTION = 'SetPaginationMode';
-const SET_ROWCOUNT_ACTION = 'setRowCount';
+const SET_PAGE_ACTION = 'SET_PAGE_ACTION';
+const SET_PAGESIZE_ACTION = 'SET_PAGESIZE_ACTION';
+const SET_PAGINATION_MODE_ACTION = 'SET_PAGINATION_MODE_ACTION';
+const SET_ROWCOUNT_ACTION = 'SET_ROWCOUNT_ACTION';
 
-type SetPageAction = { type: 'SetPage'; payload: { page: number } };
-type SetPageSizeAction = { type: 'SetPageSize'; payload: { pageSize: number } };
+type SetPageAction = { type: typeof SET_PAGE_ACTION; payload: { page: number } };
+type SetPageSizeAction = { type: typeof SET_PAGESIZE_ACTION; payload: { pageSize: number } };
 type SetPaginationModeAction = {
-  type: 'SetPaginationMode';
+  type: typeof SET_PAGINATION_MODE_ACTION;
   payload: { paginationMode: FeatureMode };
 };
 type SetRowCountAction = {
-  type: 'setRowCount';
+  type: typeof SET_ROWCOUNT_ACTION;
   payload: { totalRowCount: number };
 };
 

packages/grid/_modules_/grid/hooks/features/virtualization/useVirtualRows.ts

@@ -6,6 +6,7 @@ import { CellIndexCoordinates } from '../../../models/cell';
 import { ScrollParams } from '../../../models/params/scrollParams';
 import { RenderContextProps, RenderRowProps } from '../../../models/renderContextProps';
 import { isEqual } from '../../../utils/utils';
+import { useEnhancedEffect } from '../../../utils/material-ui-utils';
 import { useGridSelector } from '../core/useGridSelector';
 import { useGridState } from '../core/useGridState';
 import { PaginationState } from '../pagination/paginationReducer';
@@ -22,9 +23,6 @@ import { useVirtualColumns } from './useVirtualColumns';
 
 type UseVirtualRowsReturnType = Partial<RenderContextProps> | null;
 
-// TODO v5: replace with @material-ui/core/utils/useEnhancedEffect.
-const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 export const useVirtualRows = (
   colRef: React.MutableRefObject<HTMLDivElement | null>,
   windowRef: React.MutableRefObject<HTMLDivElement | null>,

packages/grid/_modules_/grid/hooks/utils/useLogger.ts

@@ -47,7 +47,7 @@ function getAppender(name: string, logLevel: string, appender: Logger = console)
       loggerObj[method] = (...args: any[]) => {
         const [message, ...rest] = args;
 
-        (appender as any)[method](`${name}: ${message}`, ...rest);
+        (appender as any)[method](`Material-UI: ${name} - ${message}`, ...rest);
       };
     } else {
       loggerObj[method] = noop;

packages/grid/_modules_/grid/models/api/virtualizationApi.ts

@@ -15,7 +15,7 @@ export interface VirtualizationApi {
   /**
    * Trigger the grid viewport to scroll to a row of x y indexes.
    * @param params
-   * @returns boolean that indicates if the viewport has scrolled to reach the indexes
+   * @returns boolean Return if the index was outside of the viewport and the grid has to scroll to reach the target.
    */
   scrollToIndexes: (params: CellIndexCoordinates) => boolean;
   /**

packages/grid/_modules_/grid/utils/material-ui-utils.ts

@@ -1,6 +1,11 @@
+import * as React from 'react';
 import { useEventCallback as muiUseEventCallback } from '@material-ui/core/utils';
 
 export function useEventCallback<T extends (...args: any[]) => any>(func: T): T {
   // @ts-expect-error TODO remove wrapper once upgraded to v5
   return muiUseEventCallback(func);
 }
+
+// TODO replace with { useEnhancedEffect } from @material-ui/core/utils.
+export const useEnhancedEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;

packages/grid/data-grid/src/DataGrid.test.tsx

@@ -105,7 +105,9 @@ describe('<DataGrid />', () => {
           );
           clock.tick(100);
           // @ts-expect-error need to migrate helpers to TypeScript
-        }).toWarnDev('useResizeContainer: The parent of the grid has an empty height.');
+        }).toWarnDev(
+          'Material-UI: useResizeContainer - The parent of the grid has an empty height.',
+        );
       });
 
       it('should warn if the container has no intrinsic width', () => {
@@ -119,7 +121,9 @@ describe('<DataGrid />', () => {
           );
           clock.tick(100);
           // @ts-expect-error need to migrate helpers to TypeScript
-        }).toWarnDev('useResizeContainer: The parent of the grid has an empty width.');
+        }).toWarnDev(
+          'Material-UI: useResizeContainer - The parent of the grid has an empty width.',
+        );
       });
     });
   });