Refactor frontend part 6 (#2800)

* Add generic type argument to column definitions

Improves type safety.

* Migrate bp4 classes to bp5

This was missed during the initial migration.

* Remove unused `AcademyReducer` and dependents

Dependents include the associated types and tests.

* Update imports

Improves correctness and consistency.

* Fix lint

* Undo test import change

It was causing the tests to fail.

* Remove unnecessay `loadContentDispatch` sometimes

This is now no longer needed since we made the prop optional.

* Update test snapshots

* Make component typings more consistent

* Standardize to lambda function
* Standardize to `React.FC` typing
* Remove unnecessary props parameter typing
* Destructure props directly in function parameter

* Bump dependencies

* Fix class name typo

* Change relative import to project-based import

* Bump dependencies

* Update test snapshots

* Standardize typings

* Use `React.FC` type for components
* Type props as `Props` unless exported
* Place props type immediately above component
* Use lambda functions for components
* Destructure props in function parameter
* Use types for props, not interfaces
* Combine unnecessary `OwnProps` to props type
* Remove unused exports of props types

Remaining components will be migrated in the future.

* Remove unnecessary generic type arguments

* Standardize ControlBar components typings

* Type props as `Props` unless exported
* Place props type immediately above component

* Standardize more component typings

Also removed some unnecessary `useState` type arguments.

* Fix compile error

* Standardize remaining component typings

Also removed some unnecessary `useState` type arguments.

* Ban `React.FunctionComponent` type

Prefer the more succint `React.FC` instead.

* Ban `useSelector` import

We want to always use `useTypedSelector` for type-safety.

Author: RichDom2185

.eslintrc.json

@@ -2,6 +2,22 @@
   "extends": ["react-app", "plugin:@typescript-eslint/recommended"],
   "plugins": ["simple-import-sort"],
   "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "react-redux",
+            "importNames": [
+              // TODO: Create typed hook for useDispatch
+              // "useDispatch",
+              "useSelector"
+            ],
+            "message": "Use the typed hook \"useTypedSelector\" instead."
+          }
+        ]
+      }
+    ],
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/camelcase": "off",
@@ -11,7 +27,19 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/ban-ts-comment": "warn",
-    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        // TODO: Change this to true someday
+        "extendDefaults": false,
+        "types": {
+          "React.FunctionComponent": {
+            "message": "Use React.FC instead",
+            "fixWith": "React.FC"
+          }
+        }
+      }
+    ],
     "simple-import-sort/imports": "error"
   }
 }

src/assets/PortSvg.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
+
 type Props = {
   port: string;
 };
 
