Bump Prettier and ESLint, improve code quality and typing

craco.config.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const webpack = require('webpack');
 
 const cracoConfig = {
@@ -178,4 +178,4 @@ const replaceSlashes = target => {
   return target.replaceAll('/', '[/\\\\]');
 };
 
-module.exports = cracoConfig
+module.exports = cracoConfig;

eslint.config.js

@@ -58,11 +58,11 @@ module.exports = tseslint.config(
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/ban-ts-comment': 'warn',
-      '@typescript-eslint/ban-types': [
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      '@typescript-eslint/no-restricted-types': [
         'error',
         {
-          // TODO: Change this to true someday
-          extendDefaults: false,
           types: {
             'React.FunctionComponent': {
               message: 'Use React.FC instead',

package.json

@@ -125,8 +125,6 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.7",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-textarea-autosize": "^8.0.0",
@@ -140,18 +138,18 @@
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.1.1",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react": "^7.35.0",
     "//": "See: https://github.com/facebook/react/issues/28313#issuecomment-2076798972, https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2076413457",
     "eslint-plugin-react-hooks": "5.1.0-canary-cb151849e1-20240424",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
     "npm-run-all2": "^6.0.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "prettier": "~3.0.0",
+    "prettier": "^3.3.3",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
     "react-scripts": "^5.0.1",
@@ -163,7 +161,7 @@
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^7.14.1",
+    "typescript-eslint": "^8.1.0",
     "url": "^0.11.1",
     "webpack-bundle-analyzer": "^4.9.0"
   },

src/commons/achievement/AchievementManualEditor.tsx

@@ -50,8 +50,8 @@ const AchievementManualEditor: React.FC<Props> = props => {
             user1.name != null && user2.name != null
               ? user1.name.localeCompare(user2.name)
               : user1.name == null
-              ? 1 // user1.name is null, user1 > user2
-              : -1 // user2.name is null, user1 < user2
+                ? 1 // user1.name is null, user1 > user2
+                : -1 // user2.name is null, user1 < user2
         )
       : props.users
           .filter(user => user.group === studio)
@@ -60,8 +60,8 @@ const AchievementManualEditor: React.FC<Props> = props => {
               user1.name != null && user2.name != null
                 ? user1.name.localeCompare(user2.name)
                 : user1.name == null
-                ? 1 // user1.name is null, user1 > user2
-                : -1 // user2.name is null, user1 < user2
+                  ? 1 // user1.name is null, user1 > user2
+                  : -1 // user2.name is null, user1 < user2
           );
 
   useEffect(() => {
@@ -88,8 +88,12 @@ const AchievementManualEditor: React.FC<Props> = props => {
       };
       updateGoalProgress(selectedUser.courseRegId, progress);
     } else {
-      !goal && showWarningMessage('Goal not selected');
-      !selectedUser && showWarningMessage('User not selected');
+      if (!goal) {
+        showWarningMessage('Goal not selected');
+      }
+      if (!selectedUser) {
+        showWarningMessage('User not selected');
+      }
     }
   };
 

src/commons/achievement/utils/AchievementInferencer.ts

@@ -907,10 +907,10 @@ class AchievementInferencer {
     node.status = achievementCompleted
       ? AchievementStatus.COMPLETED
       : hasReleased
-      ? hasUnexpiredDeadline
-        ? AchievementStatus.ACTIVE
-        : AchievementStatus.EXPIRED
-      : AchievementStatus.UNRELEASED;
+        ? hasUnexpiredDeadline
+          ? AchievementStatus.ACTIVE
+          : AchievementStatus.EXPIRED
+        : AchievementStatus.UNRELEASED;
   }
 
   /**

src/commons/achievement/utils/InsertFakeAchievements.ts

@@ -114,25 +114,27 @@ function insertFakeAchievements(
   // will not appear if there are no completed assessments of that type
   categorisedUuids.forEach((uuids, idx) => {
     const assessmentType = assessmentTypes[idx];
-    uuids.length > 0 &&
-      inferencer.insertFakeAchievement({
-        uuid: assessmentType,
-        title: 'Completed ' + assessmentType,
-        xp: 0,
-        isVariableXp: false,
-        deadline: undefined,
-        release: undefined,
-        isTask: true,
-        position: -1 - idx, // negative number to ensure that they stay on top
-        prerequisiteUuids: uuids,
-        goalUuids: [],
-        cardBackground: `${cardBackgroundUrl}/default.png`,
-        view: {
-          coverImage: `${coverImageUrl}/default.png`,
-          description: 'Your completed ' + assessmentType + ' are listed here!',
-          completionText: ''
-        }
-      });
+    if (uuids.length == 0) {
+      return;
+    }
+    inferencer.insertFakeAchievement({
+      uuid: assessmentType,
+      title: 'Completed ' + assessmentType,
+      xp: 0,
+      isVariableXp: false,
+      deadline: undefined,
+      release: undefined,
+      isTask: true,
+      position: -1 - idx, // negative number to ensure that they stay on top
+      prerequisiteUuids: uuids,
+      goalUuids: [],
+      cardBackground: `${cardBackgroundUrl}/default.png`,
+      view: {
+        coverImage: `${coverImageUrl}/default.png`,
+        description: 'Your completed ' + assessmentType + ' are listed here!',
+        completionText: ''
+      }
+    });
   });
 }
 

src/commons/application/ApplicationTypes.ts

@@ -561,7 +561,7 @@ export const createDefaultStoriesEnv = (
   chapter: Chapter,
   variant: Variant
 ): StoriesEnvState => ({
-  context: createContext<String>(chapter, [], envName, variant),
+  context: createContext<string>(chapter, [], envName, variant),
   execTime: 1000,
   isRunning: false,
   output: [],

src/commons/controlBar/ControlBarSessionButton.tsx

@@ -215,8 +215,8 @@ export class ControlBarSessionButtons extends React.PureComponent<
                 this.props.editorSessionId === ''
                   ? undefined
                   : this.props.sharedbConnected
-                  ? Colors.GREEN3
-                  : Colors.RED3
+                    ? Colors.GREEN3
+                    : Colors.RED3
             }}
             isDisabled={this.props.isFolderModeEnabled}
           />

src/commons/controlBar/ControlBarToggleFolderModeButton.tsx

@@ -20,8 +20,8 @@ export const ControlBarToggleFolderModeButton: React.FC<Props> = ({
   const tooltipContent = isSessionActive
     ? 'Currently unsupported while a collaborative session is active'
     : isPersistenceActive
-    ? 'Currently unsupported while a persistence method is active'
-    : `${isFolderModeEnabled ? 'Disable' : 'Enable'} Folder mode`;
+      ? 'Currently unsupported while a persistence method is active'
+      : `${isFolderModeEnabled ? 'Disable' : 'Enable'} Folder mode`;
   return (
     <Tooltip content={tooltipContent}>
       <ControlButton

src/commons/editor/Editor.tsx

@@ -15,8 +15,8 @@ import 'js-slang/dist/editors/ace/theme/source';
  *
  * Supersedes changes from: https://github.com/source-academy/frontend/issues/2543
  */
-import 'ace-builds/src-noconflict/keybinding-vim';
 import 'ace-builds/src-noconflict/keybinding-emacs';
+import 'ace-builds/src-noconflict/keybinding-vim';
 
 import { Card } from '@blueprintjs/core';
 import * as AceBuilds from 'ace-builds';
@@ -603,7 +603,7 @@ const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
         editor.focus();
       }
       closer = null;
-      callback && callback();
+      callback?.();
     }
 
     /**

src/commons/editor/UseHighlighting.tsx

@@ -80,14 +80,14 @@ const useHighlighting: EditorHook = (inProps, outProps, keyBindings, reactAceRef
   outProps.onChange = React.useCallback(
     (value: string, event?: any) => {
       handleVariableHighlighting();
-      prevOnChange && prevOnChange(value, event);
+      prevOnChange?.(value, event);
     },
     [handleVariableHighlighting, prevOnChange]
   );
   outProps.onCursorChange = React.useCallback(
     (value: any, event?: any) => {
       handleVariableHighlighting();
-      prevOnCursorChange && prevOnCursorChange(value, event);
+      prevOnCursorChange?.(value, event);
     },
     [handleVariableHighlighting, prevOnCursorChange]
   );

src/commons/mocks/GradingMocks.ts

@@ -100,7 +100,7 @@ export const mockFetchGradingOverview = (
   accessToken: string,
   group: boolean,
   pageParams: { offset: number; pageSize: number },
-  backendParams: Object
+  backendParams: object
 ): GradingOverview[] | null => {
   // mocks backend role fetching
   const permittedRoles: Role[] = [Role.Admin, Role.Staff];

src/commons/mocks/TeamFormationMocks.ts

@@ -4,7 +4,7 @@ import { TeamFormationOverview } from '../../features/teamFormation/TeamFormatio
 import { Role } from '../application/ApplicationTypes';
 import { mockFetchRole, mockFetchStudents } from './UserMocks';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const XLSX = require('xlsx');
 
 export const mockTeamFormationOverviews: TeamFormationOverview[] = [

src/commons/navigationBar/NavigationBar.tsx

@@ -14,10 +14,9 @@ import {
 } from '@blueprintjs/core';
 import { IconName, IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
-import { Location } from 'history';
 import React, { useMemo, useState } from 'react';
 import { Translation } from 'react-i18next';
-import { NavLink, Route, Routes, useLocation } from 'react-router-dom';
+import { Location, NavLink, Route, Routes, useLocation } from 'react-router-dom';
 import { i18nDefaultLangKeys } from 'src/i18n/i18next';
 import classes from 'src/styles/NavigationBar.module.scss';
 
@@ -297,8 +296,8 @@ const NavigationBar: React.FC = () => {
             ? renderPlaygroundOnlyNavbarLeftMobile()
             : renderPlaygroundOnlyNavbarLeftDesktop()
           : isMobileBreakpoint
-          ? renderFullAcademyNavbarLeftMobile()
-          : renderFullAcademyNavbarLeftDesktop()}
+            ? renderFullAcademyNavbarLeftMobile()
+            : renderFullAcademyNavbarLeftDesktop()}
         {commonNavbarRight}
       </Navbar>
 

src/commons/navigationBar/subcomponents/SicpNavigationBar.tsx

@@ -104,7 +104,7 @@ const SicpNavigationBar: React.FC = () => {
     }
   };
 
-  function search(keyStr: String, trie: TrieNode) {
+  function search(keyStr: string, trie: TrieNode) {
     const keys = [...keyStr];
     let node = trie;
     for (let i = 0; i < keys.length; i++) {
@@ -130,7 +130,7 @@ const SicpNavigationBar: React.FC = () => {
     return results;
   }
 
-  function autocomplete(incompleteKeys: String, trie: TrieNode, n: number = 25) {
+  function autocomplete(incompleteKeys: string, trie: TrieNode, n: number = 25) {
     let node = trie;
     for (let i = 0; i < incompleteKeys.length; i++) {
       if (!node.children[incompleteKeys[i]]) {

src/commons/profile/Profile.tsx

@@ -96,10 +96,10 @@ const Profile: React.FC<ProfileProps> = props => {
         return frac < 0
           ? ''
           : frac >= 0.8
-          ? ' progress-steelblue'
-          : frac >= 0.45
-          ? ' progress-deepskyblue'
-          : ' progress-skyblue';
+            ? ' progress-steelblue'
+            : frac >= 0.45
+              ? ' progress-deepskyblue'
+              : ' progress-skyblue';
       };
 
       // Given an assessment category, return its icon

src/commons/sagas/AchievementSaga.ts

@@ -158,7 +158,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
         (cseTab && cseTab.ariaHidden === 'false') ||
         (substTab && substTab.ariaHidden === 'false')
       ) {
-        introIcon && introIcon.classList.add('side-content-tab-alert-error');
+        introIcon?.classList.add('side-content-tab-alert-error');
       }
     }
     if (role && enableAchievements && !Constants.playgroundOnly) {

src/commons/sagas/RequestsSaga.ts

@@ -57,7 +57,7 @@ import Constants from '../utils/Constants';
 import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { request } from '../utils/RequestHelper';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const XLSX = require('xlsx');
 
 /**