move off of cra to vite (#96)

Working with CRA is a bit of a pain and there's been work to move off of
it. I didn't update #57 since that involves the creation of a backend
server too (which involves setting up XVM and all that) and this is more
of an instant change, although rebasing that PR too would be good (maybe
over IAP when ppl have more time?).

This PR moves off of CRA and moves to Vite. This also involves having to
recreate some of the tooling integrated into CRA, such as an eslint
config (a lot of the diffs in component files were issues flagged by
tseslint that weren't being checked before). I didn't really have to
change the workings of any components, which was nice. This issue also
resolves all the security vulnerabilities found when running `npm
install`, and also closes #89.

Doing this would probably make anything we want to do in the future,
such as adding tests (which can be done with
[Vitest](https://vitest.dev/)) or integrating a backend server (which
can be done using [a
plugin](https://github.com/axe-me/vite-plugin-node)), a bit easier.

.editorconfig

@@ -5,7 +5,6 @@ charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
-
-[*.{ts,tsx,js,json}]
 indent_style = space
 indent_size = 2
+max_line_length = 80

.env

@@ -1 +1 @@
-REACT_APP_GOOGLE_CLIENT_ID=706375540729-sqnnig7o0d0uqmvav0h8nh8aft6l55u3.apps.googleusercontent.com
+VITE_GOOGLE_CLIENT_ID=706375540729-sqnnig7o0d0uqmvav0h8nh8aft6l55u3.apps.googleusercontent.com

.github/workflows/autodeploy.yml

@@ -3,27 +3,26 @@ name: Autodeploy branch
 on:
   push:
     branches:
-     - deploy
+      - deploy
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Install node
-      uses: actions/setup-node@v3
-      with:
-        node-version: 18
-    - name: Install node dependencies
-      run: npm install
-    - name: Run build
-      run: npm run build
-    - name: Archive build artifacts
-      uses: actions/upload-artifact@v4
-      with:
-        name: built-site
-        path: |
-          build
-          !build/latest.json
+      - uses: actions/checkout@v3
+      - name: Install node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install node dependencies
+        run: npm install
+      - name: Run build
+        run: npm run build
+      - name: Archive build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: built-site
+          path: |
+            build
+            !build/latest.json

.github/workflows/ci.yml

@@ -20,31 +20,29 @@ jobs:
     name: Prettier
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - name: Install node
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ env.node-version }}
-        cache: 'npm'
-    - name: Install node dependencies
-      run: npm install
-    - name: Run Prettier
-      run: npm run ci-prettier
+      - uses: actions/checkout@v4
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node-version }}
+          cache: "npm"
+      - name: Install node dependencies
+        run: npm install
+      - name: Run Prettier
+        run: npm run ci-prettier
   build:
     name: Build
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - name: Install node
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ env.node-version }}
-        cache: 'npm'
-    - name: Install node dependencies
-      run: npm install
-    - name: Run ESLint
-      run: npm run ci-eslint
-    - name: Run tsc
-      run: npx -p typescript@latest tsc
-    - name: Run build
-      run: npm run build
+      - uses: actions/checkout@v4
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node-version }}
+          cache: "npm"
+      - name: Install node dependencies
+        run: npm install
+      - name: Run ESLint
+        run: npm run ci-eslint
+      - name: Run build
+        run: npm run build

.gitignore

@@ -1,3 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
 # artifacts
 scrapers/catalog.json
 scrapers/fireroad.json
@@ -6,13 +32,5 @@ public/latest.json
 # python
 __pycache__
 
-# node
-/node_modules
-/build
-
+# deploy script
 deploy.sh
-
-.idea
-
-# MacOS is stupid
-.DS_Store

README.md

@@ -24,7 +24,7 @@ To spin up the site, we need two steps:
 
 (1) We need to update the backend to get the data. `cd scrapers` then run `python update.py`.
 
-(2) We then can update the frontend, via running `npm start`. This will open a browser tab that updates live as you edit code.
+(2) We then can update the frontend, via running `npm run dev`. This will start a developer server. Open a browser tab to [`http://localhost:5173/`](http://localhost:5173/), which will update live as you edit code.
 
 If this is the **first time** you're spinning up the website, the two steps have to be taken in order: step (1), and then step (2). If not followed, you'll see a blank frontend.
 
@@ -54,16 +54,16 @@ See `deploy/README.md` for more info.
 
 ### Architecture
 
-*I want to change...*
+_I want to change..._
 
-- *...the data available to Hydrant.*
+- _...the data available to Hydrant._
   - The entry point is `scrapers/update.py`.
   - This goes through `src/components/App.tsx`, which looks for the data.
   - The exit point is through the constructor of `State` in `src/lib/state.ts`.
-- *...the way Hydrant behaves.*
+- _...the way Hydrant behaves._
   - The entry point is `src/lib/state.ts`.
   - The exit point is through `src/components/App.tsx`, which constructs `hydrant` and passes it down.
-- *...the way Hydrant looks.*
+- _...the way Hydrant looks._
   - The entry point is `src/components/App.tsx`.
   - We use [Chakra UI](https://chakra-ui.com/) as our component library. Avoid writing CSS.
 

eslint.config.js

@@ -0,0 +1,45 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      eslintConfigPrettier,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+);

index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Hydrant</title>
+    <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="Hydrant is a class planner for MIT students."
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <script defer src="https://apis.google.com/js/client.js"></script> -->
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>