v20 (#1122)

* feat!: Migrate to Node v20 * feat: Update Router to v6 * use a common Protected component that redirects when a user is not logged in * use the useParams and useLocation hooks with wrapper components * temporary fix for :programid route * tooling: Switch to pnpm * fix: Migrate editor to @uiw/react-codemirror WIP * fix: Add JSX support, add type hints * fix: Correct ViewportAwareButtonProps interface * fix: Use cjs for eslintrc Eslint does not support ES modules yet * fix(TS): Add types for react-modal * fix: Move dev dependencies to devDependencies * feat: More typescript conversions * Migrate to TS * fix: Remove ESLint import configuration * fix: Eslint Variety of issues including unused variable React * fix: jsx-a11y * fix: ESLint on vite.config.ts Disable linting for vite.config.ts, because it would require a new TSConfig file because our current TSConfig is for the browser which is correct for all the files in src/, but vite.config.ts should be checked in the context of Node instead. See: https://typescript-eslint.io/troubleshooting/#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file * feat: Migrate fetch to TypeScript * doc: Update README * ci: Address changes to configuration * Run testing manually (doesn't exist right now, but don't want to delete it * Fix linting which should not run on deleted files --------- Co-authored-by: Ethan <ethanhuang2078@gmail.com>
uclaacm · Mar 1, 2024 · cf6a7b5 · cf6a7b5
1 parent b863a85
commit cf6a7b5
Show file tree

Hide file tree

Showing 91 changed files with 17,978 additions and 44,118 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,6 @@
+# vite config
+vite.config.ts
+
 # dependencies
 /node_modules
 
@@ -6,4 +9,4 @@
 
 # production
 /build
- = ''
+ = ''
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -1,4 +1,13 @@
+/*
+ * "Note that ESLint does not support ESM configuration at this time."
+ * ref: https://eslint.org/docs/latest/use/configure/configuration-files
+ */
 module.exports = {
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
   env: {
     browser: true,
     node: true,
@@ -23,13 +32,11 @@ module.exports = {
       },
     },
     {
-      extends: ['airbnb-typescript'],
       files: ['**/*.{ts,tsx}'],
       parser: '@typescript-eslint/parser',
       plugins: ['@typescript-eslint'],
       parserOptions: {
         project: './tsconfig.json',
-        warnOnUnsupportedTypeScriptVersion: false,
       },
       rules: {
         'no-use-before-define': 'off',
@@ -40,70 +47,34 @@ module.exports = {
   ],
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
-    'plugin:jest/recommended',
+    "plugin:jsx-a11y/recommended",
+    'plugin:react/jsx-runtime',
     'prettier',
-    'airbnb',
-    'plugin:import/typescript',
   ],
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
     sourceType: 'module',
-    project: './jsconfig.json',
+    project: './tsconfig.json',
   },
-  plugins: ['import', 'react', 'jest'],
+  plugins: ['react', 'jest', '@typescript-eslint'],
   rules: {
-    // ignore file extensions when importing
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'never',
-        jsx: 'never',
-        ts: 'never',
-        tsx: 'never',
-      },
-    ],
-
     'linebreak-style': ['error', 'unix'],
 
-    'no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
+    "@typescript-eslint/no-explicit-any": "off",
 
     // 2 space indentation
     'indent': ['error', 2],
 
     // Style
     'quotes': ['error', 'single', { avoidEscape: true }],
 
-    // ensures clean diffs, see https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8
-    'comma-dangle': ['error', 'always-multiline'],
-
-    // Require all imported dependencies are actually declared in package.json
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        // Disallow importing optional dependencies (those shouldn't be in use in the project)
-        optionalDependencies: false,
-        peerDependencies: false, // Disallow importing peer dependencies (that aren't also direct dependencies)
-      },
-    ],
-
-    // Require all imported libraries actually resolve (!!required for import/no-extraneous-dependencies to work!!)
-    'import/no-unresolved': ['error'],
-
-    // Require an ordering on all imports
-    'import/order': [
-      'warn',
-      {
-        groups: ['builtin', 'external'],
-        alphabetize: { order: 'asc', caseInsensitive: true },
-      },
-    ],
-
     // Cannot import from the same module twice
     'no-duplicate-imports': ['error'],
 
@@ -145,17 +116,5 @@ module.exports = {
 
     // Not enforcing props validation for React
     'react/prop-types': 'off',
-
-    // Don't leave log statements littering the premises!
-    'no-console': ['error', { allow: ['error'] }],
-
-    // Not enforcing jsx extension
-    'react/jsx-filename-extension': 'off',
-
-    // For loops are ok
-    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
-
-    // AirBNB changed this to only allow function-expressions
-    'react/function-component-definition': 'off',
   },
 };
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -1,12 +1,5 @@
 name: Run tests
-on:
-  push:
-    branches:
-      - master
-
-  pull_request:
-    branches:
-      - master
+on: workflow_dispatch
 
 jobs:
   test-coverage: 

