Fix lint issues and enable refresh plugin (#3312)

* Update ESLint config

* Add missing blocks to address warning

* Add more missing blocks

* Migrate react-router config to modern RR with lazy

* Remove unnecessary double negation

* Fix whitespace and type definitions

* Refactor promise for readability

* Update lint rules and add ignore

* Remove trailing spaces and update comment

* Remove old ESLint comments

* Fix lint errors

* Ignore error to preserve behavior

Author: RichDom2185

eslint.config.mjs

@@ -1,25 +1,25 @@
 // @ts-check
 
-// import eslint from '@eslint/js';
+import eslint from '@eslint/js';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
-import { config, configs } from 'typescript-eslint';
-// import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import reactRefresh from 'eslint-plugin-react-refresh';
 
-export default config(
-  { ignores: ['eslint.config.mjs'] },
-  // eslint.configs.recommended,
-  ...configs.recommended,
+export default tseslint.config(
+  { ignores: ['eslint.config.mjs', '**/*.snap'] },
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
   // TODO: Enable when ready
-  // {
-  //   plugins: {
-  //     'react-refresh': reactRefresh
-  //   },
-  //   rules: {
-  //     'react-refresh/only-export-components': 'warn'
-  //   }
-  // },
+  {
+    plugins: {
+      'react-refresh': reactRefresh
+    },
+    rules: {
+      'react-refresh/only-export-components': 'warn'
+    }
+  },
   {
     files: ['**/*.ts*'],
     plugins: {
@@ -29,6 +29,7 @@ export default config(
     },
     rules: {
       ...reactHooksPlugin.configs['recommended-latest'].rules,
+      'no-empty': 'warn',
       'no-restricted-imports': [
         'error',
         {

src/commons/application/Application.tsx

@@ -115,11 +115,12 @@ const Application: React.FC = () => {
             dispatch(SessionActions.fetchUserAndCourse());
           }
           break;
-        case MessageTypeNames.Text:
+        case MessageTypeNames.Text: {
           const { workspaceLocation, code } = message;
           console.log(`FRONTEND: TextMessage: ${code}`);
           dispatch(WorkspaceActions.updateEditorValue(workspaceLocation, 0, code));
           break;
+        }
         case MessageTypeNames.EvalEditor:
           dispatch(WorkspaceActions.evalEditor(message.workspaceLocation));
           break;
@@ -164,4 +165,9 @@ const Application: React.FC = () => {
   );
 };
 
+// react-router lazy loading
+// https://reactrouter.com/en/main/route/lazy
+export const Component = Application;
+Component.displayName = 'Application';
+
 export default Application;

src/commons/assessment/Assessment.tsx

@@ -309,4 +309,9 @@ const collapseButton = (label: string, isOpen: boolean, toggleFunc: () => void)
   />
 );
 
+// react-router lazy loading
+// https://reactrouter.com/en/main/route/lazy
+export const Component = Assessment;
+Component.displayName = 'Assessment';
+
 export default Assessment;

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -357,7 +357,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     } = {};
 
     switch (question.type) {
-      case QuestionTypes.programming:
+      case QuestionTypes.programming: {
         const programmingQuestionData: IProgrammingQuestion = question;
         options.autogradingResults = programmingQuestionData.autogradingResults;
         options.programPrependValue = programmingQuestionData.prepend;
@@ -378,14 +378,16 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
           );
         }
         break;
-      case QuestionTypes.voting:
+      }
+      case QuestionTypes.voting: {
         const votingQuestionData: IContestVotingQuestion = question;
         options.programPrependValue = votingQuestionData.prepend;
         if (props.fromContestLeaderboard) options.editorValue = code;
         options.programPostpendValue = votingQuestionData.postpend;
         // maybe the following dispatch can be placed in a better location
         dispatch(LeaderboardActions.setWorkspaceInitialRun(votingId));
         break;
+      }
       case QuestionTypes.mcq:
         // Do nothing
         break;
@@ -413,7 +415,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     const questionType = question.type;
 
     switch (questionType) {
-      case QuestionTypes.mcq:
+      case QuestionTypes.mcq: {
         const mcqQuestionData = question;
         sendToWebview(
           Messages.McqQuestion(
@@ -425,7 +427,8 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
           )
         );
         break;
-      case QuestionTypes.programming || QuestionTypes.voting:
+      }
+      case QuestionTypes.programming || QuestionTypes.voting: {
         const prepend = question.prepend;
         const code = question.answer ?? question.solutionTemplate;
         const breakpoints = editorTabs[0]?.breakpoints ?? [];
@@ -441,6 +444,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
           )
         );
         break;
+      }
     }
     if (options.editorValue) {
       // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.

src/commons/editingWorkspace/EditingWorkspace.tsx

@@ -716,7 +716,7 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
 
 function uniq(a: string[]) {
   const seen: Record<string, boolean> = {};
-  return a.filter(item => (seen.hasOwnProperty(item) ? false : (seen[item] = true)));
+  return a.filter(item => (Object.hasOwnProperty.call(seen, item) ? false : (seen[item] = true)));
 }
 
 export default EditingWorkspace;

src/commons/fileSystem/utils.ts

@@ -103,19 +103,15 @@ export const retrieveFilesInWorkspaceAsRecord = (
  * @param fileSystem        The file system instance.
  * @param files             A mapping from file paths to file contents.
  */
-export const overwriteFilesInWorkspace = (
+export const overwriteFilesInWorkspace = async (
   workspaceLocation: WorkspaceLocation,
   fileSystem: FSModule,
   files: Record<string, string>
 ): Promise<void> => {
-  return rmFilesInDirRecursively(fileSystem, WORKSPACE_BASE_PATHS[workspaceLocation]).then(() => {
-    return new Promise(async (resolve, reject) => {
-      for (const [filePath, fileContents] of Object.entries(files)) {
-        await writeFileRecursively(fileSystem, filePath, fileContents).catch(err => reject(err));
-      }
-      resolve();
-    });
-  });
+  await rmFilesInDirRecursively(fileSystem, WORKSPACE_BASE_PATHS[workspaceLocation]);
+  for (const [filePath, fileContents] of Object.entries(files)) {
+    await writeFileRecursively(fileSystem, filePath, fileContents);
+  }
 };
 
 /**

src/commons/sagas/BackendSaga.ts

@@ -1,5 +1,3 @@
-/*eslint no-eval: "error"*/
-/*eslint-env browser*/
 import _ from 'lodash';
 import type { SagaIterator } from 'redux-saga';
 import { all, call, fork, put, select } from 'redux-saga/effects';

src/commons/sagas/__tests__/SafeEffects.test.ts

@@ -27,6 +27,7 @@ describe('Test wrapSaga', () => {
 
   test('wrapSaga handles errors appropriately', async () => {
     const errorToThrow = new Error();
+    // eslint-disable-next-line require-yield
     const wrappedSaga = wrapSaga(function* () {
       throw errorToThrow;
     });

src/commons/sideContent/content/SideContentSubstVisualizer.tsx

@@ -199,7 +199,7 @@ const SideContentSubstVisualizer: React.FC<SubstVisualizerPropsAST> = props => {
   Custom AST renderer for Stepper (Inspired by astring library)
   This custom AST renderer utilizing the recursive approach of handling rendering of various StepperNodes by
   using nested <div> and <span>. Unlike React-ace, using our own renderer make our stepper more customizable. For example,
-  we can add a code component that is hoverable by using with blueprint tooltip.   
+  we can add a code component that is hoverable by using with blueprint tooltip.
 */
 
 /** RenderContext holds relevant information to handle rendering. This will be carried along the recursive renderNode function
@@ -212,11 +212,12 @@ interface RenderContext {
   styleWrapper: StyleWrapper;
 }
 
-/* 
-  StyleWrapper is a function that returns a styling function based on the node. For example, 
-  const wrapLiteral: StyleWrapper = (node) 
-  => (preformatted) => node.type === "Literal" ? <div className="stepper-literal">preformatted</div> : preformatted;
-  makes the default result from renderNode(node) wrapped with className stepper-literal for literal AST.
+/**
+  StyleWrapper is a function that returns a styling function based on the node. For example,
+  ```tsx
+  const wrapLiteral: StyleWrapper = (node) => (preformatted) => node.type === "Literal" ? <div className="stepper-literal">preformatted</div> : preformatted;
+  ```
+  makes the default result from `renderNode(node)` wrapped with className `stepper-literal` for literal AST.
 */
 type StyleWrapper = (node: StepperBaseNode) => (preformatted: React.ReactNode) => React.ReactNode;
 

src/commons/sourceRecorder/SourceRecorderEditor.tsx

@@ -137,11 +137,12 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
       case 'cursorPositionChange':
         this.moveCursor(inputToApply.data);
         break;
-      case 'selectionRangeData':
+      case 'selectionRangeData': {
         const { range, isBackwards } = inputToApply.data;
         this.AceEditor.current!.editor.selection.setRange(range, isBackwards);
         break;
-      case 'keyboardCommand':
+      }
+      case 'keyboardCommand': {
         const keyboardCommand = inputToApply.data;
         switch (keyboardCommand) {
           case 'run':
@@ -153,6 +154,7 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
             break;
         }
         break;
+      }
     }
   }