From 12527fe0a49200803fdb91630fc763ec536d4d2e Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Sun, 22 Dec 2024 05:06:33 -0800 Subject: [PATCH] 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;