diff --git a/README.md b/README.md
@@ -4,21 +4,36 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/15895bed-2a7e-4a27-aa63-633a0cd645f1/deploy-status)](https://app.netlify.com/sites/sleepy-franklin-7a3e4c/deploys)
 [![Coverage Status](https://coveralls.io/repos/github/uclaacm/TeachLAFrontend/badge.svg?branch=master)](https://coveralls.io/github/uclaacm/TeachLAFrontend?branch=master)
 
-This repository holds the frontend code for the ACM Teach LA online editor! Teach LA uses the editor to help teach LA students about Python, Web Development, and expose them to computer science!
+This repository holds the frontend code for the ACM Teach LA online editor!
+Teach LA uses the editor to help teach LA students about Python, Web
+Development, and expose them to computer science!
 
-Our editor is primarily developed with [React](https://reactjs.org/) + [Redux](https://redux.js.org/), and uses a smattering of other Node packages. The project is actively developed and maintained by the [ACM Teach LA](https://teachla.uclaacm.com) Dev Team (part of [ACM @ UCLA](https://uclaacm.com)).
+Our editor is primarily developed with [React](https://reactjs.org/) +
+[Redux](https://redux.js.org/), and uses a smattering of other Node packages.
+The project is actively developed and maintained by the [ACM Teach
+LA](https://teachla.uclaacm.com) Dev Team (part of [ACM @
+UCLA](https://uclaacm.com)).
 
-Want to find out more about ACM Teach LA, or join the developer team? Check out [our website](https://teachla.uclaacm.com) or shoot us an email at [acmteachla@gmail.com](mailto:acmteachla@gmail.com).
+Want to find out more about ACM Teach LA, or join the developer team? Check out
+[our website](https://teachla.uclaacm.com) or shoot us an email at
+[acmteachla@gmail.com](mailto:acmteachla@gmail.com).
 
 ## Developer Setup
 
 You'll need:
 
-- [Node](https://nodejs.org/en/) (we develop this with Node v14.15.5 LTS)
+- [Node](https://nodejs.org/en/) (we develop this with Node v20.11.0 LTS)
+- `npm` (which comes with Node)
 - [git](https://git-scm.com/)
-- either `npm` (which comes default with Node) or [yarn](https://yarnpkg.com/en/)
 
-There are actually two different ways to run the app locally on your machine - one that uses our staging backend server, and one where you'll run it locally. Usually, the staging server is totally fine to use, but having the backend makes more sense if you're working on a new feature or are editing the backend.
+Then install `pnpm` ([instructions](https://pnpm.io/installation)). `pnpm`
+does what `npm` does but is much more efficient. Also, it can manage different
+`node` versions for you.
+
+There are actually two different ways to run the app locally on your machine -
+one that uses our staging backend server, and one where you'll run it locally.
+Usually, the staging server is totally fine to use, but having the backend
+makes more sense if you're working on a new feature or are editing the backend.
 
 ### Connecting to a backend
 
@@ -29,41 +44,38 @@ We'll follow the standard node project workflow. Type the following lines into y
 ```bash
 $ git clone https://github.com/uclaacm/TeachLAFrontend.git
 $ cd TeachLAFrontend
-$ npm install
-$ npm run staging_start # not npm run start!
+$ pnpm install
+$ pnpm staging_start
 ```
 
-And voila! `create-react-app` should automatically open a new browser window with the editor; give it a few seconds to start up and you should be good to go. You can also manually visit it on `localhost:8080`.
+And voila! `vite` should automatically open a new browser window with the
+editor; give it a few seconds to start up and you should be good to go. You can
+also manually visit it on `localhost:5173`
 
-#### Using a Local Server (More Flexible)
+#### Using a Local Server (Advanced)
 
-Here, you'll run our backend on your local machine - you can find more information on that [here](https://github.com/uclaacm/teach-la-go-backend).
+Here, you'll run our backend on your local machine, which offers more
+flexibility; you can find more information on that
+[here](https://github.com/uclaacm/teach-la-go-backend).
 
 And in another terminal window:
 
+**TODO** Find equivalent of `react-scripts start`.
+
 ```bash
 $ git clone https://github.com/uclaacm/TeachLAFrontend.git
 $ cd TeachLAFrontend
-$ npm install
-$ npm start
+$ pnpm install
+$ pnpm start # this doesn't work right now
 ```
 
-The client should now be automatically opened in your browser; however, you can also manually visit it on `localhost:8080`. Note that we've also opened a copy of the go backend on `localhost:8081`.
-
-### Running Into This Weird Error?
-
-If you have followed these steps and are running into Node.js errors like the
-following: `error:0308010C:digital envelope routines::unsupported`, it may be
-because you are running an newer version of Node that we currently do not target.
-
-To fix this issue, revert to Node v16 (we develop with Node v16.20.0). To do so without interfering with any existing
-Node installation (and as a proper future-proofing measure), install a version manager for Node: Windows
-users should follow directions to install [nvm for Windows](https://github.com/coreybutler/nvm-windows), and
-Mac/Linux users should follow directions to install [nvm for POSIX systems](https://github.com/nvm-sh/nvm).
+The client should now be automatically opened in your browser; however, you can
+also manually visit it on `localhost:5173`. Note that we've also opened a copy
+of the go backend on `localhost:8081`.
 
 ## Notes for Developers:
 
-- every time you pull from master, make sure to run `npm install` - it's likely that some dependency has changed!
+- every time you pull from master, make sure to run `pnpm install` - it's likely that some dependency has changed!
 - `lint-staged` and `husky` auto-prettify some JS code on save - don't be spooked!
 - GitHub Actions auto-builds branches and PRs - make sure that `npm run test` `npm run prod_build` pass, or your changes for-sure won't work!
 - Netlify auto-deploys PRs, branches, and production deploys using the contents of `npm run prod_build`!
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -13,18 +13,9 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="shortcut icon" href="%PUBLIC_URL%/tla-logo.png">
+    <link rel="shortcut icon" href="/tla-logo.png">
     <link href="https://fonts.googleapis.com/css?family=Chivo:300,400|Poppins:400,600,700" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=JetBrains+Mono" rel="stylesheet">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Teach LA Editor</title>
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
@@ -63,6 +54,7 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.