Migrate to vite (#375)

* Migrate to vite. Update packages (react, react-router-dom, etc.). Remove unused packages * Run eslint fix, manually fix remaining eslint errors. Fixes for updated versions of react-router-dom and nivo * Update build path for site * Update readme and add start script * Uninstall unused react-transition-group. Add @nivo/core to package.json * Fix dnd * Update packages * Fix review form Professor ID wasn't being submitted. Made the code less scuffed. * Update package.json. Specify node>=18 * Update README node versions * Update react-cookie and react-google-recaptcha * Update axios * Update package-lock node engine * Rename main back to index. Fix indentation in vite config * Fix build script * Add eslint react plugin * Update vite proxy port to 8080 * Specify node 18/20. Update readme * No console warn rule * Update some packages * Update nivo and vite 5 * Fix package engines * Update react-redux to v9 and rtk to v2 * Clean up index.html. Add semantic ui css as dependency instead of using cdn * Fix faulty merging for review form. Fix verified reviews checkbox * Remove apollo client
icssc · Jan 21, 2024 · 96cf321 · 96cf321
1 parent 0014db1
commit 96cf321
Show file tree

Hide file tree

Showing 79 changed files with 6,385 additions and 49,876 deletions.
diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@ Features include:
 * MongoDB
 * GraphQL
 * TypeScript
+* Vite
 
 ## First time setup
 ### Committee Members
@@ -37,18 +38,19 @@ Features include:
     git clone https://github.com/icssc/peterportal-client
     ```
 
-2. Switch to a branch you will be working on.
-    ```
-    git checkout -b [branch name]
-    ```
+2. Check your Node version with `node -v`. Make sure you have version 18 or 20 LTS. If you don't, we recommend [nvm](https://github.com/nvm-sh/nvm) to manage node versions (or [nvm-windows](https://github.com/coreybutler/nvm-windows)).
 
-3. Check your Node version with `node -v`. Make sure you have version 14 or above (18 recommended).
+3. `cd` into the cloned repo.
 
-4. Open a terminal window and `cd` into the directory of your repo.
+4. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
 
-5. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
+5. Setup the appropriate environment variables provided by the project lead.
+
+6. Switch to a branch you will be working on for your current task (pick a name that's relevant to the issue).
+    ```
+    git checkout -b [branch name]
+    ```
 
-6. Setup the appropriate environment variables provided by the project lead.
 ### Open Source Contributors
 1. Fork the project by clicking the fork button in the top right, above the about section.
 
@@ -57,26 +59,21 @@ Features include:
 git clone https://github.com/<your username>/peterportal-client
 ```
 
-3. Switch to a branch you will be working on.
-```
-git checkout -b [branch name]
-```
-
-4. Check your Node version with `node -v`. Make sure you have version 14 or above (18 recommended).
+3. Check your Node version with `node -v`. Make sure you have version 18 or 20 LTS. If you don't, we recommend [nvm](https://github.com/nvm-sh/nvm) to manage node versions (or [nvm-windows](https://github.com/coreybutler/nvm-windows)).
 
-5. Open a terminal window and `cd` into the directory of your repo.
+4. `cd` into the cloned repo.
 
-6. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
+5. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
 
-7. Create a .env file in the api directory with the following contents:
+6. Create a .env file in the api directory with the following contents:
 ```
 PUBLIC_API_URL=https://api.peterportal.org/rest/v0/
 PUBLIC_API_GRAPHQL_URL=https://api.peterportal.org/graphql/
 PORT=8080
 ```
-Note: the port should also match the one set up on the frontend's proxy to the backend under `site/src/setupProxy.js` By default this is 8080.
+Note: the port should also match the one set up on the frontend's proxy to the backend under `site/vite.config.ts` By default this is 8080.
 
-8. (Optional) Set up your own MongoDB and Google OAuth to be able to test features that require signing in such as leaving reviews or saving roadmaps to your account. Add additional variables/secrets to the .env file from the previous step.
+7. (Optional) Set up your own MongoDB and Google OAuth to be able to test features that require signing in such as leaving reviews or saving roadmaps to your account. Add additional variables/secrets to the .env file from the previous step.
 ```
 MONGO_URL=<secret>
 SESSION_SECRET=<secret>
@@ -86,10 +83,20 @@ GRECAPTCHA_SECRET=<secret>
 ADMIN_EMAILS=["<your email>"]
 ```
 
+## Open Source Contribution Guide
+1. Choose an issue you would like to work on under the issues tab. Leave a comment letting us know you'll work on this issue.
+
+2. We recommend you switch to a branch you will be working on for each feature.
+```
+git checkout -b [branch name]
+```
+
+3. Once your feature is ready, [open a pull request](https://github.com/icssc/peterportal-client/compare) and a member from our team will review it. Follow the pull request template.
+
 ## Running the project locally (after setup)
 1. Open two terminal windows and `cd` into the directory of your repo in each of them.
 
-2. In the first terminal window, enter the client directory with `cd site`. Then run the React development server using `npm start`. Ensure the server is running on port 3000 by default.
+2. In the first terminal window, enter the client directory with `cd site`. Then run the Vite development server using `npm run dev`. Ensure the server is running on port 3000 by default.
 
 3. In the second terminal window, enter the API directory with `cd api`. Then run the Express development server using `npm run dev`. Ensure the server is running on port 8080 by default.
 
@@ -101,8 +108,7 @@ ADMIN_EMAILS=["<your email>"]
 We consolidate our data directly from official UCI sources such as: UCI Catalogue, UCI Public Records Office, and UCI WebReg (courtesy of [PeterPortal API](https://github.com/icssc/peterportal-api-next)).
 
 ## Bug Report
-🐞 If you encountered any issues or bug, please open an issue @ https://github.com/icssc-projects/peterportal-client/issues/new
-
+🐞 If you encountered any issues or bug, please open an issue @ https://github.com/icssc/peterportal-client/issues/new
 
 ## Other Disclaimer
 ✅ Although we consolidate our data directly from official UCI sources, this application is by all means, not an official UCI tool. We stride to keep our data as accurate as possible with the limited support we have from UCI. Please take that into consideration while using this Website.

diff --git a/api/src/controllers/courses.ts b/api/src/controllers/courses.ts
@@ -6,63 +6,68 @@ import express, { Request } from 'express';
 import fetch from 'node-fetch';
 import { GenericObject } from '../types/types';
 import courseDummy from '../dummy/course.json';
-import {getCourseQuery} from '../helpers/gql';
+import { getCourseQuery } from '../helpers/gql';
 var router = express.Router();
 
 /**
- * PPAPI proxy for course data 
+ * PPAPI proxy for course data
  */
 router.get('/api', (req: Request<{}, {}, {}, { courseID: string }>, res) => {
   let r = fetch(process.env.PUBLIC_API_URL + 'courses/' + encodeURIComponent(req.query.courseID), {
     headers: {
       'Content-Type': 'application/json',
-      'Accept': 'application/json'
-    }
+      Accept: 'application/json',
+    },
   });
-  console.log(req.query.courseID)
+  console.log(req.query.courseID);
 
-  r.then((response) => response.json())
-    .then((data) => res.send(data.payload))
+  r.then((response) => response.json()).then((data) => res.send(data.payload));
 });
 
 /**
- * PPAPI proxy for course data 
+ * PPAPI proxy for course data
  */
 router.post('/api/batch', (req: Request<{}, {}, { courses: string[] }>, res) => {
   if (req.body.courses.length == 0) {
     res.json({});
-  }
-  else {
+  } else {
     let r = fetch(process.env.PUBLIC_API_GRAPHQL_URL, {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        query: getCourseQuery(req.body.courses)
-      })
+        query: getCourseQuery(req.body.courses),
+      }),
     });
 
-    r.then((response) => response.json())
-        .then((data) => res.json(
-            Object.fromEntries(
-                Object.entries(data.data).filter(([_, x]) => x !== null).map(([_, x]) => [(x as { id: string }).id, x])
-            )
-        ))
+    r.then((response) => response.json()).then((data) =>
+      res.json(
+        Object.fromEntries(
+          Object.entries(data.data)
+            .filter(([_, x]) => x !== null)
+            .map(([_, x]) => [(x as { id: string }).id, x]),
+        ),
+      ),
+    );
   }
 });
 
 /**
  * PPAPI proxy for grade distribution
  */
