From 11d77ea9927ee78c161fef55bf8bd062ae3b405f Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 24 Jan 2024 18:10:53 -0800 Subject: [PATCH 01/23] Add sidebar transition - Add sidebar transition to ease-in-out instead of instant\n - Have sidebar width only half the screen on mobile devices --- site/src/component/SideBar/SideBar.tsx | 86 ++++++++++++------------- site/src/component/SideBar/Sidebar.scss | 7 +- 2 files changed, 47 insertions(+), 46 deletions(-) diff --git a/site/src/component/SideBar/SideBar.tsx b/site/src/component/SideBar/SideBar.tsx index 482a4f0e..a849ab5c 100644 --- a/site/src/component/SideBar/SideBar.tsx +++ b/site/src/component/SideBar/SideBar.tsx @@ -1,15 +1,15 @@ import { FC, useEffect, useState } from 'react'; -import { NavLink } from 'react-router-dom'; -import { Icon } from 'semantic-ui-react'; +import { Button } from 'react-bootstrap'; import { XCircle } from 'react-bootstrap-icons'; import { useCookies } from 'react-cookie'; -import './Sidebar.scss'; +import { NavLink } from 'react-router-dom'; +import { Icon } from 'semantic-ui-react'; import DefaultAvatar from '../../asset/default-avatar.png'; -import { Button } from 'react-bootstrap'; +import './Sidebar.scss'; -import { useAppSelector, useAppDispatch } from '../..//store/hooks'; -import { setSidebarStatus } from '../../store/slices/uiSlice'; import axios, { AxiosResponse } from 'axios'; +import { useAppDispatch, useAppSelector } from '../..//store/hooks'; +import { setSidebarStatus } from '../../store/slices/uiSlice'; const SideBar: FC = () => { const dispatch = useAppDispatch(); @@ -117,47 +117,45 @@ const SideBar: FC = () => { ); - if (!showSidebar) { - return
{links}
; - } return ( -
- {/* Close Button */} -
- -
- - {/* Profile Icon and Name */} -
- -

{name ? name : 'Anonymous Peter'}

-
+
+
+ {/* Close Button */} +
+ +
+ {/* Profile Icon and Name */} +
+ +

{name ? name : 'Anonymous Peter'}

+
- {/* Links */} - {links} + {/* Links */} + {links} - {/* Login/Logout */} -
- {isLoggedIn && ( - - - - )} - {!isLoggedIn && ( - - - - )} + {/* Login/Logout */} +
+ {isLoggedIn && ( + + + + )} + {!isLoggedIn && ( + + + + )} +
); diff --git a/site/src/component/SideBar/Sidebar.scss b/site/src/component/SideBar/Sidebar.scss index 7ef3d890..f24d1f3a 100644 --- a/site/src/component/SideBar/Sidebar.scss +++ b/site/src/component/SideBar/Sidebar.scss @@ -9,7 +9,10 @@ flex-direction: column; justify-content: space-between; align-items: center; - + transition: transform 0.3s ease-in-out; + &.minimized { + transform: translateX(-100%); + } .sidebar-close { padding: 2vw; width: 100%; @@ -108,7 +111,7 @@ @media only screen and (max-width: 800px) { .sidebar { - width: 100vw; + width: 50vw; z-index: 400; background-color: white; display: flex; From de53859a1cd2fbab67f96012d5a5729c73831a89 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 24 Jan 2024 19:09:25 -0800 Subject: [PATCH 02/23] Confirm name of course when adding - Displays Department + Course Number after choosing a course to add in popup --- site/src/pages/RoadmapPage/AddCoursePopup.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index 5a646c1c..dec0117c 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -1,11 +1,11 @@ import React, { FC, useState } from 'react'; -import Form from 'react-bootstrap/Form'; import Button from 'react-bootstrap/Button'; -import './AddCoursePopup.scss'; -import { useAppDispatch, useAppSelector } from '../../store/hooks'; -import { moveCourse, setShowAddCourse } from '../../store/slices/roadmapSlice'; +import Form from 'react-bootstrap/Form'; import Modal from 'react-bootstrap/Modal'; import { isMobile } from 'react-device-detect'; +import { useAppDispatch, useAppSelector } from '../../store/hooks'; +import { moveCourse, setShowAddCourse } from '../../store/slices/roadmapSlice'; +import './AddCoursePopup.scss'; interface AddCoursePopupProps {} @@ -16,6 +16,7 @@ const AddCoursePopup: FC = () => { const [year, setYear] = useState(-1); const [quarter, setQuarter] = useState(-1); const [validated, setValidated] = useState(false); + const activeCourse = useAppSelector((state) => state.roadmap.activeCourse); const closeForm = () => { // close form @@ -63,7 +64,9 @@ const AddCoursePopup: FC = () => { const addCourseForm = (

Add Course

-

Where do you want to add this course?

+

+ Where do you want to add {activeCourse.department} {activeCourse.courseNumber}? +

School Year Date: Wed, 24 Jan 2024 19:15:49 -0800 Subject: [PATCH 03/23] Delay Course Search Close - Close the course search page only after student submits so they can go back if they cancel --- site/src/pages/RoadmapPage/AddCoursePopup.tsx | 5 ++++- site/src/pages/RoadmapPage/CourseHitItem.tsx | 8 +++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index dec0117c..32859553 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -4,7 +4,7 @@ import Form from 'react-bootstrap/Form'; import Modal from 'react-bootstrap/Modal'; import { isMobile } from 'react-device-detect'; import { useAppDispatch, useAppSelector } from '../../store/hooks'; -import { moveCourse, setShowAddCourse } from '../../store/slices/roadmapSlice'; +import { moveCourse, setShowAddCourse, setShowSearch } from '../../store/slices/roadmapSlice'; import './AddCoursePopup.scss'; interface AddCoursePopupProps {} @@ -54,6 +54,9 @@ const AddCoursePopup: FC = () => { }), ); + // hide the search bar to view the roadmap + dispatch(setShowSearch(false)); + closeForm(); }; diff --git a/site/src/pages/RoadmapPage/CourseHitItem.tsx b/site/src/pages/RoadmapPage/CourseHitItem.tsx index a67fd868..78f73b8c 100644 --- a/site/src/pages/RoadmapPage/CourseHitItem.tsx +++ b/site/src/pages/RoadmapPage/CourseHitItem.tsx @@ -1,9 +1,9 @@ import { FC } from 'react'; -import { setActiveCourse, setShowAddCourse, setShowSearch } from '../../store/slices/roadmapSlice'; -import { useAppDispatch } from '../../store/hooks'; -import Course from './Course'; import { Draggable } from 'react-beautiful-dnd'; import { isMobile } from 'react-device-detect'; +import { useAppDispatch } from '../../store/hooks'; +import { setActiveCourse, setShowAddCourse } from '../../store/slices/roadmapSlice'; +import Course from './Course'; import { CourseGQLData } from '../../types/types'; @@ -20,8 +20,6 @@ const CourseHitItem: FC = (props: CourseHitItemProps) => { onMouseDown={() => { dispatch(setActiveCourse(props)); dispatch(setShowAddCourse(true)); - // also hide the search bar to view the roadmap - dispatch(setShowSearch(false)); }} // use inline style here so dnd can calculate size style={{ margin: ' 0rem 2rem 1rem 2rem' }} From 624d0e55c4139a048b36d7f84939660ca54254c5 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 31 Jan 2024 16:29:25 -0800 Subject: [PATCH 04/23] Fix null error in activeCourse - Fix displaying activeCourse name when none has been selected yet --- site/src/pages/RoadmapPage/AddCoursePopup.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index 32859553..8fe81ea8 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -68,7 +68,8 @@ const AddCoursePopup: FC = () => {

Add Course

- Where do you want to add {activeCourse.department} {activeCourse.courseNumber}? + Where do you want to add {activeCourse ? activeCourse.department + ' ' + activeCourse.courseNumber : 'a course'} + ?

School Year From 46238fea8fc300d6b0e69aff3a31607502a16caf Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 31 Jan 2024 17:08:51 -0800 Subject: [PATCH 05/23] Change Add Course button location - Move add course button beneath each quarter instead of header --- site/src/pages/RoadmapPage/Quarter.tsx | 27 ++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/site/src/pages/RoadmapPage/Quarter.tsx b/site/src/pages/RoadmapPage/Quarter.tsx index fc9d2e02..405d4e60 100644 --- a/site/src/pages/RoadmapPage/Quarter.tsx +++ b/site/src/pages/RoadmapPage/Quarter.tsx @@ -1,13 +1,13 @@ import { FC, useState } from 'react'; -import './Quarter.scss'; import { Draggable } from 'react-beautiful-dnd'; -import Course from './Course'; - +import { Button, Overlay, Popover } from 'react-bootstrap'; +import { Plus, ThreeDots } from 'react-bootstrap-icons'; +import { isMobile } from 'react-device-detect'; import { useAppDispatch, useAppSelector } from '../../store/hooks'; -import { deleteQuarter, clearQuarter, deleteCourse } from '../../store/slices/roadmapSlice'; +import { clearQuarter, deleteCourse, deleteQuarter, setShowSearch } from '../../store/slices/roadmapSlice'; import { PlannerQuarterData } from '../../types/types'; -import { Button, Overlay, Popover } from 'react-bootstrap'; -import { ThreeDots } from 'react-bootstrap-icons'; +import Course from './Course'; +import './Quarter.scss'; import { StrictModeDroppable } from './StrictModeDroppable'; interface QuarterProps { @@ -136,6 +136,21 @@ const Quarter: FC = ({ year, yearIndex, quarterIndex, data }) => { ); }} + + {isMobile && ( + <> + + + )}
); }; From ba3c65f85895bda89dc90bdd6272688dd7c461ff Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 31 Jan 2024 17:24:10 -0800 Subject: [PATCH 06/23] Remove old AddCourse button in header - Remove previous addcourse button to make room for new icons according to figma --- site/src/pages/RoadmapPage/Header.tsx | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/site/src/pages/RoadmapPage/Header.tsx b/site/src/pages/RoadmapPage/Header.tsx index 58b5b510..be7e7e96 100644 --- a/site/src/pages/RoadmapPage/Header.tsx +++ b/site/src/pages/RoadmapPage/Header.tsx @@ -1,11 +1,11 @@ import React, { FC, useState } from 'react'; -import './Header.scss'; -import { Button, ButtonGroup, Popover, Overlay } from 'react-bootstrap'; -import { ArrowLeftRight, Save, Plus, List, Trash } from 'react-bootstrap-icons'; -import { setShowTransfer, setShowSearch, clearPlanner } from '../../store/slices/roadmapSlice'; +import { Button, ButtonGroup, Overlay, Popover } from 'react-bootstrap'; +import { ArrowLeftRight, List, Save, Trash } from 'react-bootstrap-icons'; +import { isBrowser, isMobile } from 'react-device-detect'; import { useAppDispatch } from '../../store/hooks'; +import { clearPlanner, setShowTransfer } from '../../store/slices/roadmapSlice'; +import './Header.scss'; import Transfer from './Transfer'; -import { isMobile, isBrowser } from 'react-device-detect'; interface HeaderProps { courseCount: number; @@ -69,16 +69,6 @@ const Header: FC = ({ courseCount, unitCount, saveRoadmap, missingP
{isMobile && ( <> - From 694f6e4c5042b8b1567bbfdfa7113ef8031a6372 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 7 Feb 2024 17:20:45 -0800 Subject: [PATCH 07/23] Have Add Course button track quarter + year - Have selected quarter + year when adding a course on mobile pass into the addCoursePopup - Have selected quarter + year autoselected when choosing a course to add --- site/src/component/SideBar/SideBar.tsx | 1 + site/src/pages/RoadmapPage/AddCoursePopup.tsx | 22 ++++++++++++++---- site/src/pages/RoadmapPage/Quarter.tsx | 2 +- site/src/store/slices/roadmapSlice.ts | 23 ++++++++++++------- 4 files changed, 35 insertions(+), 13 deletions(-) diff --git a/site/src/component/SideBar/SideBar.tsx b/site/src/component/SideBar/SideBar.tsx index a849ab5c..58e52700 100644 --- a/site/src/component/SideBar/SideBar.tsx +++ b/site/src/component/SideBar/SideBar.tsx @@ -8,6 +8,7 @@ import DefaultAvatar from '../../asset/default-avatar.png'; import './Sidebar.scss'; import axios, { AxiosResponse } from 'axios'; +import React from 'react'; import { useAppDispatch, useAppSelector } from '../..//store/hooks'; import { setSidebarStatus } from '../../store/slices/uiSlice'; diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index 8fe81ea8..e566129a 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState } from 'react'; +import React, { FC, useEffect, useState } from 'react'; import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; import Modal from 'react-bootstrap/Modal'; @@ -13,11 +13,22 @@ const AddCoursePopup: FC = () => { const dispatch = useAppDispatch(); const planner = useAppSelector((state) => state.roadmap.yearPlans); const showForm = useAppSelector((state) => state.roadmap.showAddCourse); - const [year, setYear] = useState(-1); - const [quarter, setQuarter] = useState(-1); + const currentYearAndQuarter = useAppSelector((state) => state.roadmap.currentYearAndQuarter); + const [year, setYear] = useState( + currentYearAndQuarter && currentYearAndQuarter.year !== null ? currentYearAndQuarter.year : -1, + ); + const [quarter, setQuarter] = useState( + currentYearAndQuarter && currentYearAndQuarter.quarter !== null ? currentYearAndQuarter.quarter : -1, + ); const [validated, setValidated] = useState(false); const activeCourse = useAppSelector((state) => state.roadmap.activeCourse); + useEffect(() => { + setYear(currentYearAndQuarter && currentYearAndQuarter.year !== null ? currentYearAndQuarter.year : -1); + setQuarter(currentYearAndQuarter && currentYearAndQuarter.quarter !== null ? currentYearAndQuarter.quarter : -1); + }, [currentYearAndQuarter]); + + //console.log("receiving year: " + year + "and quarter: " + quarter); const closeForm = () => { // close form dispatch(setShowAddCourse(false)); @@ -55,7 +66,7 @@ const AddCoursePopup: FC = () => { ); // hide the search bar to view the roadmap - dispatch(setShowSearch(false)); + dispatch(setShowSearch({ show: false })); closeForm(); }; @@ -78,6 +89,7 @@ const AddCoursePopup: FC = () => { name="year" id="year" required + value={year === -1 ? '' : year} onChange={(e) => { const parsed = parseInt(e.target.value); console.log(parsed, isNaN(parsed)); @@ -110,8 +122,10 @@ const AddCoursePopup: FC = () => { name="quarter" id="quarter" required + value={quarter === -1 ? '' : quarter} onChange={(e) => { const parsed = parseInt(e.target.value); + console.log(parsed, isNaN(parsed)); if (!isNaN(parsed)) { setQuarter(parsed); } diff --git a/site/src/pages/RoadmapPage/Quarter.tsx b/site/src/pages/RoadmapPage/Quarter.tsx index 405d4e60..8b842ae4 100644 --- a/site/src/pages/RoadmapPage/Quarter.tsx +++ b/site/src/pages/RoadmapPage/Quarter.tsx @@ -143,7 +143,7 @@ const Quarter: FC = ({ year, yearIndex, quarterIndex, data }) => { variant="light" className="quarter quarter-header" onClick={() => { - dispatch(setShowSearch(true)); + dispatch(setShowSearch({ show: true, year: yearIndex, quarter: quarterIndex })); }} > diff --git a/site/src/store/slices/roadmapSlice.ts b/site/src/store/slices/roadmapSlice.ts index 5941b9c9..aaab3f5b 100644 --- a/site/src/store/slices/roadmapSlice.ts +++ b/site/src/store/slices/roadmapSlice.ts @@ -1,16 +1,16 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import type { RootState } from '../store'; import { - PlannerData, - PlannerYearData, CourseGQLData, - YearIdentifier, - QuarterIdentifier, CourseIdentifier, InvalidCourseData, - TransferData, + PlannerData, PlannerQuarterData, + PlannerYearData, + QuarterIdentifier, + TransferData, + YearIdentifier, } from '../../types/types'; +import type { RootState } from '../store'; // Define a type for the slice state interface RoadmapState { @@ -28,6 +28,8 @@ interface RoadmapState { showSearch: boolean; // Whether or not to show the add course modal on mobile showAddCourse: boolean; + // Selected quarter and year for adding a course on mobile + currentYearAndQuarter: { year: number; quarter: number } | null; } // Define the initial state using that type @@ -39,6 +41,7 @@ const initialState: RoadmapState = { transfers: [], showSearch: false, showAddCourse: false, + currentYearAndQuarter: null, }; // Payload to pass in to move a course @@ -256,8 +259,12 @@ export const roadmapSlice = createSlice({ deleteTransfer: (state, action: PayloadAction) => { state.transfers.splice(action.payload, 1); }, - setShowSearch: (state, action: PayloadAction) => { - state.showSearch = action.payload; + setShowSearch: (state, action: PayloadAction<{ show: boolean; year?: number; quarter?: number }>) => { + state.showSearch = action.payload.show; + if (action.payload.year !== undefined && action.payload.quarter !== undefined) { + console.log('setting currentYearAndQuarter to ', action.payload.year, action.payload.quarter); + state.currentYearAndQuarter = { year: action.payload.year, quarter: action.payload.quarter }; + } }, setShowAddCourse: (state, action: PayloadAction) => { state.showAddCourse = action.payload; From 9b7ac783ab99bf057450eb1d70c3260ab230fbe4 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Mon, 12 Feb 2024 16:10:43 -0800 Subject: [PATCH 08/23] Run prettier to format for lint --- README.md | 68 +++++++++++------- api/.eslintrc.cjs | 5 +- api/tsconfig.json | 4 +- site/public/site.webmanifest | 34 ++++----- site/src/component/Schedule/Schedule.css | 92 ++++++++++++------------ site/tsconfig.json | 4 +- 6 files changed, 110 insertions(+), 97 deletions(-) diff --git a/README.md b/README.md index d5026bf0..3217121f 100644 --- a/README.md +++ b/README.md @@ -5,38 +5,42 @@ PeterPortal is a web application aimed to aid UCI students with course discovery and planning. We consolidate public data available on multiple UCI sources on the application to improve the user experience when planning their course schedule. Features include: -* Course catalog with: - * Grade distribution graphs/charts - * Visual prerequisite trees - * Schedule of classes - * Reviews -![catalogue](https://github.com/icssc/peterportal-client/assets/8922227/e2e34103-a73e-4fd9-af44-69b707d1e910) -![coursepage](https://github.com/icssc/peterportal-client/assets/8922227/2df5a284-0040-4720-a9be-c08978b6bfb1) -* Professor catalog with: - * Schedule of classes - * Grade distribution graphs/charts - * Reviews -* Peter's Roadmap, a drag-and-drop 4-year course planner + +- Course catalog with: + _ Grade distribution graphs/charts + _ Visual prerequisite trees + _ Schedule of classes + _ Reviews + ![catalogue](https://github.com/icssc/peterportal-client/assets/8922227/e2e34103-a73e-4fd9-af44-69b707d1e910) + ![coursepage](https://github.com/icssc/peterportal-client/assets/8922227/2df5a284-0040-4720-a9be-c08978b6bfb1) +- Professor catalog with: + - Schedule of classes + - Grade distribution graphs/charts + - Reviews +- Peter's Roadmap, a drag-and-drop 4-year course planner ![roadmap](https://github.com/icssc/peterportal-client/assets/8922227/7849f059-ebb6-43b4-814d-75fb850fec01) ## 🔨 Built with -* [PeterPortal API](https://github.com/icssc/peterportal-api-next) -* Express -* React -* SST and AWS CDK -* MongoDB -* GraphQL -* TypeScript -* Vite +- [PeterPortal API](https://github.com/icssc/peterportal-api-next) +- Express +- React +- SST and AWS CDK +- MongoDB +- GraphQL +- TypeScript +- Vite ## First time setup + ### Committee Members + 1. Clone the repository to your local machine: - ``` - git clone https://github.com/icssc/peterportal-client - ``` + + ``` + git clone https://github.com/icssc/peterportal-client + ``` 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)). @@ -47,14 +51,16 @@ Features include: 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] - ``` + ``` + git checkout -b [branch name] + ``` ### Open Source Contributors + 1. Fork the project by clicking the fork button in the top right, above the about section. 2. Clone your forked repository to your local machine + ``` git clone https://github.com//peterportal-client ``` @@ -66,14 +72,17 @@ git clone https://github.com//peterportal-client 5. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes. 6. Create a .env file in the api directory with the following contents: + ``` PUBLIC_API_URL=https://api-next.peterportal.org/v1/rest/ PUBLIC_API_GRAPHQL_URL=https://api-next.peterportal.org/v1/graphql PORT=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. 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= SESSION_SECRET= @@ -84,9 +93,11 @@ ADMIN_EMAILS=[""] ``` ## 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] ``` @@ -94,6 +105,7 @@ 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 a terminal in the root directory of the repo. 2. Run `npm run dev` to start both the backend Express server and frontend Vite dev server @@ -103,6 +115,7 @@ git checkout -b [branch name] Optionally, you can run the site/api separately by changing into their respective directories in two different terminal windows and running `npm run dev` ## Our Mission + 🎇 Our mission is to improve the UCI student experience with course planning ## Where does the data come from? @@ -110,10 +123,13 @@ Optionally, you can run the site/api separately by changing into their respectiv 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/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. ## Terms & Conditions + 📜 There are no hard policies at the moment for utilizing this tool. However, please refrain from abusing the Website by methods such as: sending excessive amount of requests in a small period of time or purposely looking to exploit the system. diff --git a/api/.eslintrc.cjs b/api/.eslintrc.cjs index d60a796d..2cbb7bbb 100644 --- a/api/.eslintrc.cjs +++ b/api/.eslintrc.cjs @@ -1,10 +1,7 @@ module.exports = { root: true, env: { node: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - ], + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], ignorePatterns: ['dist', '.eslintrc.cjs'], parser: '@typescript-eslint/parser', }; diff --git a/api/tsconfig.json b/api/tsconfig.json index f05bf10f..75817301 100644 --- a/api/tsconfig.json +++ b/api/tsconfig.json @@ -9,7 +9,7 @@ "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true + "resolveJsonModule": true, }, - "include": ["src/"] + "include": ["src/"], } diff --git a/site/public/site.webmanifest b/site/public/site.webmanifest index b20abb7c..fa99de77 100644 --- a/site/public/site.webmanifest +++ b/site/public/site.webmanifest @@ -1,19 +1,19 @@ { - "name": "", - "short_name": "", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" } diff --git a/site/src/component/Schedule/Schedule.css b/site/src/component/Schedule/Schedule.css index 14117727..2645e75d 100644 --- a/site/src/component/Schedule/Schedule.css +++ b/site/src/component/Schedule/Schedule.css @@ -1,69 +1,69 @@ .schedule-quarter { - color: grey; + color: grey; } -.schedule-table{ - display: center; - margin-left: auto; - margin-right: auto; +.schedule-table { + display: center; + margin-left: auto; + margin-right: auto; } -.enrollment-col{ - width: 250px; - height: 60px; - padding-top: 30px; +.enrollment-col { + width: 250px; + height: 60px; + padding-top: 30px; } -.data-col{ - height:60px; +.data-col { + height: 60px; } -.progress-bar{ - position: relative; - border-radius: 50px; - height: 10px; +.progress-bar { + position: relative; + border-radius: 50px; + height: 10px; } -.enrollment-percentage{ - color: #949494; - display: inline; - float: right; - margin-right: 10px; - font-size: 12px; +.enrollment-percentage { + color: #949494; + display: inline; + float: right; + margin-right: 10px; + font-size: 12px; } -.enrollment-info-text{ - display: inline; +.enrollment-info-text { + display: inline; } .btn-status { - height: 40px; - width: 80px; - border-radius: 90px; - justify-content: center; - font-weight: bold; - font-size: inherit; + height: 40px; + width: 80px; + border-radius: 90px; + justify-content: center; + font-weight: bold; + font-size: inherit; } -.btn-status-button-open{ - background-color: #D5FFD4 !important; - color: green; +.btn-status-button-open { + background-color: #d5ffd4 !important; + color: green; } -.btn-status-button-waitl{ - background-color: #FFF2D8 !important; - color: #FFAE1C; +.btn-status-button-waitl { + background-color: #fff2d8 !important; + color: #ffae1c; } -.btn-status-button-full{ - background-color: #FFE4E4 !important; - color: #FA5252; +.btn-status-button-full { + background-color: #ffe4e4 !important; + color: #fa5252; } -.progress-bar>div{ - position: relative; - background-color:#D5FFD4; - border-radius: 50px; - height: 10px; +.progress-bar > div { + position: relative; + background-color: #d5ffd4; + border-radius: 50px; + height: 10px; } -.col-tableHolder{ - margin-left: 50px; -} \ No newline at end of file +.col-tableHolder { + margin-left: 50px; +} diff --git a/site/tsconfig.json b/site/tsconfig.json index e9efccf9..9356a7d4 100644 --- a/site/tsconfig.json +++ b/site/tsconfig.json @@ -19,11 +19,11 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - + "allowJs": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, }, "include": ["src/"], - "references": [{ "path": "./tsconfig.node.json" }] + "references": [{ "path": "./tsconfig.node.json" }], } From bca5c3ecee1d31f52be4ffb8df8e4ec3a7d491b3 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Mon, 12 Feb 2024 16:14:36 -0800 Subject: [PATCH 09/23] Fix lint error --- site/src/component/SideBar/SideBar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/src/component/SideBar/SideBar.tsx b/site/src/component/SideBar/SideBar.tsx index a0967889..b00f11bd 100644 --- a/site/src/component/SideBar/SideBar.tsx +++ b/site/src/component/SideBar/SideBar.tsx @@ -4,12 +4,11 @@ import { XCircle } from 'react-bootstrap-icons'; import { useCookies } from 'react-cookie'; import { NavLink } from 'react-router-dom'; import { Icon } from 'semantic-ui-react'; -import defaultAvatarLight from '../../asset/default-avatar.png'; import defaultAvatarDark from '../../asset/default-avatar-dark.png'; +import defaultAvatarLight from '../../asset/default-avatar.png'; import './Sidebar.scss'; import axios, { AxiosResponse } from 'axios'; -import React from 'react'; import { useAppDispatch, useAppSelector } from '../..//store/hooks'; import { setSidebarStatus } from '../../store/slices/uiSlice'; import ThemeContext from '../../style/theme-context'; From bda643f7551df57bd46383dcc620ab9da2d49247 Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 21 Feb 2024 17:07:34 -0800 Subject: [PATCH 10/23] Update site/src/store/slices/roadmapSlice.ts Co-authored-by: Jacob Sommer --- site/src/store/slices/roadmapSlice.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/store/slices/roadmapSlice.ts b/site/src/store/slices/roadmapSlice.ts index aaab3f5b..27cefac1 100644 --- a/site/src/store/slices/roadmapSlice.ts +++ b/site/src/store/slices/roadmapSlice.ts @@ -262,7 +262,6 @@ export const roadmapSlice = createSlice({ setShowSearch: (state, action: PayloadAction<{ show: boolean; year?: number; quarter?: number }>) => { state.showSearch = action.payload.show; if (action.payload.year !== undefined && action.payload.quarter !== undefined) { - console.log('setting currentYearAndQuarter to ', action.payload.year, action.payload.quarter); state.currentYearAndQuarter = { year: action.payload.year, quarter: action.payload.quarter }; } }, From 7e93e947afef6432cd91194a4705d6031075d97f Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 21 Feb 2024 17:07:58 -0800 Subject: [PATCH 11/23] Update site/src/pages/RoadmapPage/AddCoursePopup.tsx Co-authored-by: Jacob Sommer --- site/src/pages/RoadmapPage/AddCoursePopup.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index e566129a..e7bef24d 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -125,7 +125,6 @@ const AddCoursePopup: FC = () => { value={quarter === -1 ? '' : quarter} onChange={(e) => { const parsed = parseInt(e.target.value); - console.log(parsed, isNaN(parsed)); if (!isNaN(parsed)) { setQuarter(parsed); } From fa1bbebe8af9f47d8082cc9a190bc9aabd424e2a Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 21 Feb 2024 17:20:09 -0800 Subject: [PATCH 12/23] Fix styling based on comments --- site/src/component/SideBar/SideBar.tsx | 80 +++++++++++++------------ site/src/component/SideBar/Sidebar.scss | 2 +- site/src/pages/RoadmapPage/Quarter.tsx | 3 +- 3 files changed, 45 insertions(+), 40 deletions(-) diff --git a/site/src/component/SideBar/SideBar.tsx b/site/src/component/SideBar/SideBar.tsx index b00f11bd..04ff4512 100644 --- a/site/src/component/SideBar/SideBar.tsx +++ b/site/src/component/SideBar/SideBar.tsx @@ -131,48 +131,52 @@ const SideBar = () => {
); - return ( -
-
- {/* Close Button */} -
- -
- {/* Profile Icon and Name */} -
- -

{name ? name : 'Anonymous Peter'}

-
+ if (!showSidebar) { + return
{links}
; + } else { + return ( +
+
+ {/* Close Button */} +
+ +
+ {/* Profile Icon and Name */} +
+ +

{name ? name : 'Anonymous Peter'}

+
- {/* Links */} - {links} + {/* Links */} + {links} - {/* Login/Logout */} -
- {isLoggedIn && ( - - - - )} - {!isLoggedIn && ( - - - - )} + {/* Login/Logout */} +
+ {isLoggedIn && ( + + + + )} + {!isLoggedIn && ( + + + + )} +
-
- ); + ); + } }; export default SideBar; diff --git a/site/src/component/SideBar/Sidebar.scss b/site/src/component/SideBar/Sidebar.scss index fe6925ac..f1a6c5fa 100644 --- a/site/src/component/SideBar/Sidebar.scss +++ b/site/src/component/SideBar/Sidebar.scss @@ -131,7 +131,7 @@ @media only screen and (max-width: 800px) { .sidebar { - width: 50vw; + width: 100vw; z-index: 400; display: flex; flex-direction: column; diff --git a/site/src/pages/RoadmapPage/Quarter.tsx b/site/src/pages/RoadmapPage/Quarter.tsx index c7657603..c99c0597 100644 --- a/site/src/pages/RoadmapPage/Quarter.tsx +++ b/site/src/pages/RoadmapPage/Quarter.tsx @@ -5,8 +5,9 @@ import { Plus, ThreeDots } from 'react-bootstrap-icons'; import { isMobile } from 'react-device-detect'; import { useAppDispatch, useAppSelector } from '../../store/hooks'; import { clearQuarter, deleteCourse, deleteQuarter, setShowSearch } from '../../store/slices/roadmapSlice'; -import { PlannerQuarterData } from '../../types/types'; import ThemeContext from '../../style/theme-context'; +import { PlannerQuarterData } from '../../types/types'; +import './Quarter.scss'; import { StrictModeDroppable } from './StrictModeDroppable'; import Course from './Course'; From a4bbfc932a526da65daf693b77a50a3e2eed31b8 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 21 Feb 2024 17:24:43 -0800 Subject: [PATCH 13/23] Fix package-lock.json from being changed --- package-lock.json | 145 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) diff --git a/package-lock.json b/package-lock.json index 1c636632..4ff9ffec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "sst": "^2.38.7" }, "devDependencies": { + "concurrently": "^8.2.2", "husky": "^8.0.0", "lint-staged": "^15.2.0", "prettier": "^3.1.0" @@ -2878,6 +2879,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", + "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", + "dev": true, + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", @@ -6467,6 +6480,91 @@ "node": ">= 6" } }, + "node_modules/concurrently": { + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz", + "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.2", + "date-fns": "^2.30.0", + "lodash": "^4.17.21", + "rxjs": "^7.8.1", + "shell-quote": "^1.8.1", + "spawn-command": "0.0.2", + "supports-color": "^8.1.1", + "tree-kill": "^1.2.2", + "yargs": "^17.7.2" + }, + "bin": { + "conc": "dist/bin/concurrently.js", + "concurrently": "dist/bin/concurrently.js" + }, + "engines": { + "node": "^14.13.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, "node_modules/conf": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/conf/-/conf-10.2.0.tgz", @@ -6654,6 +6752,22 @@ "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debounce-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/debounce-fn/-/debounce-fn-4.0.0.tgz", @@ -9146,6 +9260,12 @@ "node": ">=8.10.0" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "dev": true + }, "node_modules/reinterval": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/reinterval/-/reinterval-1.1.0.tgz", @@ -9219,6 +9339,15 @@ "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz", "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==" }, + "node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "dev": true, + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -9358,6 +9487,15 @@ "node": ">=8" } }, + "node_modules/shell-quote": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", + "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -9398,6 +9536,12 @@ "url": "https://github.com/chalk/slice-ansi?sponsor=1" } }, + "node_modules/spawn-command": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz", + "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==", + "dev": true + }, "node_modules/split2": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz", @@ -10419,6 +10563,7 @@ "version": "2.3.4", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "dev": true, "engines": { "node": ">= 14" } From 3a2ed8ef49c58e6e814b2bc93e3a40f1ea9c93df Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Mar 2024 18:11:52 -0700 Subject: [PATCH 14/23] Fix dark mode compatibility with buttons --- package.json | 1 + site/src/pages/RoadmapPage/Quarter.scss | 15 ++++++++++++++- site/src/pages/RoadmapPage/Quarter.tsx | 6 +++--- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 95ca1b1f..6f175945 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "aws-cdk-lib": "2.124.0", "dotenv-flow": "^4.0.1", + "react-device-detect": "^2.2.3", "sst": "2.40.3" }, "engines": { diff --git a/site/src/pages/RoadmapPage/Quarter.scss b/site/src/pages/RoadmapPage/Quarter.scss index 8a879e43..b20129b7 100644 --- a/site/src/pages/RoadmapPage/Quarter.scss +++ b/site/src/pages/RoadmapPage/Quarter.scss @@ -1,7 +1,11 @@ [data-theme='dark'] { - .quarter .quarter-header .quarter-title { + .quarter .quarter-header .quarter-title, + .quarter .quarter-add-course { color: #eee; } + .plus-icon { + fill: #eee; + } .quarter-menu-btn:hover, .quarter-menu-btn:focus, @@ -44,6 +48,11 @@ color: #808080; font-size: 16px; } + + .quarter-add-course { + color: #202e47; + font-size: 15px; + } } .quarter-menu-btn { @@ -59,6 +68,10 @@ z-index: 1; } +.plus-icon { + fill: #000000; +} + .red-menu-btn, .red-menu-btn:hover, .red-menu-btn:focus, diff --git a/site/src/pages/RoadmapPage/Quarter.tsx b/site/src/pages/RoadmapPage/Quarter.tsx index cdb43261..eccbc8dd 100644 --- a/site/src/pages/RoadmapPage/Quarter.tsx +++ b/site/src/pages/RoadmapPage/Quarter.tsx @@ -162,14 +162,14 @@ const Quarter: FC = ({ year, yearIndex, quarterIndex, data }) => { {isMobile && ( <> )} From c8d923f89390eb17fda8916f88a34ae54806fd57 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Mar 2024 18:34:25 -0700 Subject: [PATCH 15/23] Use new useIsMobile helper --- site/src/pages/RoadmapPage/Quarter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/RoadmapPage/Quarter.tsx b/site/src/pages/RoadmapPage/Quarter.tsx index eccbc8dd..4bb5ddf2 100644 --- a/site/src/pages/RoadmapPage/Quarter.tsx +++ b/site/src/pages/RoadmapPage/Quarter.tsx @@ -2,8 +2,8 @@ import { FC, useContext, useRef, useState } from 'react'; import { Draggable } from 'react-beautiful-dnd'; import { Button, OverlayTrigger, Popover } from 'react-bootstrap'; import { Plus, ThreeDots } from 'react-bootstrap-icons'; -import { isMobile } from 'react-device-detect'; import { quarterDisplayNames } from '../../helpers/planner'; +import { useIsMobile } from '../../helpers/util'; import { useAppDispatch, useAppSelector } from '../../store/hooks'; import { clearQuarter, deleteCourse, deleteQuarter, setShowSearch } from '../../store/slices/roadmapSlice'; import ThemeContext from '../../style/theme-context'; @@ -25,7 +25,7 @@ const Quarter: FC = ({ year, yearIndex, quarterIndex, data }) => { const quarterTitle = quarterDisplayNames[data.name]; const invalidCourses = useAppSelector((state) => state.roadmap.invalidCourses); const quarterContainerRef = useRef(null); - + const isMobile = useIsMobile(); const [showQuarterMenu, setShowQuarterMenu] = useState(false); const { darkMode } = useContext(ThemeContext); From 058eab4e9642591a14d20583839d6d76d5404ccb Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Mar 2024 19:21:24 -0700 Subject: [PATCH 16/23] Small changes to fix setShowSearch parameters --- site/src/pages/RoadmapPage/CourseHitItem.tsx | 3 ++- site/src/pages/RoadmapPage/SearchSidebar.tsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/site/src/pages/RoadmapPage/CourseHitItem.tsx b/site/src/pages/RoadmapPage/CourseHitItem.tsx index 0918db76..9cb7b4d9 100644 --- a/site/src/pages/RoadmapPage/CourseHitItem.tsx +++ b/site/src/pages/RoadmapPage/CourseHitItem.tsx @@ -5,6 +5,7 @@ import { setActiveCourse, setShowAddCourse } from '../../store/slices/roadmapSli import Course from './Course'; import { useIsMobile } from '../../helpers/util'; +import { setShowSearch } from '../../store/slices/roadmapSlice'; import { CourseGQLData } from '../../types/types'; interface CourseHitItemProps extends CourseGQLData { @@ -19,7 +20,7 @@ const CourseHitItem: FC = (props: CourseHitItemProps) => { dispatch(setActiveCourse(props)); dispatch(setShowAddCourse(true)); // also hide the search bar to view the roadmap - dispatch(setShowSearch(false)); + dispatch(setShowSearch({ show: false })); }; const onMobileKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { diff --git a/site/src/pages/RoadmapPage/SearchSidebar.tsx b/site/src/pages/RoadmapPage/SearchSidebar.tsx index e2ff68e6..883ef666 100644 --- a/site/src/pages/RoadmapPage/SearchSidebar.tsx +++ b/site/src/pages/RoadmapPage/SearchSidebar.tsx @@ -1,14 +1,14 @@ import './SearchSidebar.scss'; import CloseButton from 'react-bootstrap/CloseButton'; -import SearchModule from '../../component/SearchModule/SearchModule'; import SearchHitContainer from '../../component/SearchHitContainer/SearchHitContainer'; +import SearchModule from '../../component/SearchModule/SearchModule'; import CourseHitItem from './CourseHitItem'; +import { useIsMobile } from '../../helpers/util'; import { useAppDispatch } from '../../store/hooks'; import { setShowSearch } from '../../store/slices/roadmapSlice'; import { StrictModeDroppable } from './StrictModeDroppable'; -import { useIsMobile } from '../../helpers/util'; const SearchSidebar = () => { const dispatch = useAppDispatch(); @@ -21,7 +21,7 @@ const SearchSidebar = () => { { - dispatch(setShowSearch(false)); + dispatch(setShowSearch({ show: false })); }} />
From 6871a28be22856980f8701c8c7ed954e1a49156c Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 13 Mar 2024 22:14:38 -0700 Subject: [PATCH 17/23] Remove old console comment Co-authored-by: Jacob Sommer --- site/src/pages/RoadmapPage/AddCoursePopup.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index 17b056ba..eb884ee7 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -28,7 +28,6 @@ const AddCoursePopup: FC = () => { setQuarter(currentYearAndQuarter && currentYearAndQuarter.quarter !== null ? currentYearAndQuarter.quarter : -1); }, [currentYearAndQuarter]); - //console.log("receiving year: " + year + "and quarter: " + quarter); const closeForm = () => { // close form dispatch(setShowAddCourse(false)); From f2ba24e660793692f940f10237ba1885c66806a4 Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 13 Mar 2024 22:15:02 -0700 Subject: [PATCH 18/23] Remove unnecessary package Co-authored-by: Jacob Sommer --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 6f175945..95ca1b1f 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "dependencies": { "aws-cdk-lib": "2.124.0", "dotenv-flow": "^4.0.1", - "react-device-detect": "^2.2.3", "sst": "2.40.3" }, "engines": { From 50d0bc23b8b3230485fd0c6d7f9f710c48e4aac5 Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 13 Mar 2024 22:15:38 -0700 Subject: [PATCH 19/23] Fix hitItem setshowsearch Co-authored-by: Jacob Sommer --- site/src/pages/RoadmapPage/CourseHitItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/RoadmapPage/CourseHitItem.tsx b/site/src/pages/RoadmapPage/CourseHitItem.tsx index 9cb7b4d9..2e81692c 100644 --- a/site/src/pages/RoadmapPage/CourseHitItem.tsx +++ b/site/src/pages/RoadmapPage/CourseHitItem.tsx @@ -20,7 +20,6 @@ const CourseHitItem: FC = (props: CourseHitItemProps) => { dispatch(setActiveCourse(props)); dispatch(setShowAddCourse(true)); // also hide the search bar to view the roadmap - dispatch(setShowSearch({ show: false })); }; const onMobileKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { From 9305364e32d81f9e84f5a486e5cb36a4da7764a1 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Wed, 13 Mar 2024 22:35:31 -0700 Subject: [PATCH 20/23] Fix lint issue --- site/src/pages/RoadmapPage/CourseHitItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/RoadmapPage/CourseHitItem.tsx b/site/src/pages/RoadmapPage/CourseHitItem.tsx index 2e81692c..01cf182f 100644 --- a/site/src/pages/RoadmapPage/CourseHitItem.tsx +++ b/site/src/pages/RoadmapPage/CourseHitItem.tsx @@ -5,7 +5,6 @@ import { setActiveCourse, setShowAddCourse } from '../../store/slices/roadmapSli import Course from './Course'; import { useIsMobile } from '../../helpers/util'; -import { setShowSearch } from '../../store/slices/roadmapSlice'; import { CourseGQLData } from '../../types/types'; interface CourseHitItemProps extends CourseGQLData { From e8bafa122673dd22dfdd6e8ae4b0582f126d4c0f Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 20 Mar 2024 18:15:06 -0700 Subject: [PATCH 21/23] Use optional chaining and nullish coalescing for AddCoursePopup Co-authored-by: Jacob Sommer --- site/src/pages/RoadmapPage/AddCoursePopup.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index eb884ee7..06bca214 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -14,12 +14,8 @@ const AddCoursePopup: FC = () => { const planner = useAppSelector((state) => state.roadmap.yearPlans); const showForm = useAppSelector((state) => state.roadmap.showAddCourse); const currentYearAndQuarter = useAppSelector((state) => state.roadmap.currentYearAndQuarter); - const [year, setYear] = useState( - currentYearAndQuarter && currentYearAndQuarter.year !== null ? currentYearAndQuarter.year : -1, - ); - const [quarter, setQuarter] = useState( - currentYearAndQuarter && currentYearAndQuarter.quarter !== null ? currentYearAndQuarter.quarter : -1, - ); + const [year, setYear] = useState(currentYearAndQuarter?.year ?? -1); + const [quarter, setQuarter] = useState(currentYearAndQuarter?.quarter ?? -1); const [validated, setValidated] = useState(false); const activeCourse = useAppSelector((state) => state.roadmap.activeCourse); From 8c6d93876b20200dd6a09ac6f818f810d3ce8d24 Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 20 Mar 2024 18:15:29 -0700 Subject: [PATCH 22/23] Add optional chaining and nullish coalescing Co-authored-by: Jacob Sommer --- site/src/pages/RoadmapPage/AddCoursePopup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/RoadmapPage/AddCoursePopup.tsx b/site/src/pages/RoadmapPage/AddCoursePopup.tsx index 06bca214..4bbc8068 100644 --- a/site/src/pages/RoadmapPage/AddCoursePopup.tsx +++ b/site/src/pages/RoadmapPage/AddCoursePopup.tsx @@ -20,8 +20,8 @@ const AddCoursePopup: FC = () => { const activeCourse = useAppSelector((state) => state.roadmap.activeCourse); useEffect(() => { - setYear(currentYearAndQuarter && currentYearAndQuarter.year !== null ? currentYearAndQuarter.year : -1); - setQuarter(currentYearAndQuarter && currentYearAndQuarter.quarter !== null ? currentYearAndQuarter.quarter : -1); + setYear(currentYearAndQuarter?.year ?? -1); + setQuarter(currentYearAndQuarter?.quarter ?? -1); }, [currentYearAndQuarter]); const closeForm = () => { From 0b9cf759bcbf97a5304b97bf2846feb285447b1c Mon Sep 17 00:00:00 2001 From: Daniel Lee <44424085+danielbolee@users.noreply.github.com> Date: Wed, 20 Mar 2024 18:15:43 -0700 Subject: [PATCH 23/23] Update site/src/component/SideBar/Sidebar.scss Co-authored-by: Jacob Sommer --- site/src/component/SideBar/Sidebar.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/site/src/component/SideBar/Sidebar.scss b/site/src/component/SideBar/Sidebar.scss index b62b9801..3a234854 100644 --- a/site/src/component/SideBar/Sidebar.scss +++ b/site/src/component/SideBar/Sidebar.scss @@ -9,10 +9,6 @@ flex-direction: column; justify-content: flex-start; align-items: center; - transition: transform 0.3s ease-in-out; - &.minimized { - transform: translateX(-100%); - } ul { list-style: none; margin: 0;