From e817165672c9e812767948896b09d6ee338f098a Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sat, 30 Sep 2023 19:35:18 -0700 Subject: [PATCH 01/10] Remove unused prop --- apps/antalmanac/src/components/Calendar/CalendarRoot.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx index 7d763dabf..c24b00791 100644 --- a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx +++ b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx @@ -254,7 +254,6 @@ class ScheduleCalendar extends PureComponent Date: Mon, 2 Oct 2023 23:25:17 -0700 Subject: [PATCH 02/10] Change color of all courses --- apps/antalmanac/src/stores/Schedules.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/apps/antalmanac/src/stores/Schedules.ts b/apps/antalmanac/src/stores/Schedules.ts index 60fb67923..88dafd9da 100644 --- a/apps/antalmanac/src/stores/Schedules.ts +++ b/apps/antalmanac/src/stores/Schedules.ts @@ -148,7 +148,7 @@ export class Schedules { } /** - * @return Reference of the course that matches the params + * @return Reference of a course that matches the params */ getExistingCourse(sectionCode: string, term: string) { for (const course of this.getAllCourses()) { @@ -159,6 +159,19 @@ export class Schedules { return undefined; } + /** + * @return An array of references to courses that matches the params + */ + getExistingCourses(sectionCode: string, term: string) { + const courses: ScheduleCourse[] = []; + for (const course of this.getAllCourses()) { + if (course.section.sectionCode === sectionCode && term === course.term) { + courses.push(course); + } + } + return courses ?? undefined; + } + /** * Adds a course to a given schedule index * Sets color to an unused color in set, also will not add class if already exists @@ -222,8 +235,8 @@ export class Schedules { */ changeCourseColor(sectionCode: string, term: string, newColor: string) { this.addUndoState(); - const course = this.getExistingCourse(sectionCode, term); - if (course) { + const courses = this.getExistingCourses(sectionCode, term); + for (const course of courses) { course.section.color = newColor; } } From acad2185ec542ef901525cfd2aa2931a0e3592f2 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Mon, 2 Oct 2023 23:42:21 -0700 Subject: [PATCH 03/10] Return reference of current schedule's course --- apps/antalmanac/src/stores/Schedules.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/antalmanac/src/stores/Schedules.ts b/apps/antalmanac/src/stores/Schedules.ts index 88dafd9da..ff7793aa7 100644 --- a/apps/antalmanac/src/stores/Schedules.ts +++ b/apps/antalmanac/src/stores/Schedules.ts @@ -151,7 +151,7 @@ export class Schedules { * @return Reference of a course that matches the params */ getExistingCourse(sectionCode: string, term: string) { - for (const course of this.getAllCourses()) { + for (const course of this.getCurrentCourses()) { if (course.section.sectionCode === sectionCode && term === course.term) { return course; } @@ -235,8 +235,13 @@ export class Schedules { */ changeCourseColor(sectionCode: string, term: string, newColor: string) { this.addUndoState(); - const courses = this.getExistingCourses(sectionCode, term); - for (const course of courses) { + // const courses = this.getExistingCourses(sectionCode, term); + // for (const course of courses) { + // course.section.color = newColor; + // } + + const course = this.getExistingCourse(sectionCode, term); + if (course) { course.section.color = newColor; } } From 5f8b7d00159825585ff19340342664120c2cd20d Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sat, 7 Oct 2023 00:45:53 -0700 Subject: [PATCH 04/10] Refactor helper functions --- .../SectionTable/SectionTableBody.tsx | 6 +---- apps/antalmanac/src/stores/Schedules.ts | 23 ++++++++----------- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx index 7da2416bb..7bcd0fd0b 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx @@ -207,11 +207,7 @@ const LocationsCell = withStyles(styles)((props: LocationsCellProps) => { const buildingId = locationIds[buildingName]; return ( - + {bldg}
diff --git a/apps/antalmanac/src/stores/Schedules.ts b/apps/antalmanac/src/stores/Schedules.ts index ff7793aa7..9f3ce4501 100644 --- a/apps/antalmanac/src/stores/Schedules.ts +++ b/apps/antalmanac/src/stores/Schedules.ts @@ -148,10 +148,10 @@ export class Schedules { } /** - * @return Reference of a course that matches the params + * @return A course that matches the params across all schedules */ getExistingCourse(sectionCode: string, term: string) { - for (const course of this.getCurrentCourses()) { + for (const course of this.getAllCourses()) { if (course.section.sectionCode === sectionCode && term === course.term) { return course; } @@ -160,16 +160,15 @@ export class Schedules { } /** - * @return An array of references to courses that matches the params + * @return A course that matches the params in the current schedule */ - getExistingCourses(sectionCode: string, term: string) { - const courses: ScheduleCourse[] = []; - for (const course of this.getAllCourses()) { + getExistingCourseInSchedule(sectionCode: string, term: string) { + for (const course of this.getCurrentCourses()) { if (course.section.sectionCode === sectionCode && term === course.term) { - courses.push(course); + return course; } } - return courses ?? undefined; + return undefined; } /** @@ -185,7 +184,7 @@ export class Schedules { this.addUndoState(); } - const existingSection = this.getExistingCourse(newCourse.section.sectionCode, newCourse.term); + const existingSection = this.getExistingCourseInSchedule(newCourse.section.sectionCode, newCourse.term); const existsInSchedule = this.doesCourseExistInSchedule( newCourse.section.sectionCode, @@ -235,12 +234,8 @@ export class Schedules { */ changeCourseColor(sectionCode: string, term: string, newColor: string) { this.addUndoState(); - // const courses = this.getExistingCourses(sectionCode, term); - // for (const course of courses) { - // course.section.color = newColor; - // } - const course = this.getExistingCourse(sectionCode, term); + const course = this.getExistingCourseInSchedule(sectionCode, term); if (course) { course.section.color = newColor; } From 19459d54b5dbab7916c96a0c31bdbf5463306a9c Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sun, 8 Oct 2023 16:54:08 -0700 Subject: [PATCH 05/10] Refactor Course Render Pane --- .../RightPane/CoursePane/CourseRenderPane.tsx | 293 +++++++----------- 1 file changed, 106 insertions(+), 187 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx index a5d9b28a2..baefa91f1 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx @@ -1,11 +1,8 @@ -import { IconButton, Theme } from '@material-ui/core'; -import { withStyles } from '@material-ui/core/styles'; -import { ClassNameMap, Styles } from '@material-ui/core/styles/withStyles'; -import CloseIcon from '@material-ui/icons/Close'; -import React, { PureComponent } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import LazyLoad from 'react-lazyload'; -import { Alert } from '@mui/material'; +import { Alert, Box, IconButton } from '@mui/material'; +import { Close } from '@mui/icons-material'; import { AACourse, AASection } from '@packages/antalmanac-types'; import { WebsocDepartment, WebsocSchool, WebsocAPIResponse } from 'peterportal-api-next-types'; import RightPaneStore from '../RightPaneStore'; @@ -21,63 +18,8 @@ import { isDarkMode, queryWebsocMultiple } from '$lib/helpers'; import analyticsEnum from '$lib/analytics'; import { queryWebsoc } from '$lib/course-helpers'; -const styles: Styles = (theme) => ({ - course: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), - }, - paddingTop: theme.spacing(), - paddingBottom: theme.spacing(), - display: 'flex', - alignItems: 'center', - flexWrap: 'wrap', - minHeight: theme.spacing(6), - cursor: 'pointer', - }, - text: { - flexGrow: 1, - display: 'inline', - width: '100%', - }, - ad: { - flexGrow: 1, - display: 'inline', - width: '100%', - }, - icon: { - cursor: 'pointer', - marginLeft: theme.spacing(), - }, - root: { - height: '100%', - overflowY: 'scroll', - position: 'relative', - }, - noResultsDiv: { - height: '100%', - width: '100%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - loadingGifStyle: { - height: '100%', - width: '100%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - spacing: { - height: '50px', - marginBottom: '5px', - }, -}); - const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocDepartment | AACourse)[] => { - const courseColors = AppStore.getAddedCourses().reduce((accumulator, { section }) => { + const courseColors = AppStore.schedule.getCurrentCourses().reduce((accumulator, { section }) => { accumulator[section.sectionCode] = section.color; return accumulator; }, {} as { [key: string]: string }); @@ -99,7 +41,7 @@ const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocD }, []); }; const RecruitmentBanner = () => { - const [bannerVisibility, setBannerVisibility] = React.useState(true); + const [bannerVisibility, setBannerVisibility] = useState(true); // Display recruitment banner if more than 11 weeks (in ms) has passed since last dismissal const recruitmentDismissalTime = window.localStorage.getItem('recruitmentDismissalTime'); @@ -110,7 +52,7 @@ const RecruitmentBanner = () => { const displayRecruitmentBanner = bannerVisibility && !dismissedRecently && isSearchCS; return ( -
+ {displayRecruitmentBanner ? ( { setBannerVisibility(false); }} > - + } > @@ -141,8 +83,8 @@ const RecruitmentBanner = () => {
We have opportunities for experienced devs and those with zero experience! - ) : null}{' '} -
+ ) : null} + ); }; @@ -192,135 +134,112 @@ const SectionTableWrapped = ( return
{component}
; }; -interface CourseRenderPaneProps { - classes: ClassNameMap; -} - -interface CourseRenderPaneState { - courseData: (WebsocSchool | WebsocDepartment | AACourse)[]; - loading: boolean; - error: boolean; - scheduleNames: string[]; -} - -class CourseRenderPane extends PureComponent { - state: CourseRenderPaneState = { - courseData: [], - loading: true, - error: false, - scheduleNames: AppStore.getScheduleNames(), - }; - - loadCourses = () => { - this.setState({ loading: true }, async () => { - const formData = RightPaneStore.getFormData(); - - const params = { - department: formData.deptValue, - term: formData.term, - ge: formData.ge, - courseNumber: formData.courseNumber, - sectionCodes: formData.sectionCode, - instructorName: formData.instructor, - units: formData.units, - endTime: formData.endTime, - startTime: formData.startTime, - fullCourses: formData.coursesFull, - building: formData.building, - room: formData.room, - division: formData.division, - }; +const ErrorMessage = () => { + return ( + + No Results Found + + ); +}; - try { - let jsonResp; - if (params.units.includes(',')) { - jsonResp = await queryWebsocMultiple(params, 'units'); - } else { - jsonResp = await queryWebsoc(params); - } - this.setState({ - loading: false, - error: false, - courseData: flattenSOCObject(jsonResp), - }); - } catch (error) { - this.setState({ - loading: false, - error: true, - }); +export default function CourseRenderPane() { + const [courseData, setCourseData] = useState<(WebsocSchool | WebsocDepartment | AACourse)[]>([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(false); + const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames()); + + const loadCourses = async () => { + setLoading(true); + + const formData = RightPaneStore.getFormData(); + + const params = { + department: formData.deptValue, + term: formData.term, + ge: formData.ge, + courseNumber: formData.courseNumber, + sectionCodes: formData.sectionCode, + instructorName: formData.instructor, + units: formData.units, + endTime: formData.endTime, + startTime: formData.startTime, + fullCourses: formData.coursesFull, + building: formData.building, + room: formData.room, + division: formData.division, + }; + + try { + let jsonResp; + if (params.units.includes(',')) { + jsonResp = await queryWebsocMultiple(params, 'units'); + } else { + jsonResp = await queryWebsoc(params); } - }); + setLoading(false); + setError(false); + setCourseData(flattenSOCObject(jsonResp)); + } catch (error) { + setLoading(false); + setError(true); + } }; - componentDidMount() { - this.loadCourses(); - AppStore.on('scheduleNamesChange', this.updateScheduleNames); - } - - componentWillUnmount() { - AppStore.removeListener('scheduleNamesChange', this.updateScheduleNames); - } + const updateScheduleNames = useCallback(() => { + setScheduleNames(AppStore.getScheduleNames()); + }, [setScheduleNames]); - updateScheduleNames = () => { - this.setState({ scheduleNames: AppStore.getScheduleNames() }); - }; + useEffect(() => { + loadCourses(); + AppStore.on('scheduleNamesChange', updateScheduleNames); + AppStore.on('currentScheduleIndexChange', loadCourses); - render() { - const { classes } = this.props; - let currentView; + return () => { + AppStore.off('scheduleNamesChange', updateScheduleNames); + AppStore.off('currentScheduleIndexChange', loadCourses); + }; + }, [updateScheduleNames]); - if (this.state.loading) { - currentView = ( -
+ return ( + <> + {loading ? ( + Loading courses -
- ); - } else if (!this.state.error) { - const renderData = { - courseData: this.state.courseData, - scheduleNames: this.state.scheduleNames, - }; - - currentView = ( + + ) : error || courseData.length === 0 ? ( + + ) : ( <> -
-
- {this.state.courseData.length === 0 ? ( -
- No Results Found -
- ) : ( - this.state.courseData.map( - (_: WebsocSchool | WebsocDepartment | AACourse, index: number) => { - let heightEstimate = 200; - if ((this.state.courseData[index] as AACourse).sections !== undefined) - heightEstimate = - (this.state.courseData[index] as AACourse).sections.length * 60 + 20 + 40; - - return ( - - {SectionTableWrapped(index, renderData)} - - ); - } - ) - )} -
+ + + {courseData.map((_: WebsocSchool | WebsocDepartment | AACourse, index: number) => { + let heightEstimate = 200; + if ((courseData[index] as AACourse).sections !== undefined) + heightEstimate = (courseData[index] as AACourse).sections.length * 60 + 20 + 40; + return ( + + {SectionTableWrapped(index, { + courseData: courseData, + scheduleNames: scheduleNames, + })} + + ); + })} + - ); - } else { - currentView = ( -
-
- No Results Found -
-
- ); - } - - return currentView; - } + )} + + ); } - -export default withStyles(styles)(CourseRenderPane); From 72890cdd5241180e82e7d301b00b5b0df23ece42 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sun, 8 Oct 2023 17:02:27 -0700 Subject: [PATCH 06/10] Key ColorAndDelete --- .../components/RightPane/SectionTable/SectionTableButtons.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableButtons.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableButtons.tsx index 6233485e7..bd504310a 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableButtons.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableButtons.tsx @@ -49,6 +49,7 @@ export const ColorAndDelete = withStyles(styles)((props: ColorAndDeleteProps) => Date: Sat, 14 Oct 2023 20:58:45 -0700 Subject: [PATCH 07/10] Stop requerying Websoc --- .../RightPane/CoursePane/CourseRenderPane.tsx | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx index baefa91f1..92bca655c 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx @@ -18,11 +18,18 @@ import { isDarkMode, queryWebsocMultiple } from '$lib/helpers'; import analyticsEnum from '$lib/analytics'; import { queryWebsoc } from '$lib/course-helpers'; -const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocDepartment | AACourse)[] => { +function getColors() { const courseColors = AppStore.schedule.getCurrentCourses().reduce((accumulator, { section }) => { accumulator[section.sectionCode] = section.color; return accumulator; }, {} as { [key: string]: string }); + + return courseColors; +} + +const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocDepartment | AACourse)[] => { + const courseColors = getColors(); + return SOCObject.schools.reduce((accumulator: (WebsocSchool | WebsocDepartment | AACourse)[], school) => { accumulator.push(school); @@ -147,6 +154,7 @@ const ErrorMessage = () => { }; export default function CourseRenderPane() { + const [websocResp, setWebsocResp] = useState(); const [courseData, setCourseData] = useState<(WebsocSchool | WebsocDepartment | AACourse)[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(false); @@ -182,6 +190,7 @@ export default function CourseRenderPane() { } setLoading(false); setError(false); + setWebsocResp(jsonResp); setCourseData(flattenSOCObject(jsonResp)); } catch (error) { setLoading(false); @@ -189,20 +198,33 @@ export default function CourseRenderPane() { } }; - const updateScheduleNames = useCallback(() => { + const updateScheduleNames = () => { setScheduleNames(AppStore.getScheduleNames()); - }, [setScheduleNames]); + }; + + useEffect(() => { + const changeColors = () => { + if (websocResp == null) { + return; + } + setCourseData(flattenSOCObject(websocResp)); + }; + + AppStore.on('currentScheduleIndexChange', changeColors); + + return () => { + AppStore.off('currentScheduleIndexChange', changeColors); + }; + }, [websocResp]); useEffect(() => { loadCourses(); AppStore.on('scheduleNamesChange', updateScheduleNames); - AppStore.on('currentScheduleIndexChange', loadCourses); return () => { AppStore.off('scheduleNamesChange', updateScheduleNames); - AppStore.off('currentScheduleIndexChange', loadCourses); }; - }, [updateScheduleNames]); + }, []); return ( <> From 77039854df98e9e7bcaad19604a7ec2a2a900b26 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sat, 14 Oct 2023 21:18:44 -0700 Subject: [PATCH 08/10] Remove unused imports --- .../src/components/RightPane/CoursePane/CourseRenderPane.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx index c928f451f..58a85ced3 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx @@ -1,10 +1,10 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import LazyLoad from 'react-lazyload'; import { Alert, Box, IconButton } from '@mui/material'; import { Close } from '@mui/icons-material'; import { AACourse, AASection } from '@packages/antalmanac-types'; -import { WebsocDepartment, WebsocSchool, WebsocAPIResponse, GE } from 'peterportal-api-next-types'; +import { WebsocDepartment, WebsocSchool, WebsocAPIResponse } from 'peterportal-api-next-types'; import RightPaneStore from '../RightPaneStore'; import GeDataFetchProvider from '../SectionTable/GEDataFetchProvider'; import SectionTableLazyWrapper from '../SectionTable/SectionTableLazyWrapper'; @@ -15,7 +15,6 @@ import darkNoNothing from './static/dark-no_results.png'; import noNothing from './static/no_results.png'; import AppStore from '$stores/AppStore'; import { isDarkMode, queryWebsoc, queryWebsocMultiple } from '$lib/helpers'; -import Grades from '$lib/grades'; import analyticsEnum from '$lib/analytics'; function getColors() { From 42500834ad0192eaef19f4c9ca90d0e6b5c796bc Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 18 Oct 2023 00:20:32 -0700 Subject: [PATCH 09/10] Correct merge --- .../RightPane/CoursePane/CourseRenderPane.tsx | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx index 58a85ced3..8fadeb72c 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx @@ -1,10 +1,10 @@ -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import LazyLoad from 'react-lazyload'; import { Alert, Box, IconButton } from '@mui/material'; import { Close } from '@mui/icons-material'; import { AACourse, AASection } from '@packages/antalmanac-types'; -import { WebsocDepartment, WebsocSchool, WebsocAPIResponse } from 'peterportal-api-next-types'; +import { WebsocDepartment, WebsocSchool, WebsocAPIResponse, GE } from 'peterportal-api-next-types'; import RightPaneStore from '../RightPaneStore'; import GeDataFetchProvider from '../SectionTable/GEDataFetchProvider'; import SectionTableLazyWrapper from '../SectionTable/SectionTableLazyWrapper'; @@ -15,6 +15,7 @@ import darkNoNothing from './static/dark-no_results.png'; import noNothing from './static/no_results.png'; import AppStore from '$stores/AppStore'; import { isDarkMode, queryWebsoc, queryWebsocMultiple } from '$lib/helpers'; +import Grades from '$lib/grades'; import analyticsEnum from '$lib/analytics'; function getColors() { @@ -159,12 +160,12 @@ export default function CourseRenderPane() { const [error, setError] = useState(false); const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames()); - const loadCourses = async () => { + const loadCourses = useCallback(async () => { setLoading(true); const formData = RightPaneStore.getFormData(); - const params = { + const websocQueryParams = { department: formData.deptValue, term: formData.term, ge: formData.ge, @@ -180,22 +181,29 @@ export default function CourseRenderPane() { division: formData.division, }; + const gradesQueryParams = { + department: formData.deptValue, + ge: formData.ge as GE, + }; + try { - let jsonResp; - if (params.units.includes(',')) { - jsonResp = await queryWebsocMultiple(params, 'units'); - } else { - jsonResp = await queryWebsoc(params); - } - setLoading(false); + // Query websoc for course information and populate gradescache + const [websocJsonResp, _] = await Promise.all([ + websocQueryParams.units.includes(',') + ? queryWebsocMultiple(websocQueryParams, 'units') + : queryWebsoc(websocQueryParams), + Grades.populateGradesCache(gradesQueryParams), + ]); + setError(false); - setWebsocResp(jsonResp); - setCourseData(flattenSOCObject(jsonResp)); + setWebsocResp(websocJsonResp); + setCourseData(flattenSOCObject(websocJsonResp)); } catch (error) { - setLoading(false); setError(true); + } finally { + setLoading(false); } - }; + }, []); const updateScheduleNames = () => { setScheduleNames(AppStore.getScheduleNames()); @@ -223,7 +231,7 @@ export default function CourseRenderPane() { return () => { AppStore.off('scheduleNamesChange', updateScheduleNames); }; - }, []); + }, [loadCourses]); return ( <> From af70d330fb90d9346518f6e275007c44efaacd6b Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 18 Oct 2023 00:24:22 -0700 Subject: [PATCH 10/10] Extract loading message to separate component --- .../RightPane/CoursePane/CourseRenderPane.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx index 8fadeb72c..e672b5322 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx @@ -141,6 +141,14 @@ const SectionTableWrapped = ( return
{component}
; }; +const LoadingMessage = () => { + return ( + + Loading courses + + ); +}; + const ErrorMessage = () => { return ( @@ -236,16 +244,7 @@ export default function CourseRenderPane() { return ( <> {loading ? ( - - Loading courses - + ) : error || courseData.length === 0 ? ( ) : (