feat: search course info button (#1082)

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);

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';

apps/antalmanac/src/components/Calendar/toolbar/CalendarToolbar.tsx → 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';

apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx → 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';

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() {
                         <Fragment key={Object.values(marker).join('')}>
                             <LocationMarker
                                 {...marker}
+                                key={marker.key}
                                 label={today === 'All' ? undefined : (index + 1).toString()}
                                 stackIndex={coursesSameBuildingPrior.length}
                             >

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';

apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/DeptSearchBar/DeptSearchBar.tsx

@@ -91,10 +91,12 @@ class DeptSearchBar extends PureComponent<DeptSearchBarProps, DeptSearchBarState
     }
 
     resetField = () => {
+        const formData = RightPaneStore.getFormData();
+
         this.setState({
             value: {
-                deptValue: RightPaneStore.getFormData().deptValue,
-                deptLabel: RightPaneStore.getFormData().deptLabel,
+                deptValue: formData.deptValue,
+                deptLabel: formData.deptLabel,
                 isFavorite: false,
             },
         });

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx → 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<HTMLElement | null>(null);
@@ -208,6 +207,4 @@ const CourseInfoBar = (props: CourseInfoBarProps) => {
             </Popover>
         </>
     );
-};
-
-export default withStyles(styles)(CourseInfoBar);
+});

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx → 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 (
         <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ display: 'flex' }}>
             <Button
-                className={classes.button}
                 variant="contained"
                 size="small"
+                color="primary"
                 onClick={(event: React.MouseEvent<HTMLElement>) => {
                     if (redirectLink) {
                         window.open(redirectLink);
@@ -91,6 +80,10 @@ function CourseInfoButton({
                         setIsClicked((prev) => !prev);
                     }
                 }}
+                // style={{
+                //     backgroundColor: '#385EB1',
+                //     color: '#fff',
+                // }}
             >
                 <span style={{ display: 'flex', gap: 4 }}>
                     {icon}
@@ -115,6 +108,4 @@ function CourseInfoButton({
             )}
         </div>
     );
-}
-
-export default withStyles(styles)(CourseInfoButton);
+};

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx

@@ -0,0 +1,53 @@
+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);
+    }, []);
+
+    const queryParams = {
+        term: term,
+        deptValue: deptCode,
+        courseNumber: courseNumber,
+    };
+
+    const href = `/?${Object.entries(queryParams)
+        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+        .join('&')}`;
+
+    return (
+        <div>
+            <Button
+                variant="contained"
+                size="small"
+                color="primary"
+                style={{ minWidth: 'fit-content' }}
+                to={href}
+                component={Link}
+                onClick={handleClick}
+            >
+                <Search />
+            </Button>
+        </div>
+    );
+}

apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx

@@ -10,26 +10,25 @@ 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';
 
 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';
+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,8 +134,7 @@ function SectionTable(props: SectionTableProps) {
                     analyticsCategory={analyticsCategory}
                 />
 
-                {/* Temporarily remove "Past Enrollment" until data on Anteater API */}
-                {/* <AlmanacGraph courseDetails={courseDetails} />  */}
+                {activeTab !== 2 ? null : <CourseInfoSearchButton courseDetails={courseDetails} term={term} />}
 
                 <CourseInfoButton
                     analyticsCategory={analyticsCategory}

apps/antalmanac/src/stores/TabStore.ts

@@ -18,5 +18,3 @@ export const useTabStore = create<TabStore>((set) => {
         },
     };
 });
-
-export default useTabStore;