-router.get('/api/grades',
-  (req: Request<{}, {}, {}, { department: string; number: string; }>, res) => {
-    let r = fetch(process.env.PUBLIC_API_URL + 'grades/raw?department=' + encodeURIComponent(req.query.department) + '&courseNumber=' + req.query.number);
+router.get('/api/grades', (req: Request<{}, {}, {}, { department: string; number: string }>, res) => {
+  let r = fetch(
+    process.env.PUBLIC_API_URL +
+      'grades/raw?department=' +
+      encodeURIComponent(req.query.department) +
+      '&courseNumber=' +
+      req.query.number,
+  );
 
-    r.then((response) => response.json())
-      .then((data) => {
-        res.send(data.payload)
-      })
+  r.then((response) => response.json()).then((data) => {
+    res.send(data.payload);
   });
+});
 
-export default router;
+export default router;
diff --git a/api/src/controllers/professors.ts b/api/src/controllers/professors.ts
@@ -11,35 +11,32 @@ import { getProfessorQuery } from '../helpers/gql';
 var router = express.Router();
 
 /**
- * PPAPI proxy for professor data 
+ * PPAPI proxy for professor data
  */
 router.get('/api', function (req: Request<{}, {}, {}, { ucinetid: string }>, res) {
   let r = fetch(process.env.PUBLIC_API_URL + 'instructors/' + req.query.ucinetid);
 
-  r.then((response) => response.json())
-    .then((data) => res.send(data))
+  r.then((response) => response.json()).then((data) => res.send(data));
 });
 
 /**
- * PPAPI proxy for professor data 
+ * PPAPI proxy for professor data
  */
 router.post('/api/batch', (req: Request<{}, {}, { professors: string[] }>, res) => {
   if (req.body.professors.length == 0) {
     res.json({});
-  }
-  else {
+  } else {
     let r = fetch(process.env.PUBLIC_API_GRAPHQL_URL, {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        query: getProfessorQuery(req.body.professors)
-      })
+        query: getProfessorQuery(req.body.professors),
+      }),
     });
 
-    r.then((response) => response.json())
-      .then((data) => res.json(data.data))
+    r.then((response) => response.json()).then((data) => res.json(data.data));
   }
 });
 
@@ -54,7 +51,7 @@ router.get('/api/grades/:name', function (req, res, next) {
   r.then((response) => {
     status = response.status;
     return response.json();
-  }).then((data) => res.status(status).send(data.payload))
+  }).then((data) => res.status(status).send(data.payload));
 });
 
-export default router;
+export default router;