Migrate to useDispatch and useSelector (#2759)

* Rename Dashboard component to match filename

The component should be called `AchievementDashboard` instead.

* Use `useDispatch` in achievement dashboard

* Use `useSelector` for achievement dashboard

* Remove unused props and components

* Update typing of AchievementControl component

* Refactor AchievementControl

* Remove extra spaces
* Destructure props directly in argument

* Use `useDispatch` in AchievementControl

* Use `useSelector` in AchievementControl

* Remove unused types and components

* Use `useDispatch` in GradingEditor

* Remove unused types and components

Also refactored typings for dispatch handlers for readability.

* Refactor `DefaultChapterSelect`

Improves typing and consistency with the rest of the codebase.

* Use `useDispatch` in DefaultChapterSelect

* Use `useSession` in DefaultChapterSelect

It encompasses all the selector needs of the component.

* Remove unused types and components

* Fix incorrect `sourceChapter` type in app state

* Refactor `MissionCreator`

Improves typing and consistency with the rest of the codebase.

* Use `useDispatch` in MissionCreator

* Remove console log statements

* Remove unused types and components

Author: RichDom2185

src/commons/application/types/SessionTypes.ts

@@ -104,7 +104,7 @@ export type SessionState = {
   readonly enableAchievements?: boolean;
   readonly enableSourcecast?: boolean;
   readonly enableStories?: boolean;
-  readonly sourceChapter?: number;
+  readonly sourceChapter?: Chapter;
   readonly sourceVariant?: Variant;
   readonly moduleHelpText?: string;
   readonly assetsPrefix?: string;

src/commons/missionCreator/MissionCreator.tsx

@@ -1,8 +1,10 @@
 import { FileInput } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import * as React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { parseString } from 'xml2js';
 
+import { updateAssessment } from '../application/actions/SessionActions';
 import {
   Assessment,
   AssessmentOverview,
@@ -17,27 +19,26 @@ import {
   storeLocalAssessmentOverview
 } from '../XMLParser/XMLParserHelper';
 
-type MissionCreatorProps = DispatchProps & OwnProps;
-
-export type DispatchProps = {
-  newAssessment: (assessment: Assessment) => void;
-};
-
-type OwnProps = {
+type Props = {
   updateEditingOverview: (overview: AssessmentOverview) => void;
 };
 
-function MissionCreator(props: MissionCreatorProps) {
-  const [fileInputText, setFileInputText] = React.useState('Import XML');
+const MissionCreator: React.FC<Props> = props => {
+  const [fileInputText, setFileInputText] = useState('Import XML');
   let fileReader: FileReader | undefined = undefined;
 
-  React.useEffect(() => {
+  const dispatch = useDispatch();
+  const newAssessment = useCallback(
+    (assessment: Assessment) => dispatch(updateAssessment(assessment)),
+    [dispatch]
+  );
+
+  useEffect(() => {
     const assessment = retrieveLocalAssessment();
     if (assessment) {
-      props.newAssessment(assessment);
+      newAssessment(assessment);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.newAssessment]);
+  }, [newAssessment]);
 
   const handleFileRead = (file: any) => (e: any) => {
     if (!fileReader) {
@@ -46,18 +47,16 @@ function MissionCreator(props: MissionCreatorProps) {
     const content = fileReader.result;
     if (content) {
       parseString(content, (err: any, result: any) => {
-        console.dir(file);
         try {
           const entireAssessment: [AssessmentOverview, Assessment] = makeEntireAssessment(result);
           entireAssessment[0].fileName = file.name.slice(0, -4);
           storeLocalAssessmentOverview(entireAssessment[0]);
           props.updateEditingOverview(entireAssessment[0]);
 
           storeLocalAssessment(entireAssessment[1]);
-          props.newAssessment(entireAssessment[1]);
+          newAssessment(entireAssessment[1]);
           setFileInputText('Success!');
         } catch (err) {
-          console.log(err);
           setFileInputText('Invalid XML!');
         }
       });
@@ -77,7 +76,7 @@ function MissionCreator(props: MissionCreatorProps) {
     storeLocalAssessmentOverview(overviewTemplate());
     props.updateEditingOverview(overviewTemplate());
     storeLocalAssessment(assessmentTemplate());
-    props.newAssessment(assessmentTemplate());
+    newAssessment(assessmentTemplate());
   };
 
   return (
@@ -95,6 +94,6 @@ function MissionCreator(props: MissionCreatorProps) {
       </div>
     </div>
   );
-}
+};
 
 export default MissionCreator;

src/commons/missionCreator/MissionCreatorContainer.ts

@@ -10,9 +10,15 @@ import {
   Pre
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import ReactMde, { ReactMdeProps } from 'react-mde';
+import { useDispatch } from 'react-redux';
 
+import {
+  reautogradeAnswer,
+  submitGrading,
+  submitGradingAndContinue
+} from '../../../../commons/application/actions/SessionActions';
 import ControlButton from '../../../../commons/ControlButton';
 import Markdown from '../../../../commons/Markdown';
 import { Prompt } from '../../../../commons/ReactRouterPrompt';
@@ -24,22 +30,14 @@ import {
 } from '../../../../commons/utils/notifications/NotificationsHelper';
 import { convertParamToInt } from '../../../../commons/utils/ParamParseHelper';
 
-type GradingEditorProps = DispatchProps & OwnProps;
-
 type GradingSaveFunction = (
   submissionId: number,
   questionId: number,
   xpAdjustment: number | undefined,
   comments?: string
 ) => void;
 
-export type DispatchProps = {
-  handleGradingSave: GradingSaveFunction;
-  handleGradingSaveAndContinue: GradingSaveFunction;
-  handleReautogradeAnswer: (submissionId: number, questionId: number) => void;
-};
-
-type OwnProps = {
+type Props = {
   solution: number | string | null;
   questionId: number;
   submissionId: number;
@@ -55,7 +53,22 @@ type OwnProps = {
 
 const gradingEditorButtonClass = 'grading-editor-button';
 
-const GradingEditor: React.FC<GradingEditorProps> = props => {
+const GradingEditor: React.FC<Props> = props => {
+  const dispatch = useDispatch();
+  const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
+    () =>
+      ({
+        handleGradingSave: (...args) => dispatch(submitGrading(...args)),
+        handleGradingSaveAndContinue: (...args) => dispatch(submitGradingAndContinue(...args)),
+        handleReautogradeAnswer: (...args) => dispatch(reautogradeAnswer(...args))
+      }) satisfies {
+        handleGradingSave: GradingSaveFunction;
+        handleGradingSaveAndContinue: GradingSaveFunction;
+        handleReautogradeAnswer: (submissionId: number, questionId: number) => void;
+      },
+    [dispatch]
+  );
+
   /**
    * A potentially null string which defines the
    * result for the number XP input. This property being null
@@ -140,7 +153,7 @@ const GradingEditor: React.FC<GradingEditorProps> = props => {
     comments?: string
   ) => {
     const callback = (): void => {
-      props.handleGradingSaveAndContinue(submissionId, questionId, xpAdjustment, comments!);
+      handleGradingSaveAndContinue(submissionId, questionId, xpAdjustment, comments!);
     };
     setCurrentlySaving(true);
     // TODO: Check (not sure how) if this results in a regression.
@@ -159,7 +172,7 @@ const GradingEditor: React.FC<GradingEditorProps> = props => {
       positiveIntent: 'danger'
     });
     if (confirm) {
-      props.handleReautogradeAnswer(props.submissionId, props.questionId);
+      handleReautogradeAnswer(props.submissionId, props.questionId);
     }
   };
 
@@ -300,7 +313,7 @@ const GradingEditor: React.FC<GradingEditorProps> = props => {
             <ControlButton
               label="Save Changes"
               icon={IconNames.FLOPPY_DISK}
-              onClick={validateXpBeforeSave(props.handleGradingSave)}
+              onClick={validateXpBeforeSave(handleGradingSave)}
               options={saveButtonOpts}
             />
           </div>

src/pages/academy/grading/subcomponents/GradingEditor.tsx

@@ -57,7 +57,7 @@ import { SideContentTab, SideContentType } from '../../../../commons/sideContent
 import Workspace, { WorkspaceProps } from '../../../../commons/workspace/Workspace';
 import { WorkspaceLocation, WorkspaceState } from '../../../../commons/workspace/WorkspaceTypes';
 import { AnsweredQuestion } from '../../../../features/grading/GradingTypes';
-import GradingEditor from './GradingEditorContainer';
+import GradingEditor from './GradingEditor';
 
 type GradingWorkspaceProps = {
   submissionId: number;

src/pages/academy/grading/subcomponents/GradingEditorContainer.ts

@@ -12,7 +12,7 @@ import {
   AssessmentOverview
 } from '../../../commons/assessment/AssessmentTypes';
 import ContentDisplay from '../../../commons/ContentDisplay';
-import DefaultChapterSelect from './subcomponents/DefaultChapterSelectContainer';
+import DefaultChapterSelect from './subcomponents/DefaultChapterSelect';
 import DeleteCell from './subcomponents/GroundControlDeleteCell';
 import Dropzone from './subcomponents/GroundControlDropzone';
 import EditCell from './subcomponents/GroundControlEditCell';

src/pages/academy/grading/subcomponents/GradingWorkspace.tsx

@@ -1,57 +1,59 @@
 import { Button, Classes, Dialog, Intent, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { ItemListRenderer, ItemRenderer, Select } from '@blueprintjs/select';
-import { Chapter, Variant } from 'js-slang/dist/types';
-import * as React from 'react';
+import { Variant } from 'js-slang/dist/types';
+import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import Constants from 'src/commons/utils/Constants';
+import { useSession } from 'src/commons/utils/Hooks';
 
 import {
   SALanguage,
   sourceLanguages,
   styliseSublanguage
 } from '../../../../commons/application/ApplicationTypes';
 import ControlButton from '../../../../commons/ControlButton';
+import { changeSublanguage } from '../../../../commons/workspace/WorkspaceActions';
 
-export type DefaultChapterSelectProps = DispatchProps & StateProps;
+const DefaultChapterSelect: React.FC = () => {
+  const [chosenSublang, setSublanguage] = useState<SALanguage>(sourceLanguages[0]);
+  const [isDialogOpen, setDialogState] = useState(false);
 
-export type DispatchProps = {
-  handleUpdateSublanguage: (sublang: SALanguage) => void;
-};
-
-export type StateProps = {
-  sourceChapter: Chapter;
-  sourceVariant: Variant;
-};
+  const {
+    // Temporarily load the defaults when the course configuration fetch has yet to return
+    sourceChapter = Constants.defaultSourceChapter,
+    sourceVariant = Constants.defaultSourceVariant
+  } = useSession();
 
-const DefaultChapterSelect: React.FunctionComponent<DefaultChapterSelectProps> = props => {
-  const { handleUpdateSublanguage } = props;
-  const { sourceChapter, sourceVariant } = props;
-
-  const [chosenSublang, setSublanguage] = React.useState<SALanguage>(sourceLanguages[0]);
-  const [isDialogOpen, setDialogState] = React.useState<boolean>(false);
+  const dispatch = useDispatch();
+  const handleUpdateSublanguage = useCallback(
+    (sublang: SALanguage) => dispatch(changeSublanguage(sublang)),
+    [dispatch]
+  );
 
-  const handleOpenDialog = React.useCallback(
+  const handleOpenDialog = useCallback(
     (choice: SALanguage) => {
       setDialogState(true);
       setSublanguage(choice);
     },
     [setDialogState, setSublanguage]
   );
-  const handleCloseDialog = React.useCallback(() => {
+  const handleCloseDialog = useCallback(() => {
     setDialogState(false);
   }, [setDialogState]);
-  const handleConfirmDialog = React.useCallback(() => {
+  const handleConfirmDialog = useCallback(() => {
     setDialogState(false);
     handleUpdateSublanguage(chosenSublang);
   }, [chosenSublang, setDialogState, handleUpdateSublanguage]);
 
-  const chapterRenderer: ItemRenderer<SALanguage> = React.useCallback(
+  const chapterRenderer: ItemRenderer<SALanguage> = useCallback(
     (lang, { handleClick }) => (
       <MenuItem key={lang.displayName} onClick={handleClick} text={lang.displayName} />
     ),
     []
   );
 
-  const chapterListRenderer: ItemListRenderer<SALanguage> = React.useCallback(
+  const chapterListRenderer: ItemListRenderer<SALanguage> = useCallback(
     ({ itemsParentRef, renderItem, items }) => {
       const defaultChoices = items.filter(({ variant }) => variant === Variant.DEFAULT);
       const variantChoices = items.filter(({ variant }) => variant !== Variant.DEFAULT);

src/pages/academy/groundControl/GroundControl.tsx

@@ -4,8 +4,8 @@ import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 import { Role } from '../../commons/application/ApplicationTypes';
 import NotFound from '../notFound/NotFound';
-import AchievementControl from './control/AchievementControlContainer';
-import AchievementDashboard from './subcomponents/AchievementDashboardContainer';
+import AchievementControl from './control/AchievementControl';
+import AchievementDashboard from './subcomponents/AchievementDashboard';
 
 const Achievement: React.FC = () => {
   const role = useTypedSelector(state => state.session.role!);