Add import sorting, fix eslint warnings, update pre-commit workflow

Extract role type to types file

.eslintrc.json

@@ -10,13 +10,44 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "prettier",
-    "prettier/react"
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier"
   ],
   "rules": {
     "react/prop-types": [2],
     "react-hooks/rules-of-hooks": "error",
-    "@typescript-eslint/no-non-null-assertion": "off"
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type", "unknown"],
+        "pathGroups": [
+          {
+            "pattern": "*.+(svg|jpg|jpeg)",
+            "group": "unknown",
+            "patternOptions": { "matchBase": true, "dot": true, "nocomment": true },
+            "position": "after"
+          },
+          {
+            "pattern": "*.+(css|scss)",
+            "group": "unknown",
+            "patternOptions": { "matchBase": true, "dot": true, "nocomment": true },
+            "position": "after"
+          }
+        ],
+        "alphabetize": { "order": "asc" },
+        "warnOnUnassignedImports": true
+      }
+    ]
   },
   "env": {
     "es6": true,
@@ -25,6 +56,10 @@
   "settings": {
     "react": {
       "version": "18.2"
+    },
+    "import/resolver": {
+      "typescript": true,
+      "node": true
     }
   }
 }

.pre-commit-config.yaml

@@ -47,6 +47,7 @@ repos:
         verbose: true # always display output
         files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
         types: [file]
+        args: ["--fix"]
   # (s)css
   - repo: https://github.com/thibaudcolas/pre-commit-stylelint
     rev: v15.10.3

csm_web/frontend/src/components/App.tsx

@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from "react";
+import React, { Component, useEffect, useState } from "react";
 import { Link, NavLink, NavLinkProps, Outlet, Route, Routes, useLocation } from "react-router-dom";
+
 import { useProfiles } from "../utils/queries/base";
 import { useMatcherActiveCourses } from "../utils/queries/matcher";
+import { Role } from "../utils/types";
 import { emptyRoles, Roles } from "../utils/user";
 import CourseMenu from "./CourseMenu";
-import { EnrollmentMatcher } from "./enrollment_automation/EnrollmentMatcher";
 import Home from "./Home";
 import Policies from "./Policies";
+import { EnrollmentMatcher } from "./enrollment_automation/EnrollmentMatcher";
 import { Resources } from "./resource_aggregation/Resources";
 import Section from "./section/Section";
 
-// Images
-import LogoNoText from "../../static/frontend/img/logo_no_text.svg";
 import LogOutIcon from "../../static/frontend/img/log_out.svg";
+import LogoNoText from "../../static/frontend/img/logo_no_text.svg";
 
-// Styles
 import "../css/header.scss";
 import "../css/home.scss";
 
@@ -107,10 +107,10 @@ function Header(): React.ReactElement {
         // ignore if not active
         continue;
       }
-      if (profile.role === "COORDINATOR") {
-        roles["COORDINATOR"].add(profile.courseId);
-      } else if (profile.role === "MENTOR" && profile.sectionId === undefined) {
-        roles["MENTOR"].add(profile.courseId);
+      if (profile.role === Role.COORDINATOR) {
+        roles[Role.COORDINATOR].add(profile.courseId);
+      } else if (profile.role === Role.MENTOR && profile.sectionId === undefined) {
+        roles[Role.MENTOR].add(profile.courseId);
       }
     }
     setActiveMatcherRoles(roles);