-const PortSvg = ({ port }: Props) => (
+const PortSvg: React.FC<Props> = ({ port }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     id="port-svg6348"

src/commons/ControlButton.tsx

@@ -11,14 +11,6 @@ type ButtonOptions = {
   type?: 'submit' | 'reset' | 'button';
 };
 
-type ControlButtonProps = {
-  label?: string;
-  icon?: IconName;
-  onClick?: () => void;
-  options?: Partial<ButtonOptions>;
-  isDisabled?: boolean;
-};
-
 const defaultOptions = {
   className: '',
   fullWidth: false,
@@ -27,7 +19,15 @@ const defaultOptions = {
   minimal: true
 };
 
-const ControlButton: React.FC<ControlButtonProps> = ({
+type Props = {
+  label?: string;
+  icon?: IconName;
+  onClick?: () => void;
+  options?: Partial<ButtonOptions>;
+  isDisabled?: boolean;
+};
+
+const ControlButton: React.FC<Props> = ({
   label = '',
   icon,
   onClick,

src/commons/Markdown.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { Converter } from 'showdown';
 
-type MarkdownProps = {
+type Props = {
   className?: string;
   content: string;
   openLinksInNewWindow?: boolean;
@@ -12,7 +12,7 @@ type MarkdownProps = {
   tasklists?: boolean;
 };
 
-const Markdown: React.FC<MarkdownProps> = props => {
+const Markdown: React.FC<Props> = props => {
   const converter = new Converter({
     tables: true,
     simplifiedAutoLink: props.simplifiedAutoLink,

src/commons/SimpleDropdown.tsx

@@ -10,9 +10,13 @@ type Props<T extends OptionType> = {
   popoverProps?: Partial<React.ComponentProps<typeof Popover2>>;
 };
 
-function SimpleDropdown<T extends OptionType>(props: Props<T>) {
-  const { options, selectedValue, onClick, buttonProps, popoverProps } = props;
-
+const SimpleDropdown = <T extends OptionType>({
+  options,
+  selectedValue,
+  onClick,
+  buttonProps,
+  popoverProps
+}: Props<T>) => {
   const handleClick = (value: T['value']) => {
     onClick?.(value);
   };
@@ -37,6 +41,6 @@ function SimpleDropdown<T extends OptionType>(props: Props<T>) {
       <Button {...buttonProps}>{buttonLabel()}</Button>
     </Popover2>
   );
-}
+};
 
 export default SimpleDropdown;

src/commons/__tests__/ContentDisplay.tsx

@@ -2,8 +2,7 @@ import ContentDisplay, { ContentDisplayProps } from '../ContentDisplay';
 import { renderTreeJson } from '../utils/TestUtils';
 
 const mockProps: ContentDisplayProps = {
-  display: <div> Test Content </div>,
-  loadContentDispatch: () => {}
+  display: <div> Test Content </div>
 };
 
 test('ContentDisplay page renders correctly', () => {

src/commons/achievement/AchievementCard.tsx

@@ -7,17 +7,21 @@ import { AchievementStatus } from '../../features/achievement/AchievementTypes';
 import AchievementDeadline from './card/AchievementDeadline';
 import AchievementXp from './card/AchievementXp';
 
-type AchievementCardProps = {
+type Props = {
   uuid: string;
   focusState: [string, any];
   isDropdownOpen?: boolean;
   shouldRender: boolean;
   toggleDropdown?: () => void;
 };
 
-const AchievementCard: React.FC<AchievementCardProps> = props => {
-  const { uuid, focusState, isDropdownOpen, shouldRender, toggleDropdown } = props;
-
+const AchievementCard: React.FC<Props> = ({
+  uuid,
+  focusState,
+  isDropdownOpen,
+  shouldRender,
+  toggleDropdown
+}) => {
   const inferencer = useContext(AchievementContext);
 
   const [focusUuid, setFocusUuid] = focusState;

src/commons/achievement/AchievementCommentCard.tsx

@@ -7,10 +7,12 @@ import { useTypedSelector } from '../utils/Hooks';
 import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { assessmentTypeLink } from '../utils/ParamParseHelper';
 
-const AchievementCommentCard: React.FC<{
+type Props = {
   assessment: Assessment;
   showToQuestion: boolean;
-}> = ({ assessment, showToQuestion }) => {
+};
+
+const AchievementCommentCard: React.FC<Props> = ({ assessment, showToQuestion }) => {
   const navigate = useNavigate();
   const courseId = useTypedSelector(store => store.session.courseId);
   const toMission = useMemo(

src/commons/achievement/AchievementFilter.tsx

@@ -4,13 +4,13 @@ import React from 'react';
 import { getFilterColor } from '../../features/achievement/AchievementConstants';
 import { FilterStatus } from '../../features/achievement/AchievementTypes';
 
-type AchievementFilterProps = {
+type Props = {
   filterState: [FilterStatus, any];
   icon: IconName;
   ownStatus: FilterStatus;
 };
 
-const AchievementFilter: React.FC<AchievementFilterProps> = ({ filterState, icon, ownStatus }) => {
+const AchievementFilter: React.FC<Props> = ({ filterState, icon, ownStatus }) => {
   const [globalStatus, setGlobalStatus] = filterState;
 
   return (

src/commons/achievement/AchievementManualEditor.tsx

@@ -10,15 +10,6 @@ import {
 
 import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
-type AchievementManualEditorProps = {
-  hiddenState: [boolean, any];
-  userState: [AchievementUser | undefined, any];
-  studio: string;
-  users: AchievementUser[];
-  getUsers: () => void;
-  updateGoalProgress: (studentCourseRegId: number, progress: GoalProgress) => void;
-};
-
 const GoalSelect = Select.ofType<AchievementGoal>();
 const goalRenderer: ItemRenderer<AchievementGoal> = (goal, { handleClick }) => (
   <MenuItem key={goal.uuid} onClick={handleClick} text={goal.text} />
@@ -40,7 +31,16 @@ export function updateGoalProcessed() {
   showSuccessMessage('Goal updated');
 }
 
-const AchievementManualEditor: React.FC<AchievementManualEditorProps> = props => {
+type Props = {
+  hiddenState: [boolean, any];
+  userState: [AchievementUser | undefined, any];
+  studio: string;
+  users: AchievementUser[];
+  getUsers: () => void;
+  updateGoalProgress: (studentCourseRegId: number, progress: GoalProgress) => void;
+};
+
+const AchievementManualEditor: React.FC<Props> = props => {
   const { userState, hiddenState, studio, getUsers, updateGoalProgress } = props;
   const users =
     studio === 'Staff'
@@ -75,7 +75,7 @@ const AchievementManualEditor: React.FC<AchievementManualEditorProps> = props =>
 
   const [goal, changeGoal] = useState<AchievementGoal | undefined>(undefined);
   const [selectedUser, changeSelectedUser] = userState;
-  const [count, changeCount] = useState<number>(0);
+  const [count, changeCount] = useState(0);
   const [viewHidden, changeViewHidden] = hiddenState;
 
   const updateGoal = () => {