refactor: Enable TypeScript support in this repo (#1459)

Makefile

@@ -55,6 +55,7 @@ validate:
 	make validate-no-uncommitted-package-lock-changes
 	npm run i18n_extract
 	npm run lint -- --max-warnings 0
+	npm run types
 	npm run test
 	npm run build
 	npm run bundlewatch

package.json

@@ -13,14 +13,15 @@
     "build": "fedx-scripts webpack",
     "bundlewatch": "bundlewatch",
     "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "prepare": "husky install",
     "postinstall": "patch-package",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "types": "tsc --noEmit"
   },
   "author": "edX",
   "license": "AGPL-3.0",

src/constants.js → src/constants.ts

@@ -16,7 +16,7 @@ export const DECODE_ROUTES = {
   ],
   REDIRECT_HOME: 'home/:courseId',
   REDIRECT_SURVEY: 'survey/:courseId',
-};
+} as const satisfies Readonly<{ [k: string]: string | readonly string[] }>;
 
 export const ROUTES = {
   UNSUBSCRIBE: '/goal-unsubscribe/:token',
@@ -25,15 +25,15 @@ export const ROUTES = {
   DASHBOARD: 'dashboard',
   ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',
   CONSENT: 'consent',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const REDIRECT_MODES = {
   DASHBOARD_REDIRECT: 'dashboard-redirect',
   ENTERPRISE_LEARNER_DASHBOARD_REDIRECT: 'enterprise-learner-dashboard-redirect',
   CONSENT_REDIRECT: 'consent-redirect',
   HOME_REDIRECT: 'home-redirect',
   SURVEY_REDIRECT: 'survey-redirect',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const VERIFIED_MODES = [
   'professional',
@@ -44,14 +44,15 @@ export const VERIFIED_MODES = [
   'executive-education',
   'paid-executive-education',
   'paid-bootcamp',
-];
+] as const satisfies readonly string[];
 
 export const WIDGETS = {
   DISCUSSIONS: 'DISCUSSIONS',
   NOTIFICATIONS: 'NOTIFICATIONS',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const LOADING = 'loading';
 export const LOADED = 'loaded';
 export const FAILED = 'failed';
 export const DENIED = 'denied';
+export type StatusValue = typeof LOADING | typeof LOADED | typeof FAILED | typeof DENIED;

src/course-home/data/slice.js

@@ -1,10 +1,12 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
-export const DENIED = 'denied';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+  DENIED,
+} from '@src/constants';
 
 const slice = createSlice({
   name: 'course-home',

src/courseware/course/course-exit/CourseRecommendations.jsx

@@ -12,9 +12,9 @@ import {
 } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import truncate from 'truncate-html';
+import { FAILED, LOADED, LOADING } from '@src/constants';
 import { useModel } from '../../../generic/model-store';
 import fetchCourseRecommendations from './data/thunks';
-import { FAILED, LOADED, LOADING } from './data/slice';
 import CatalogSuggestion from './CatalogSuggestion';
 import PageLoading from '../../../generic/PageLoading';
 import { logClick } from './utils';

src/courseware/course/course-exit/data/slice.js

@@ -1,9 +1,10 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
-
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+} from '@src/constants';
 
 const slice = createSlice({
   courseId: null,

src/courseware/course/new-sidebar/SidebarContext.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { WIDGETS } from '@src/constants';
+import type { SIDEBARS } from './sidebars';
+
+export type SidebarId = keyof typeof SIDEBARS;
+export type WidgetId = keyof typeof WIDGETS;
+export type UpgradeNotificationState = (
+  | 'accessLastHour'
+  | 'accessHoursLeft'
+  | 'accessDaysLeft'
+  | 'FPDdaysLeft'
+  | 'FPDLastHour'
+  | 'accessDateView'
+  | 'PastExpirationDate'
+);
+
+export interface SidebarContextData {
+  toggleSidebar: (sidebarId?: SidebarId | null, widgetId?: WidgetId | null) => void;
+  onNotificationSeen: () => void;
+  setNotificationStatus: React.Dispatch<'active' | 'inactive'>;
+  currentSidebar: SidebarId | null;
+  notificationStatus: 'active' | 'inactive';
+  upgradeNotificationCurrentState: UpgradeNotificationState;
+  setUpgradeNotificationCurrentState: React.Dispatch<UpgradeNotificationState>;
+  shouldDisplaySidebarOpen: boolean;
+  shouldDisplayFullScreen: boolean;
+  courseId: string;
+  unitId: string;
+  hideDiscussionbar: boolean;
+  hideNotificationbar: boolean;
+  isNotificationbarAvailable: boolean;
+  isDiscussionbarAvailable: boolean;
+}
+
+const SidebarContext = React.createContext<SidebarContextData>({} as SidebarContextData);
+
+export default SidebarContext;

src/courseware/course/new-sidebar/SidebarContextProvider.jsx → src/courseware/course/new-sidebar/SidebarContextProvider.tsx

@@ -1,7 +1,6 @@
 import React, {
   useCallback, useEffect, useMemo, useState,
 } from 'react';
-import PropTypes from 'prop-types';
 
 import isEmpty from 'lodash/isEmpty';
 
@@ -13,7 +12,13 @@ import { WIDGETS } from '../../../constants';
 import SidebarContext from './SidebarContext';
 import { SIDEBARS } from './sidebars';
 
-const SidebarProvider = ({
+interface Props {
+  courseId: string;
+  unitId: string;
+  children?: React.ReactNode;
+}
+
+const SidebarProvider: React.FC<Props> = ({
   courseId,
   unitId,
   children,
@@ -122,14 +127,4 @@ const SidebarProvider = ({
   );
 };
 
-SidebarProvider.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  unitId: PropTypes.string.isRequired,
-  children: PropTypes.node,
-};
-
-SidebarProvider.defaultProps = {
-  children: null,
-};
-
 export default SidebarProvider;

src/courseware/course/new-sidebar/common/SidebarBase.jsx → src/courseware/course/new-sidebar/common/SidebarBase.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useContext } from 'react';
-import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
@@ -10,18 +9,30 @@ import { ArrowBackIos, Close } from '@openedx/paragon/icons';
 import { useEventListener } from '../../../../generic/hooks';
 import { WIDGETS } from '../../../../constants';
 import messages from '../messages';
-import SidebarContext from '../SidebarContext';
+import SidebarContext, { type SidebarId } from '../SidebarContext';
 
-const SidebarBase = ({
-  title,
+interface Props {
+  title?: string;
+  ariaLabel: string;
+  sidebarId: SidebarId;
+  className?: string;
+  children: React.ReactNode;
+  showTitleBar?: boolean;
+  width?: string;
+  allowFullHeight?: boolean;
+  showBorder?: boolean;
+}
+
+const SidebarBase: React.FC<Props> = ({
+  title = '',
   ariaLabel,
   sidebarId,
   className,
   children,
-  showTitleBar,
-  width,
-  allowFullHeight,
-  showBorder,
+  showTitleBar = true,
+  width = '45rem',
+  allowFullHeight = false,
+  showBorder = true,
 }) => {
   const intl = useIntl();
   const {
@@ -58,8 +69,7 @@ const SidebarBase = ({
           onClick={() => toggleSidebar(null)}
           onKeyDown={() => toggleSidebar(null)}
           role="button"
-          tabIndex="0"
-          alt={intl.formatMessage(messages.responsiveCloseSidebarTray)}
+          tabIndex={0}
         >
           <Icon src={ArrowBackIos} />
           <span className="font-weight-bold m-2 d-inline-block">
@@ -90,25 +100,4 @@ const SidebarBase = ({
   );
 };
 
-SidebarBase.propTypes = {
-  title: PropTypes.string,
-  ariaLabel: PropTypes.string.isRequired,
-  sidebarId: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  children: PropTypes.element.isRequired,
-  showTitleBar: PropTypes.bool,
-  width: PropTypes.string,
-  allowFullHeight: PropTypes.bool,
-  showBorder: PropTypes.bool,
-};
-
-SidebarBase.defaultProps = {
-  title: '',
-  width: '45rem',
-  allowFullHeight: false,
-  showTitleBar: true,
-  className: '',
-  showBorder: true,
-};
-
 export default SidebarBase;

src/courseware/course/new-sidebar/icons/RightSidebarFilled.jsx → src/courseware/course/new-sidebar/icons/RightSidebarFilled.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const RightSidebarFilled = (props) => (
   <svg
     width={24}

src/courseware/course/new-sidebar/icons/RightSidebarOutlined.jsx → src/courseware/course/new-sidebar/icons/RightSidebarOutlined.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const RightSidebarOutlined = (props) => (
   <svg
     width={24}

src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.jsx → src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.tsx

@@ -31,7 +31,7 @@ describe('DiscussionsWidget', () => {
       excludeFetchSequence: false,
     });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    const state = store.getState();
+    const state = store.getState() as any; // TODO: remove 'any' once redux state gets types
     courseId = state.courseware.courseId;
     [unitId] = Object.keys(state.models.units);