From f0377dfb52da6c5419849faf1ddff348741acd11 Mon Sep 17 00:00:00 2001 From: adcockdalton Date: Tue, 20 Feb 2024 23:56:40 -0800 Subject: [PATCH 1/2] generalized hover functionality --- .../src/components/Calendar/CalendarRoot.tsx | 20 +++++---- .../RightPane/CoursePane/CourseRenderPane.tsx | 6 +-- .../SectionTable/SectionTableBody.tsx | 15 +++---- apps/antalmanac/src/lib/termData.ts | 2 +- apps/antalmanac/src/stores/HoveredStore.ts | 44 ++++++++++++++++--- 5 files changed, 59 insertions(+), 28 deletions(-) diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx index b0f3d5f2e..d9273f978 100644 --- a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx +++ b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx @@ -80,14 +80,15 @@ export default function ScheduleCalendar(props: ScheduleCalendarProps) { const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames()); const { isMilitaryTime } = useTimeFormatStore(); - const { hoveredCourseEvents } = useHoveredStore(); + const { hoveredCalendarizedCourses, hoveredCalendarizedFinal } = useHoveredStore(); const getEventsForCalendar = (): CalendarEvent[] => { - return showFinalsSchedule - ? finalsEventsInCalendar - : hoveredCourseEvents - ? [...eventsInCalendar, ...hoveredCourseEvents] - : eventsInCalendar; + if (showFinalsSchedule) + return hoveredCalendarizedFinal + ? [...finalsEventsInCalendar, hoveredCalendarizedFinal] + : finalsEventsInCalendar; + else + return hoveredCalendarizedCourses ? [...eventsInCalendar, ...hoveredCalendarizedCourses] : eventsInCalendar; }; const handleClosePopover = () => { @@ -165,8 +166,11 @@ export default function ScheduleCalendar(props: ScheduleCalendarProps) { const onlyCourseEvents = eventsInCalendar.filter((e) => !e.isCustomEvent) as CourseEvent[]; - const finalsDate = - onlyCourseEvents.length > 0 ? getFinalsStartDateForTerm(onlyCourseEvents[0].term) : getDefaultFinalsStartDate(); + const finalsDate = hoveredCalendarizedFinal + ? getFinalsStartDateForTerm(hoveredCalendarizedFinal.term) + : onlyCourseEvents.length > 0 + ? getFinalsStartDateForTerm(onlyCourseEvents[0].term) + : getDefaultFinalsStartDate(); const finalsDateFormat = finalsDate ? 'ddd MM/DD' : 'ddd'; const date = showFinalsSchedule && finalsDate ? finalsDate : new Date(2018, 0, 1); diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx index 33b49df8b..501033762 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx @@ -178,7 +178,7 @@ export default function CourseRenderPane(props: { id?: number }) { const [error, setError] = useState(false); const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames()); - const setHoveredCourseEvents = useHoveredStore((store) => store.setHoveredCourseEvents); + const setHoveredEvents = useHoveredStore((store) => store.setHoveredEvents); const loadCourses = useCallback(async () => { setLoading(true); @@ -266,9 +266,9 @@ export default function CourseRenderPane(props: { id?: number }) { */ useEffect(() => { return () => { - setHoveredCourseEvents(undefined); + setHoveredEvents(undefined); }; - }, [setHoveredCourseEvents]); + }, [setHoveredEvents]); return ( <> diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx index e9db39961..0571d7b58 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx @@ -531,20 +531,17 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => { setCalendarEvents(AppStore.getCourseEventsInCalendar()); }, [setCalendarEvents]); - const [hoveredCourseEvents, setHoveredCourseEvents] = useHoveredStore((store) => [ - store.hoveredCourseEvents, - store.setHoveredCourseEvents, - ]); + const [hoveredEvents, setHoveredEvents] = useHoveredStore((store) => [store.hoveredEvents, store.setHoveredEvents]); const handleHover = useCallback(() => { const alreadyHovered = - hoveredCourseEvents && - hoveredCourseEvents.some((courseEvent) => courseEvent.sectionCode == section.sectionCode); + hoveredEvents && + hoveredEvents.some((scheduleCourse) => scheduleCourse.section.sectionCode == section.sectionCode); !previewMode || alreadyHovered || addedCourse - ? setHoveredCourseEvents(undefined) - : setHoveredCourseEvents(section, courseDetails, term); - }, [addedCourse, courseDetails, hoveredCourseEvents, previewMode, section, setHoveredCourseEvents, term]); + ? setHoveredEvents(undefined) + : setHoveredEvents(section, courseDetails, term); + }, [addedCourse, courseDetails, hoveredEvents, previewMode, section, setHoveredEvents, term]); // Attach event listeners to the store. useEffect(() => { diff --git a/apps/antalmanac/src/lib/termData.ts b/apps/antalmanac/src/lib/termData.ts index 8e9cd0733..a6bfe183f 100644 --- a/apps/antalmanac/src/lib/termData.ts +++ b/apps/antalmanac/src/lib/termData.ts @@ -112,7 +112,7 @@ function getFinalsStartForTerm(term: string) { */ function getDefaultFinalsStartDate() { // FIXME: Un-offset once Spring starts, or figure out a proper fix - const [year, month, day] = termData[defaultTerm + 1].finalsStartDate || []; + const [year, month, day] = getDefaultFinalsStart() || []; return year && month && day ? new Date(year, month, day + 1) : undefined; } diff --git a/apps/antalmanac/src/stores/HoveredStore.ts b/apps/antalmanac/src/stores/HoveredStore.ts index 5245399ef..306a54954 100644 --- a/apps/antalmanac/src/stores/HoveredStore.ts +++ b/apps/antalmanac/src/stores/HoveredStore.ts @@ -1,20 +1,37 @@ import { create } from 'zustand'; -import { AASection } from '@packages/antalmanac-types'; -import { calendarizeCourseEvents } from './calendarizeHelpers'; +import { AASection, ScheduleCourse } from '@packages/antalmanac-types'; +import { calendarizeCourseEvents, calendarizeFinals } from './calendarizeHelpers'; import { CourseEvent } from '$components/Calendar/CourseCalendarEvent'; import { CourseDetails } from '$lib/course_data.types'; export interface HoveredStore { - hoveredCourseEvents: CourseEvent[] | undefined; - setHoveredCourseEvents: (section?: AASection, courseDetails?: CourseDetails, term?: string) => void; + hoveredEvents: ScheduleCourse[] | undefined; + setHoveredEvents: (section?: AASection, courseDetails?: CourseDetails, term?: string) => void; + hoveredCalendarizedCourses: CourseEvent[] | undefined; + hoveredCalendarizedFinal: CourseEvent | undefined; } export const useHoveredStore = create((set) => { return { - hoveredCourseEvents: undefined, - setHoveredCourseEvents: (section, courseDetails, term) => { + hoveredEvents: undefined, + hoveredCalendarizedCourses: undefined, + hoveredCalendarizedFinal: undefined, + setHoveredEvents: (section, courseDetails, term) => { set({ - hoveredCourseEvents: + hoveredEvents: + section && courseDetails && term + ? [ + { + ...courseDetails, + section: { + ...section, + color: '#80808080', + }, + term, + }, + ] + : undefined, + hoveredCalendarizedCourses: section && courseDetails && term ? calendarizeCourseEvents([ { @@ -27,6 +44,19 @@ export const useHoveredStore = create((set) => { }, ]) : undefined, + hoveredCalendarizedFinal: + section && courseDetails && term + ? calendarizeFinals([ + { + ...courseDetails, + section: { + ...section, + color: '#80808080', + }, + term, + }, + ])[0] + : undefined, }); }, }; From 24ba52114b3a2c9dd51874fd5a63c238e1ca9903 Mon Sep 17 00:00:00 2001 From: Dalton Adcock Date: Mon, 15 Apr 2024 11:27:58 -0700 Subject: [PATCH 2/2] move globalstyles for thin scroll to rightpaneroot --- .../components/RightPane/CoursePane/CourseRenderPane.tsx | 4 +--- .../antalmanac/src/components/RightPane/RightPaneRoot.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx index 21fb45fbf..010daefef 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx @@ -1,6 +1,5 @@ - import { Close } from '@mui/icons-material'; -import { Alert, Box, GlobalStyles, IconButton, useMediaQuery } from '@mui/material'; +import { Alert, Box, IconButton, useMediaQuery } from '@mui/material'; import { AACourse, AASection } from '@packages/antalmanac-types'; import { WebsocDepartment, WebsocSchool, WebsocAPIResponse, GE } from 'peterportal-api-next-types'; import { useCallback, useEffect, useState } from 'react'; @@ -288,7 +287,6 @@ export default function CourseRenderPane(props: { id?: number }) { - {courseData.map((_: WebsocSchool | WebsocDepartment | AACourse, index: number) => { let heightEstimate = 200; if ((courseData[index] as AACourse).sections !== undefined) diff --git a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx index 0bde00518..24693c08f 100644 --- a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx +++ b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx @@ -1,14 +1,17 @@ -import { Link } from 'react-router-dom'; import { Box, Paper, Tab, Tabs, Typography } from '@material-ui/core'; import { FormatListBulleted, MyLocation, Search } from '@material-ui/icons'; +import { GlobalStyles } from '@mui/material'; import React, { Suspense } from 'react'; +import { Link } from 'react-router-dom'; import AddedCoursePane from './AddedCourses/AddedCoursePane'; import CoursePane from './CoursePane/CoursePaneRoot'; import darkModeLoadingGif from './CoursePane/SearchForm/Gifs/dark-loading.gif'; import loadingGif from './CoursePane/SearchForm/Gifs/loading.gif'; -import { useTabStore } from '$stores/TabStore'; + import { useThemeStore } from '$stores/SettingsStore'; +import { useTabStore } from '$stores/TabStore'; + const UCIMap = React.lazy(() => import('../Map')); @@ -60,6 +63,7 @@ export default function Desktop({ style }: DesktopTabsProps) { return ( +