@@ -128,7 +128,7 @@ function Header(): React.ReactElement {
         <NavLink to="/resources" className={navlinkClass}>
           <h3 className="site-title">Resources</h3>
         </NavLink>
-        {activeMatcherRoles["COORDINATOR"].size > 0 || activeMatcherRoles["MENTOR"].size > 0 ? (
+        {activeMatcherRoles[Role.COORDINATOR].size > 0 || activeMatcherRoles[Role.MENTOR].size > 0 ? (
           <NavLink to="/matcher" className={navlinkClass}>
             <h3 className="site-title">Matcher</h3>
           </NavLink>
@@ -175,7 +175,7 @@ interface ErrorPageProps {
  * Error boundary component; must be a class component,
  * as there is currently no equivalent hook.
  */
-class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { error: null };

csm_web/frontend/src/components/CourseMenu.tsx

@@ -1,14 +1,14 @@
+import { DateTime } from "luxon";
 import React, { useEffect, useState } from "react";
 import { Link, Route, Routes } from "react-router-dom";
-import { useCourses } from "../utils/queries/courses";
+
+import { DEFAULT_LONG_LOCALE_OPTIONS, DEFAULT_TIMEZONE } from "../utils/datetime";
 import { useUserInfo } from "../utils/queries/base";
+import { useCourses } from "../utils/queries/courses";
 import { Course as CourseType, UserInfo } from "../utils/types";
-import Course from "./course/Course";
 import LoadingSpinner from "./LoadingSpinner";
-import { DateTime } from "luxon";
-import { DEFAULT_LONG_LOCALE_OPTIONS, DEFAULT_TIMEZONE } from "../utils/datetime";
+import Course from "./course/Course";
 
-// Styles
 import "../css/course-menu.scss";
 
 const CourseMenu = () => {
@@ -50,12 +50,10 @@ const CourseMenu = () => {
     userInfo = null;
   }
 
-  let show_enrollment_times = false;
   const enrollment_times_by_course: Array<{ courseName: string; enrollmentDate: DateTime }> = [];
 
   if (courses !== null) {
     for (const course of courses.values()) {
-      show_enrollment_times ||= !course.enrollmentOpen;
       if (!course.enrollmentOpen) {
         enrollment_times_by_course.push({
           courseName: course.name,

csm_web/frontend/src/components/Home.tsx

@@ -1,17 +1,15 @@
+import { groupBy } from "lodash";
 import React from "react";
 import { Link } from "react-router-dom";
-import { groupBy } from "lodash";
+
+import { formatSpacetimeInterval } from "../utils/datetime";
 import { useProfiles } from "../utils/queries/base";
 import { useCourses } from "../utils/queries/courses";
-import { ROLES } from "./section/Section";
-import { Profile, Course } from "../utils/types";
+import { Profile, Course, Role } from "../utils/types";
 import LoadingSpinner from "./LoadingSpinner";
-import { formatSpacetimeInterval } from "../utils/datetime";
 
-// Images
 import PlusIcon from "../../static/frontend/img/plus.svg";
 
-// Styles
 import scssColors from "../css/base/colors-export.module.scss";
 
 const Home = () => {
@@ -42,7 +40,7 @@ const Home = () => {
             }
           })
           .map(([course, courseProfiles]) => {
-            if (courseProfiles[0].role === ROLES.MENTOR) {
+            if (courseProfiles[0].role === Role.MENTOR) {
               const courseProfilesWithSection = courseProfiles.filter((profile: Profile) => profile.sectionId);
               if (courseProfilesWithSection.length > 0) {
                 return <CourseCard key={course} profiles={courseProfilesWithSection} />;
@@ -115,7 +113,7 @@ const CourseCard = ({ profiles }: CourseCardProps): React.ReactElement => {
     );
   };
 
-  if (role === ROLES.COORDINATOR) {
+  if (role === Role.COORDINATOR) {
     return (
       <Link to={`/courses/${courseId}`} className="course-card-link">
         <Card />

csm_web/frontend/src/components/Modal.tsx

@@ -1,9 +1,8 @@
-import React, { useContext } from "react";
+import React, { createContext, useContext } from "react";
 
-// Images
 import XIcon from "../../static/frontend/img/x.svg";
 
-const ModalContext = React.createContext(Function.prototype);
+const ModalContext = createContext(Function.prototype);
 
 interface ModalProps {
   children: React.ReactNode;