Fix Ground Control: migrate gridApi to useRef, remove connect() container

src/pages/academy/academyRoutes.ts

@@ -96,7 +96,7 @@ const getCommonAcademyRoutes = (): RouteObject[] => {
   ];
 };
 
-const GroundControl = () => import('./groundControl/GroundControlContainer');
+const GroundControl = () => import('./groundControl/GroundControl');
 const Grading = () => import('./grading/Grading');
 const Sourcereel = () => import('./sourcereel/Sourcereel');
 const GameSimulator = () => import('./gameSimulator/GameSimulator');

src/pages/academy/groundControl/GroundControl.tsx

@@ -10,11 +10,14 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import { type ColDef, type GridApi, type GridReadyEvent, themeBalham } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import React, { useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { useSession } from 'src/commons/utils/Hooks';
 
+import SessionActions from '../../../commons/application/actions/SessionActions';
 import { AssessmentOverview } from '../../../commons/assessment/AssessmentTypes';
 import ContentDisplay from '../../../commons/ContentDisplay';
+import GroundControlActions from '../../../features/groundControl/GroundControlActions';
 import DefaultChapterSelect from './subcomponents/DefaultChapterSelect';
 import ConfigureCell from './subcomponents/GroundControlConfigureCell';
 import DeleteCell from './subcomponents/GroundControlDeleteCell';
@@ -24,26 +27,6 @@ import EditTeamSizeCell from './subcomponents/GroundControlEditTeamSizeCell';
 import PublishCell from './subcomponents/GroundControlPublishCell';
 import ReleaseGradingCell from './subcomponents/GroundControlReleaseGradingCell';
 
-type Props = DispatchProps;
-
-export type DispatchProps = {
-  handleAssessmentOverviewFetch: () => void;
-  handleDeleteAssessment: (id: number) => void;
-  handleUploadAssessment: (file: File, forceUpdate: boolean, assessmentConfigId: number) => void;
-  handlePublishAssessment: (togglePublishAssessmentTo: boolean, id: number) => void;
-  handlePublishGradingAll: (id: number) => void;
-  handleUnpublishGradingAll: (id: number) => void;
-  handleAssessmentChangeDate: (id: number, openAt: string, closeAt: string) => void;
-  handleAssessmentChangeTeamSize: (id: number, maxTeamSize: number) => void;
-  handleConfigureAssessment: (
-    id: number,
-    hasVotingFeatures: boolean,
-    hasTokenCounter: boolean
-  ) => void;
-  handleAssignEntriesForVoting: (id: number) => void;
-  handleFetchCourseConfigs: () => void;
-};
-
 const defaultColumnDefs: ColDef = {
   flex: 2,
   minWidth: 70,
@@ -52,135 +35,156 @@ const defaultColumnDefs: ColDef = {
   sortable: true
 };
 
-const GroundControl: React.FC<Props> = props => {
+const GroundControl: React.FC = () => {
   const [showDropzone, setShowDropzone] = useState(false);
   const { assessmentOverviews, assessmentConfigurations } = useSession();
+  const dispatch = useDispatch();
 
-  let gridApi: GridApi | undefined;
+  const gridApi = useRef<GridApi>();
 
   const onGridReady = (params: GridReadyEvent) => {
-    gridApi = params.api;
-    gridApi.sizeColumnsToFit();
+    gridApi.current = params.api;
+    params.api.sizeColumnsToFit();
 
     // Sort assessments by opening date, breaking ties by later of closing dates
-    gridApi.applyColumnState({
+    params.api.applyColumnState({
       state: [
         { colId: 'openAt', sort: 'desc' },
         { colId: 'closeAt', sort: 'desc' }
       ]
     });
   };
 
-  const toggleDropzone = () => {
-    setShowDropzone(!showDropzone);
-  };
-
-  const columnDefs: ColDef<AssessmentOverview>[] = [
-    { field: 'number', headerName: 'ID', flex: 1 },
-    { headerName: 'Title', field: 'title' },
-    { headerName: 'Category', field: 'type' },
-    {
-      headerName: 'Open Date',
-      field: 'openAt',
-      filter: 'agDateColumnFilter',
-      filterParams: {
-        comparator: dateFilterComparator,
-        inRangeInclusive: true
+  const columnDefs = useMemo<ColDef<AssessmentOverview>[]>(
+    () => [
+      { field: 'number', headerName: 'ID', flex: 1 },
+      { headerName: 'Title', field: 'title' },
+      { headerName: 'Category', field: 'type' },
+      {
+        headerName: 'Open Date',
+        field: 'openAt',
+        filter: 'agDateColumnFilter',
+        filterParams: {
+          comparator: dateFilterComparator,
+          inRangeInclusive: true
+        },
+        sortingOrder: ['desc', 'asc', null],
+        cellRenderer: EditCell,
+        cellRendererParams: {
+          handleAssessmentChangeDate: (id: number, openAt: string, closeAt: string) =>
+            dispatch(GroundControlActions.changeDateAssessment(id, openAt, closeAt)),
+          forOpenDate: true
+        },
+        flex: 3
       },
-      sortingOrder: ['desc', 'asc', null],
-      cellRenderer: EditCell,
-      cellRendererParams: {
-        handleAssessmentChangeDate: props.handleAssessmentChangeDate,
-        forOpenDate: true
+      {
+        headerName: 'Close Date',
+        field: 'closeAt',
+        filter: 'agDateColumnFilter',
+        filterParams: {
+          comparator: dateFilterComparator,
+          inRangeInclusive: true
+        },
+        sortingOrder: ['desc', 'asc', null],
+        cellRenderer: EditCell,
+        cellRendererParams: {
+          handleAssessmentChangeDate: (id: number, openAt: string, closeAt: string) =>
+            dispatch(GroundControlActions.changeDateAssessment(id, openAt, closeAt)),
+          forOpenDate: false
+        },
+        flex: 3
       },
-      flex: 3
-    },
-    {
-      headerName: 'Close Date',
-      field: 'closeAt',
-      filter: 'agDateColumnFilter',
-      filterParams: {
-        comparator: dateFilterComparator,
-        inRangeInclusive: true
-      },
-      sortingOrder: ['desc', 'asc', null],
-      cellRenderer: EditCell,
-      cellRendererParams: {
-        handleAssessmentChangeDate: props.handleAssessmentChangeDate,
-        forOpenDate: false
-      },
-      flex: 3
-    },
-    {
-      headerName: 'Max Team Size',
-      field: 'maxTeamSize',
-      cellRenderer: EditTeamSizeCell,
-      cellRendererParams: {
-        onTeamSizeChange: props.handleAssessmentChangeTeamSize
-      }
-    },
-    {
-      headerName: 'Published',
-      field: 'placeholderPublish' as any,
-      cellRenderer: PublishCell,
-      cellRendererParams: {
-        handlePublishAssessment: props.handlePublishAssessment
+      {
+        headerName: 'Max Team Size',
+        field: 'maxTeamSize',
+        cellRenderer: EditTeamSizeCell,
+        cellRendererParams: {
+          onTeamSizeChange: (id: number, maxTeamSize: number) =>
+            dispatch(GroundControlActions.changeTeamSizeAssessment(id, maxTeamSize))
+        }
       },
-      filter: false,
-      resizable: false,
-      sortable: false,
-      cellStyle: { padding: 0 }
-    },
-    {
-      headerName: 'Grading',
-      field: 'placeholderReleaseGrading' as any,
-      cellRenderer: ReleaseGradingCell,
-      cellRendererParams: {
-        handlePublishGradingAll: props.handlePublishGradingAll,
-        handleUnpublishGradingAll: props.handleUnpublishGradingAll
+      {
+        headerName: 'Published',
+        field: 'placeholderPublish' as any,
+        cellRenderer: PublishCell,
+        cellRendererParams: {
+          handlePublishAssessment: (togglePublishAssessmentTo: boolean, id: number) =>
+            dispatch(GroundControlActions.publishAssessment(togglePublishAssessmentTo, id))
+        },
+        filter: false,
+        resizable: false,
+        sortable: false,
+        cellStyle: { padding: 0 }
       },
-      filter: false,
-      resizable: false,
-      sortable: false,
-      cellStyle: { padding: 0 }
-    },
-    {
-      headerName: 'Actions',
-      field: 'placeholderDelete' as any,
-      cellRenderer: ({ data }: { data: AssessmentOverview }) => {
-        return (
-          <>
-            <DeleteCell data={data} handleDeleteAssessment={props.handleDeleteAssessment} />
-            <ConfigureCell
-              data={data}
-              handleConfigureAssessment={props.handleConfigureAssessment}
-              handleAssignEntriesForVoting={props.handleAssignEntriesForVoting}
-            />
-          </>
-        );
+      {
+        headerName: 'Grading',
+        field: 'placeholderReleaseGrading' as any,
+        cellRenderer: ReleaseGradingCell,
+        cellRendererParams: {
+          handlePublishGradingAll: (id: number) =>
+            dispatch(GroundControlActions.publishGradingAll(id)),
+          handleUnpublishGradingAll: (id: number) =>
+            dispatch(GroundControlActions.unpublishGradingAll(id))
+        },
+        filter: false,
+        resizable: false,
+        sortable: false,
+        cellStyle: { padding: 0 }
       },
-      cellRendererParams: {
-        handleDeleteAssessment: props.handleDeleteAssessment
-      },
-      filter: false,
-      resizable: false,
-      sortable: false,
-      cellStyle: { padding: 0 }
-    }
-  ];
+      {
+        headerName: 'Actions',
+        field: 'placeholderDelete' as any,
+        cellRenderer: ({ data }: { data: AssessmentOverview }) => {
+          return (
+            <>
+              <DeleteCell
+                data={data}
+                handleDeleteAssessment={(id: number) =>
+                  dispatch(GroundControlActions.deleteAssessment(id))
+                }
+              />
+              <ConfigureCell
+                data={data}
+                handleConfigureAssessment={(
+                  id: number,
+                  hasVotingFeatures: boolean,
+                  hasTokenCounter: boolean
+                ) =>
+                  dispatch(
+                    GroundControlActions.configureAssessment(id, hasVotingFeatures, hasTokenCounter)
+                  )
+                }
+                handleAssignEntriesForVoting={(id: number) =>
+                  dispatch(GroundControlActions.assignEntriesForVoting(id))
+                }
+              />
+            </>
+          );
+        },
+        filter: false,
+        resizable: false,
+        sortable: false,
+        cellStyle: { padding: 0 }
+      }
+    ],
+    [dispatch]
+  );
 
   const controls = (
     <div className="GridControls ground-control-controls">
       <Button
         active={showDropzone}
         icon={IconNames.CLOUD_UPLOAD}
         intent={showDropzone ? Intent.PRIMARY : Intent.NONE}
-        onClick={toggleDropzone}
+        onClick={() => setShowDropzone(prev => !prev)}
       >
         <span className="hidden-xs">Upload assessment</span>
       </Button>
       <DefaultChapterSelect />
-      <Button icon={IconNames.REFRESH} onClick={props.handleAssessmentOverviewFetch}>
+      <Button
+        icon={IconNames.REFRESH}
+        onClick={() => dispatch(SessionActions.fetchAssessmentOverviews())}
+      >
         <span className="hidden-xs">Refresh assessments</span>
       </Button>
     </div>
@@ -189,7 +193,9 @@ const GroundControl: React.FC<Props> = props => {
   const dropzone = (
     <Collapse isOpen={showDropzone} keepChildrenMounted={true}>
       <Dropzone
-        handleUploadAssessment={props.handleUploadAssessment}
+        handleUploadAssessment={(file: File, forceUpdate: boolean, assessmentConfigId: number) =>
+          dispatch(GroundControlActions.uploadAssessment(file, forceUpdate, assessmentConfigId))
+        }
         assessmentConfigurations={assessmentConfigurations}
       />
     </Collapse>
@@ -233,8 +239,8 @@ const GroundControl: React.FC<Props> = props => {
 
   const loadContent = () => {
     // Always load AssessmentOverviews and CourseConfigs to get the latest values (just in case)
-    props.handleAssessmentOverviewFetch();
-    props.handleFetchCourseConfigs();
+    dispatch(SessionActions.fetchAssessmentOverviews());
+    dispatch(SessionActions.fetchCourseConfig());
   };
 
   return (
@@ -252,4 +258,9 @@ const dateFilterComparator = (filterDate: Date, cellValue: string) => {
   return cellDate < filterDate ? -1 : cellDate > filterDate ? 1 : 0;
 };
 
+// react-router lazy loading
+// https://reactrouter.com/en/main/route/lazy
+export const Component = GroundControl;
+Component.displayName = 'GroundControl';
+
 export default GroundControl;