Refactor frontend part 6

.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 = () => {

src/commons/achievement/AchievementOverview.tsx

@@ -6,12 +6,12 @@ import { FETCH_TOTAL_XP, FETCH_TOTAL_XP_ADMIN } from '../application/types/Sessi
 import { useTypedSelector } from '../utils/Hooks';
 import AchievementLevel from './overview/AchievementLevel';
 
-type AchievementOverviewProps = {
+type Props = {
   name: string;
   userState: [AchievementUser | undefined, any];
 };
 
-const AchievementOverview: React.FC<AchievementOverviewProps> = ({ name, userState }) => {
+const AchievementOverview: React.FC<Props> = ({ name, userState }) => {
   const [selectedUser] = userState;
   const crid = selectedUser?.courseRegId;
   const userCrid = useTypedSelector(store => store.session.courseRegId);

src/commons/achievement/AchievementTask.tsx

@@ -8,18 +8,18 @@ import {
 import { AchievementStatus, FilterStatus } from '../../features/achievement/AchievementTypes';
 import AchievementCard from './AchievementCard';
 
-type AchievementTaskProps = {
+type Props = {
   uuid: string;
   filterStatus: FilterStatus;
   focusState: [string, any];
 };
 
-const AchievementTask: React.FC<AchievementTaskProps> = ({ uuid, filterStatus, focusState }) => {
+const AchievementTask: React.FC<Props> = ({ uuid, filterStatus, focusState }) => {
   const inferencer = useContext(AchievementContext);
   const prerequisiteUuids = [...inferencer.getImmediateChildren(uuid)];
   const taskColor = getAbilityColor();
 
-  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
 
   /**

src/commons/achievement/AchievementView.tsx

@@ -17,13 +17,13 @@ import { prettifyDate } from './utils/DateHelper';
 import AchievementViewCompletion from './view/AchievementViewCompletion';
 import AchievementViewGoal from './view/AchievementViewGoal';
 
-type AchievementViewProps = {
+type Props = {
   focusUuid: string;
   assessments?: Map<number, Assessment>;
   userState?: [AchievementUser | undefined, any];
 };
 
-const AchievementView: React.FC<AchievementViewProps> = ({ focusUuid, userState }) => {
+const AchievementView: React.FC<Props> = ({ focusUuid, userState }) => {
   const assessmentId = !Number.isNaN(+focusUuid) && +focusUuid !== 0 ? +focusUuid : undefined;
   let courseRegId: number | undefined;
 

src/commons/achievement/card/AchievementDeadline.tsx

@@ -5,13 +5,13 @@ import React from 'react';
 import { DeadlineColors } from '../../../features/achievement/AchievementConstants';
 import { isExpired, prettifyDeadline, timeFromExpired } from '../utils/DateHelper';
 
-type AchievementDeadlineProps = {
+const twoDays = new Date(0, 0, 2).getTime() - new Date(0, 0, 0).getTime();
+
+type Props = {
   deadline?: Date;
 };
 
-const twoDays = new Date(0, 0, 2).getTime() - new Date(0, 0, 0).getTime();
-
-const AchievementDeadline: React.FC<AchievementDeadlineProps> = ({ deadline }) => {
+const AchievementDeadline: React.FC<Props> = ({ deadline }) => {
   // red deadline color for core achievements that are expiring in less than 2 days
   const deadlineColor =
     deadline !== undefined && !isExpired(deadline) && timeFromExpired(deadline) <= twoDays

src/commons/achievement/card/AchievementXp.tsx

@@ -2,16 +2,16 @@ import { Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
-type AchievementXpProps = {
-  isBonus: boolean;
-  xp: number;
-};
-
 const stringifyXp = (xp: number, isBonus: boolean) => {
   return (isBonus ? 'Total ' : '') + xp + ' XP';
 };
 
-const AchievementXp: React.FC<AchievementXpProps> = ({ isBonus, xp }) => {
+type Props = {
+  isBonus: boolean;
+  xp: number;
+};
+
+const AchievementXp: React.FC<Props> = ({ isBonus, xp }) => {
   return (
     <div className="xp">
       {xp !== 0 && (

src/commons/achievement/control/AchievementEditor.tsx

@@ -4,13 +4,13 @@ import { AchievementContext } from 'src/features/achievement/AchievementConstant
 import AchievementAdder from './achievementEditor/AchievementAdder';
 import EditableCard from './achievementEditor/EditableCard';
 
-type AchievementEditorProps = {
+let editableCards: JSX.Element[] = [];
+
+type Props = {
   requestPublish: () => void;
 };
 
-let editableCards: JSX.Element[] = [];
-
-const AchievementEditor: React.FC<AchievementEditorProps> = ({ requestPublish }) => {
+const AchievementEditor: React.FC<Props> = ({ requestPublish }) => {
   const inferencer = useContext(AchievementContext);
 
   /**
@@ -24,7 +24,7 @@ const AchievementEditor: React.FC<AchievementEditorProps> = ({ requestPublish })
    * at one go. The newUuid holds the newly created achievement uuid until the new achievement
    * is added into the inferencer.
    */
-  const [newUuid, setNewUuid] = useState<string>('');
+  const [newUuid, setNewUuid] = useState('');
   const allowNewUuid = newUuid === '';
   const releaseUuid = () => setNewUuid('');
 

src/commons/achievement/control/AchievementPreview.tsx

@@ -7,15 +7,12 @@ import { generateAchievementTasks } from 'src/pages/achievement/subcomponents/Ac
 
 import AchievementView from '../AchievementView';
 
-type AchievementPreviewProps = {
+type Props = {
   awaitPublish: boolean;
   publishChanges: () => void;
 };
 
-const AchievementPreview: React.FC<AchievementPreviewProps> = ({
-  awaitPublish,
-  publishChanges
-}) => {
+const AchievementPreview: React.FC<Props> = ({ awaitPublish, publishChanges }) => {
   const inferencer = useContext(AchievementContext);
 
   // Show AchievementView when viewMode is true, otherwise show AchievementTask
@@ -25,7 +22,7 @@ const AchievementPreview: React.FC<AchievementPreviewProps> = ({
    * Marks the achievement uuid that is currently on focus (selected)
    * If an achievement is focused, the cards glow and dashboard displays the AchievementView
    */
-  const focusState = useState<string>('');
+  const focusState = useState('');
   const [focusUuid] = focusState;
 
   return (