Fix: Upgrade Project To Adjust Configuration

Author: Ziyuan Chen (Simon Chen)
Date: 2023.09.04
Description:
1. upgrade react
2. upgrade eslint
3. change material-ui to mui
4. change node-sass to sass
5. change python dependency
6. update packages based on new versions
7. adjust the start script
8. adjust new eslint rules based on new versions
9. adjust code based on new versions
10. fix new version warnings and errors
Environment: node(v18.17.1); npm(v9.6.7); python(v3.9.6)

Author: SimonCzy

.eslintrc.js

@@ -1,28 +1,36 @@
 module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-    node: true
-  },
-  extends: ["plugin:react/recommended", "airbnb", "airbnb/hooks"],
-  globals: {
-    Atomics: "readonly",
-    SharedArrayBuffer: "readonly"
-  },
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true
+    env: {
+        browser: true,
+        es2021: true,
+        node: true
     },
-    ecmaVersion: 2018,
-    sourceType: "module"
-  },
-  plugins: ["react"],
-  rules: {
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
-    "no-continue": 0,
-    "no-case-declarations": 0,
-    "no-underscore-dangle": 0,
-    "linebreak-style": 0
-  }
-};
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:jsx-a11y/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+    ],
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        },
+        ecmaVersion: 12,
+        sourceType: "module"
+    },
+    settings: {
+        react: {
+            version: "17.0.2"
+        }
+    },
+    plugins: [
+        "react",
+        "jsx-a11y",
+        "import"
+    ],
+    rules: {
+        "no-unused-vars": "off",
+        "react/jsx-key": "off",
+        "react/no-unknown-property": "off"
+    }
+};