Add TypeScript types to the redux state (#2394)

Adds some TypeScript types to the global redux state that's in `src/store.ts`. I've only added types for a few parts of the state but already it's caught quite a few bugs in the code, which I've tried to fix in this PR.

Author: bradenmacdonald

src/constants.js renamed to src/constants.ts

@@ -43,7 +43,7 @@ export const COURSE_CREATOR_STATES = {
   granted: 'granted',
   denied: 'denied',
   disallowedForThisSite: 'disallowed_for_this_site',
-};
+} as const;
 
 export const DECODED_ROUTES = {
   COURSE_UNIT: [

src/data/constants.ts

@@ -3,7 +3,7 @@
  * @readonly
  * @enum {string}
  */
-export const RequestStatus = /** @type {const} */ ({
+export const RequestStatus = {
   IN_PROGRESS: 'in-progress',
   SUCCESSFUL: 'successful',
   FAILED: 'failed',
@@ -13,7 +13,8 @@ export const RequestStatus = /** @type {const} */ ({
   PARTIAL: 'partial',
   PARTIAL_FAILURE: 'partial failure',
   NOT_FOUND: 'not-found',
-});
+} as const;
+export type RequestStatusType = (typeof RequestStatus)[keyof typeof RequestStatus];
 
 export const RequestFailureStatuses = [
   RequestStatus.FAILED,
@@ -25,39 +26,37 @@ export const RequestFailureStatuses = [
 /**
  * Team sizes enum
  * @enum
- * @type {{MIN: number, MAX: number, DEFAULT: number}}
  */
-export const TeamSizes = /** @type {const} */ ({
+export const TeamSizes = {
   DEFAULT: 5,
   MIN: 1,
   MAX: 500,
-});
+} as const;
 
 /**
  * Group types enum
  * @enum
- * @type {{PRIVATE_MANAGED: string, PUBLIC_MANAGED: string, OPEN: string}}
  */
-export const GroupTypes = /** @type {const} */ ({
+export const GroupTypes = {
   OPEN: 'open',
   PUBLIC_MANAGED: 'public_managed',
   PRIVATE_MANAGED: 'private_managed',
   OPEN_MANAGED: 'open_managed',
-});
+} as const;
 
-export const DivisionSchemes = /** @type {const} */ ({
+export const DivisionSchemes = {
   NONE: 'none',
   COHORT: 'cohort',
-});
+} as const;
 
-export const VisibilityTypes = /** @type {const} */ ({
+export const VisibilityTypes = {
   GATED: 'gated',
   LIVE: 'live',
   STAFF_ONLY: 'staff_only',
   HIDE_AFTER_DUE: 'hide_after_due',
   UNSCHEDULED: 'unscheduled',
   NEEDS_ATTENTION: 'needs_attention',
-});
+} as const;
 
 export const TOTAL_LENGTH_KEY = 'total-length';
 

src/data/slice.js renamed to src/data/slice.ts

@@ -1,14 +1,15 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
+import { type RequestStatusType } from './constants';
 
 export const LOADED = 'LOADED';
 
 const slice = createSlice({
   name: 'courseDetail',
   initialState: {
-    courseId: null,
-    status: null,
-    canChangeProvider: null,
+    courseId: null as string | null,
+    status: null as RequestStatusType | null,
+    canChangeProviders: null as null | boolean,
   },
   reducers: {
     updateStatus: (state, { payload }) => {

src/data/thunks.js renamed to src/data/thunks.ts

@@ -20,7 +20,7 @@ export function fetchCourseDetail(courseId) {
         canChangeProviders: getAuthenticatedUser().administrator || new Date(courseDetail.start) > new Date(),
       }));
     } catch (error) {
-      if (error.response && error.response.status === 404) {
+      if ((error as any).response && (error as any).response.status === 404) {
         dispatch(updateStatus({ courseId, status: RequestStatus.NOT_FOUND }));
       } else {
         dispatch(updateStatus({ courseId, status: RequestStatus.FAILED }));

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.tsx

@@ -1,29 +1,12 @@
 import React from 'react';
 import { render, screen, initializeMocks } from '@src/testUtils';
+import { selectors } from '@src/editors/data/redux';
 import AnswerOption from './AnswerOption';
 import * as hooks from './hooks';
-import { selectors } from '../../../../../data/redux';
 
 const { problem } = selectors;
 
-const initialState = {
-  problem: {
-    problemType: 'multiplechoiceresponse', // No problem type selected by default
-    // ... other problem-related state
-  },
-  app: {
-    images: {}, // No images loaded by default; use {} if it's an object keyed by IDs, or [] if it's a list
-    isLibrary: false, // Default to false; not in library context initially
-    learningContextId: 'course+org+run', // No context ID by default
-    blockId: 'block-id', // No block ID initially
-    // ... other app-related state
-  },
-  // ... any other top-level state slices
-};
-
-export default initialState;
-
-jest.mock('../../../../../data/redux', () => ({
+jest.mock('@src/editors/data/redux', () => ({
   __esModule: true,
   default: jest.fn(),
   selectors: {
@@ -44,7 +27,7 @@ jest.mock('../../../../../data/redux', () => ({
   },
 }));
 
-jest.mock('../../../../../sharedComponents/ExpandableTextArea', () => 'ExpandableTextArea');
+jest.mock('@src/editors/sharedComponents/ExpandableTextArea', () => 'ExpandableTextArea');
 
 describe('AnswerOption', () => {
   const answerWithOnlyFeedback = {
@@ -86,7 +69,7 @@ describe('AnswerOption', () => {
       isFeedbackVisible: false,
       toggleFeedback: jest.fn(),
     });
-    initializeMocks({ initialState });
+    initializeMocks();
   });
 
   test('renders correct option with feedback', () => {

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { ProblemTypeKeys } from '@src/editors/data/constants/problem';
 import {
   render, screen, fireEvent, initializeMocks,
-} from '../../../../../../testUtils';
+} from '@src/testUtils';
+import { actions } from '@src/editors/data/redux';
 import AnswersContainer from './AnswersContainer';
-import { actions } from '../../../../../data/redux';
 
 const { useAnswerContainer } = require('./hooks');
 
@@ -15,12 +15,6 @@ const answers = [
   { id: 'a2', isAnswerRange: false },
 ];
 
-const initialState = {
-  problem: {
-    answers,
-  },
-};
-
 // Mock actions module
 jest.mock('../../../../../data/redux', () => ({
   __esModule: true,
@@ -57,7 +51,7 @@ describe('AnswersContainer', () => {
   };
 
   beforeEach(() => {
-    initializeMocks({ initialState });
+    initializeMocks();
     jest.clearAllMocks();
   });
 

src/group-configurations/data/api.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 

src/group-configurations/data/selectors.js

@@ -0,0 +1,8 @@
+import { DeprecatedReduxState } from '@src/store';
+
+export const getGroupConfigurationsData = (state: DeprecatedReduxState) => (
+  state.groupConfigurations.groupConfigurations
+);
+export const getLoadingStatus = (state: DeprecatedReduxState) => state.groupConfigurations.loadingStatus;
+export const getSavingStatus = (state: DeprecatedReduxState) => state.groupConfigurations.savingStatus;
+export const getErrorMessage = (state: DeprecatedReduxState) => state.groupConfigurations.errorMessage;

src/group-configurations/data/selectors.ts

@@ -63,6 +63,7 @@ describe('groupConfigurations slice', () => {
   it('should delete an experiment configuration with deleteExperimentConfigurationSuccess', () => {
     const initialStateWithExperiment = {
       savingStatus: '',
+      errorMessage: '',
       loadingStatus: RequestStatus.IN_PROGRESS,
       groupConfigurations: {
         allGroupConfigurations: [],