From 5653bf8485d9f0b5b4a17e25651ebab928c83cef Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sun, 22 Dec 2024 02:17:38 -0800 Subject: [PATCH 1/6] refactor: move code around --- .../{ => CourseInfo}/CourseInfoBar.tsx | 11 +++----- .../{ => CourseInfo}/CourseInfoButton.tsx | 25 ++++++------------- .../RightPane/SectionTable/SectionTable.tsx | 9 +++---- 3 files changed, 16 insertions(+), 29 deletions(-) rename apps/antalmanac/src/components/RightPane/SectionTable/{ => CourseInfo}/CourseInfoBar.tsx (97%) rename apps/antalmanac/src/components/RightPane/SectionTable/{ => CourseInfo}/CourseInfoButton.tsx (90%) diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoBar.tsx similarity index 97% rename from apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx rename to apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoBar.tsx index e42625fd1..28adcb083 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoBar.tsx @@ -6,12 +6,11 @@ import { Skeleton } from '@material-ui/lab'; import type { PrerequisiteTree } from '@packages/antalmanac-types'; import { useState } from 'react'; -import { MOBILE_BREAKPOINT } from '../../../globals'; - -import PrereqTree from './PrereqTree'; +import { MOBILE_BREAKPOINT } from '../../../../globals'; import analyticsEnum, { logAnalytics } from '$lib/analytics'; import trpc from '$lib/api/trpc'; +import PrereqTree from '$components/RightPane/SectionTable/PrereqTree'; const styles = () => ({ rightSpace: { @@ -67,7 +66,7 @@ export interface CourseInfo { ge_list: string; } -const CourseInfoBar = (props: CourseInfoBarProps) => { +export const CourseInfoBar = withStyles(styles)((props: CourseInfoBarProps) => { const { courseTitle, courseNumber, deptCode, prerequisiteLink, classes, analyticsCategory } = props; const [anchorEl, setAnchorEl] = useState(null); @@ -208,6 +207,4 @@ const CourseInfoBar = (props: CourseInfoBarProps) => { ); -}; - -export default withStyles(styles)(CourseInfoBar); +}); diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoButton.tsx similarity index 90% rename from apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx rename to apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoButton.tsx index 0a9e2d9a2..580e857e4 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoButton.tsx @@ -1,21 +1,11 @@ import { Button, Paper, Popper } from '@material-ui/core'; -import { withStyles } from '@material-ui/core/styles'; -import { ClassNameMap } from '@material-ui/core/styles/withStyles'; import { useMediaQuery, useTheme } from '@mui/material'; import { useEffect, useState } from 'react'; import { logAnalytics } from '$lib/analytics'; import { useScheduleManagementStore } from '$stores/ScheduleManagementStore'; -const styles = { - button: { - backgroundColor: '#385EB1', - color: '#fff', - }, -}; - interface CourseInfoButtonProps { - classes: ClassNameMap; text: string; icon: React.ReactElement; redirectLink?: string; @@ -24,15 +14,14 @@ interface CourseInfoButtonProps { analyticsCategory: string; } -function CourseInfoButton({ - classes, +export const CourseInfoButton = ({ text, icon, redirectLink, popupContent, analyticsAction, analyticsCategory, -}: CourseInfoButtonProps) { +}: CourseInfoButtonProps) => { const theme = useTheme(); const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm')); @@ -74,9 +63,9 @@ function CourseInfoButton({ return (
); -} - -export default withStyles(styles)(CourseInfoButton); +}; diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx index 026440098..d2b7459e2 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx @@ -10,13 +10,11 @@ import { Typography, useMediaQuery, } from '@material-ui/core'; -import { Assessment, Help, RateReview, ShowChart as ShowChartIcon } from '@material-ui/icons'; +import { Assessment, Help, RateReview, Search, ShowChart as ShowChartIcon } from '@material-ui/icons'; import { useMemo } from 'react'; import { MOBILE_BREAKPOINT } from '../../../globals'; -import CourseInfoBar from './CourseInfoBar'; -import CourseInfoButton from './CourseInfoButton'; import { EnrollmentHistoryPopup } from './EnrollmentHistoryPopup'; import GradesPopup from './GradesPopup'; import { SectionTableProps } from './SectionTable.types'; @@ -24,6 +22,8 @@ import { SectionTableProps } from './SectionTable.types'; import { SectionTableBody } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBody'; import analyticsEnum from '$lib/analytics'; import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore'; +import { CourseInfoButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoButton'; +import { CourseInfoBar } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoBar'; const TOTAL_NUM_COLUMNS = SECTION_TABLE_COLUMNS.length; @@ -135,8 +135,7 @@ function SectionTable(props: SectionTableProps) { analyticsCategory={analyticsCategory} /> - {/* Temporarily remove "Past Enrollment" until data on Anteater API */} - {/* */} + } /> Date: Sun, 22 Dec 2024 05:06:33 -0800 Subject: [PATCH 2/6] feat: add search button --- .../src/components/Calendar/CalendarRoot.tsx | 6 +-- .../Calendar/CourseCalendarEvent.tsx | 2 +- .../Calendar/toolbar/CalendarToolbar.tsx | 4 +- .../toolbar/ScheduleSelect/ScheduleSelect.tsx | 6 +-- apps/antalmanac/src/components/Map/Map.tsx | 18 ++++---- .../AddedCourses/CustomEventDetailView.tsx | 2 +- .../CourseInfo/CourseInfoSearchButton.tsx | 43 +++++++++++++++++++ .../RightPane/SectionTable/SectionTable.tsx | 9 ++-- apps/antalmanac/src/stores/TabStore.ts | 2 - 9 files changed, 65 insertions(+), 27 deletions(-) create mode 100644 apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx index 49e4d0351..e71077f79 100644 --- a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx +++ b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx @@ -12,7 +12,7 @@ import { CalendarEvent, CourseEvent } from './CourseCalendarEvent'; import { CalendarCourseEvent } from '$components/Calendar/CalendarCourseEvent'; import { CalendarCourseEventWrapper } from '$components/Calendar/CalendarCourseEventWrapper'; import { CalendarEventPopover } from '$components/Calendar/CalendarEventPopover'; -import { CalendarToolbar } from '$components/Calendar/toolbar/CalendarToolbar'; +import { CalendarToolbar } from '$components/Calendar/Toolbar/CalendarToolbar'; import { getDefaultFinalsStartDate, getFinalsStartDateForTerm } from '$lib/termData'; import AppStore from '$stores/AppStore'; import { useHoveredStore } from '$stores/HoveredStore'; @@ -114,8 +114,8 @@ export const ScheduleCalendar = memo(() => { const finalsDate = hoveredCalendarizedFinal ? getFinalsStartDateForTerm(hoveredCalendarizedFinal.term) : onlyCourseEvents.length > 0 - ? getFinalsStartDateForTerm(onlyCourseEvents[0].term) - : getDefaultFinalsStartDate(); + ? 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/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx index aa96f66b6..354c7e1b7 100644 --- a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx +++ b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx @@ -8,7 +8,7 @@ import { Event } from 'react-big-calendar'; import { Link } from 'react-router-dom'; import { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions'; -import CustomEventDialog from '$components/Calendar/toolbar/CustomEventDialog/'; +import CustomEventDialog from '$components/Calendar/Toolbar/CustomEventDialog/'; import ColorPicker from '$components/ColorPicker'; import analyticsEnum, { logAnalytics } from '$lib/analytics'; import buildingCatalogue from '$lib/buildingCatalogue'; diff --git a/apps/antalmanac/src/components/Calendar/toolbar/CalendarToolbar.tsx b/apps/antalmanac/src/components/Calendar/toolbar/CalendarToolbar.tsx index 2a147c429..415914382 100644 --- a/apps/antalmanac/src/components/Calendar/toolbar/CalendarToolbar.tsx +++ b/apps/antalmanac/src/components/Calendar/toolbar/CalendarToolbar.tsx @@ -3,8 +3,8 @@ import { Box, Button, IconButton, Paper, Tooltip } from '@mui/material'; import { useState, useCallback, useEffect, memo } from 'react'; import { undoDelete } from '$actions/AppStoreActions'; -import CustomEventDialog from '$components/Calendar/toolbar/CustomEventDialog'; -import { SelectSchedulePopover } from '$components/Calendar/toolbar/ScheduleSelect/ScheduleSelect'; +import CustomEventDialog from '$components/Calendar/Toolbar/CustomEventDialog'; +import { SelectSchedulePopover } from '$components/Calendar/Toolbar/ScheduleSelect/ScheduleSelect'; import { ClearScheduleButton } from '$components/buttons/Clear'; import DownloadButton from '$components/buttons/Download'; import ScreenshotButton from '$components/buttons/Screenshot'; diff --git a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx index 1e18f95bc..f2d093f88 100644 --- a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx +++ b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx @@ -3,9 +3,9 @@ import { Box, Button, Popover, Typography, useTheme, Tooltip } from '@mui/materi import { useCallback, useEffect, useMemo, useState } from 'react'; import { changeCurrentSchedule } from '$actions/AppStoreActions'; -import { AddScheduleButton } from '$components/Calendar/toolbar/ScheduleSelect/schedule-select-buttons/AddScheduleButton'; -import { DeleteScheduleButton } from '$components/Calendar/toolbar/ScheduleSelect/schedule-select-buttons/DeleteScheduleButton'; -import { RenameScheduleButton } from '$components/Calendar/toolbar/ScheduleSelect/schedule-select-buttons/RenameScheduleButton'; +import { AddScheduleButton } from '$components/Calendar/Toolbar/ScheduleSelect/schedule-select-buttons/AddScheduleButton'; +import { DeleteScheduleButton } from '$components/Calendar/Toolbar/ScheduleSelect/schedule-select-buttons/DeleteScheduleButton'; +import { RenameScheduleButton } from '$components/Calendar/Toolbar/ScheduleSelect/schedule-select-buttons/RenameScheduleButton'; import { CopyScheduleButton } from '$components/buttons/Copy'; import analyticsEnum, { logAnalytics } from '$lib/analytics'; import AppStore from '$stores/AppStore'; diff --git a/apps/antalmanac/src/components/Map/Map.tsx b/apps/antalmanac/src/components/Map/Map.tsx index cf3ef7e40..2076a64f9 100644 --- a/apps/antalmanac/src/components/Map/Map.tsx +++ b/apps/antalmanac/src/components/Map/Map.tsx @@ -288,16 +288,13 @@ export default function CourseMap() { */ const startDestPairs = useMemo(() => { const allEvents = [...markersToDisplay, ...customEventMarkersToDisplay]; - return allEvents.reduce( - (acc, cur, index) => { - acc.push([cur]); - if (index > 0) { - acc[index - 1].push(cur); - } - return acc; - }, - [] as (typeof allEvents)[] - ); + return allEvents.reduce((acc, cur, index) => { + acc.push([cur]); + if (index > 0) { + acc[index - 1].push(cur); + } + return acc; + }, [] as (typeof allEvents)[]); }, [markersToDisplay, customEventMarkersToDisplay]); return ( @@ -357,6 +354,7 @@ export default function CourseMap() { diff --git a/apps/antalmanac/src/components/RightPane/AddedCourses/CustomEventDetailView.tsx b/apps/antalmanac/src/components/RightPane/AddedCourses/CustomEventDetailView.tsx index 3c6d29201..1eb22a82d 100644 --- a/apps/antalmanac/src/components/RightPane/AddedCourses/CustomEventDetailView.tsx +++ b/apps/antalmanac/src/components/RightPane/AddedCourses/CustomEventDetailView.tsx @@ -8,7 +8,7 @@ import { Link } from 'react-router-dom'; import ColorPicker from '../../ColorPicker'; import { deleteCustomEvent } from '$actions/AppStoreActions'; -import CustomEventDialog from '$components/Calendar/toolbar/CustomEventDialog/'; +import CustomEventDialog from '$components/Calendar/Toolbar/CustomEventDialog/'; import analyticsEnum from '$lib/analytics'; import buildingCatalogue from '$lib/buildingCatalogue'; import AppStore from '$stores/AppStore'; diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx new file mode 100644 index 000000000..b1a65667e --- /dev/null +++ b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx @@ -0,0 +1,43 @@ +import RightPaneStore from '$components/RightPane/RightPaneStore'; +import { useCoursePaneStore } from '$stores/CoursePaneStore'; +import { useTabStore } from '$stores/TabStore'; +import { Search } from '@material-ui/icons'; +import { Button } from '@mui/material'; +import { AACourse } from '@packages/antalmanac-types'; +import { useCallback } from 'react'; +import { Link } from 'react-router-dom'; + +/** + * Routes the user to the corresponding search result + */ +export function CourseInfoSearchButton({ courseDetails, term }: { courseDetails: AACourse; term: string }) { + const { setActiveTab } = useTabStore(); + const { displaySections } = useCoursePaneStore(); + + const { deptCode, courseNumber } = courseDetails; + + const handleClick = useCallback(() => { + RightPaneStore.updateFormValue('deptValue', deptCode); + RightPaneStore.updateFormValue('courseNumber', courseNumber); + RightPaneStore.updateFormValue('term', term); + + displaySections(); + setActiveTab(1); + }, []); + + return ( +
+ +
+ ); +} diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx index d2b7459e2..772bbe0f0 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx @@ -24,12 +24,11 @@ import analyticsEnum from '$lib/analytics'; import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore'; import { CourseInfoButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoButton'; import { CourseInfoBar } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoBar'; +import { CourseInfoSearchButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton'; +import { useTabStore } from '$stores/TabStore'; const TOTAL_NUM_COLUMNS = SECTION_TABLE_COLUMNS.length; -// uncomment when we get past enrollment data back and restore the files (https://github.com/icssc/AntAlmanac/tree/5e89e035e66f00608042871d43730ba785f756b0/src/components/RightPane/SectionTable/EnrollmentGraph) -// import AlmanacGraph from '../EnrollmentGraph/EnrollmentGraph'; - interface TableHeaderColumnDetails { label: string; width?: string; @@ -108,7 +107,7 @@ function SectionTable(props: SectionTableProps) { const { courseDetails, term, allowHighlight, scheduleNames, analyticsCategory } = props; const [activeColumns] = useColumnStore((store) => [store.activeColumns]); - + const [activeTab] = useTabStore((store) => [store.activeTab]); const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`); const courseId = useMemo(() => { @@ -135,7 +134,7 @@ function SectionTable(props: SectionTableProps) { analyticsCategory={analyticsCategory} /> - } /> + {activeTab === 2 ? : null} ((set) => { }, }; }); - -export default useTabStore; From 10ddbfc1617a72d440ea9c8e5f2cbeb2320f846e Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sun, 22 Dec 2024 05:33:53 -0800 Subject: [PATCH 3/6] fix: misc. --- .../SearchForm/DeptSearchBar/DeptSearchBar.tsx | 6 ++++-- .../CourseInfo/CourseInfoSearchButton.tsx | 12 +++++++++++- .../RightPane/SectionTable/SectionTable.tsx | 2 +- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/DeptSearchBar/DeptSearchBar.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/DeptSearchBar/DeptSearchBar.tsx index 4b89685da..00036e564 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/DeptSearchBar/DeptSearchBar.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/DeptSearchBar/DeptSearchBar.tsx @@ -91,10 +91,12 @@ class DeptSearchBar extends PureComponent { + const formData = RightPaneStore.getFormData(); + this.setState({ value: { - deptValue: RightPaneStore.getFormData().deptValue, - deptLabel: RightPaneStore.getFormData().deptLabel, + deptValue: formData.deptValue, + deptLabel: formData.deptLabel, isFavorite: false, }, }); diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx index b1a65667e..4ba49fd03 100644 --- a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx +++ b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx @@ -25,6 +25,16 @@ export function CourseInfoSearchButton({ courseDetails, term }: { courseDetails: setActiveTab(1); }, []); + const queryParams = { + term: term, + deptValue: deptCode, + courseNumber: courseNumber, + }; + + const href = `/?${Object.entries(queryParams) + .map(([key, value]) => `${key}=${encodeURIComponent(value)}`) + .join('&')}`; + return (