refactor: schedule management and tab store

apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx

@@ -171,7 +171,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
     const isDark = useThemeStore((store) => store.isDark);
 
     const focusMap = useCallback(() => {
-        setActiveTab(2);
+        setActiveTab('map');
     }, [setActiveTab]);
 
     const { classes, selectedEvent } = props;

apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx

@@ -363,7 +363,7 @@ function AddedSectionsGrid() {
     );
 }
 
-export default function AddedCoursePaneFunctionComponent() {
+export function AddedCoursePane() {
     const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
 
     useEffect(() => {

apps/antalmanac/src/components/RightPane/AddedCourses/CustomEventDetailView.tsx

@@ -60,7 +60,7 @@ const CustomEventDetailView = (props: CustomEventDetailViewProps) => {
     const { setActiveTab } = useTabStore();
 
     const focusMap = useCallback(() => {
-        setActiveTab(2);
+        setActiveTab('map');
     }, [setActiveTab]);
 
     return (

apps/antalmanac/src/components/RightPane/SectionTable/cells/action.tsx → apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/ActionCell.tsx

@@ -3,7 +3,7 @@ import { Box, IconButton, Menu, MenuItem, TableCell, Tooltip, useMediaQuery } fr
 import { AASection, CourseDetails } from '@packages/antalmanac-types';
 import { bindMenu, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 
-import { MOBILE_BREAKPOINT } from '../../../../globals';
+import { MOBILE_BREAKPOINT } from '../../../../../globals';
 
 import { addCourse, deleteCourse, openSnackbar } from '$actions/AppStoreActions';
 import ColorPicker from '$components/ColorPicker';
@@ -13,7 +13,7 @@ import AppStore from '$stores/AppStore';
 /**
  * Props received by components that perform actions on a specified section.
  */
-interface SectionActionProps {
+interface ActionProps {
     /**
      * The section to perform actions on.
      */
@@ -43,7 +43,7 @@ interface SectionActionProps {
 /**
  * Sections added to a schedule, can be recolored or deleted.
  */
-export function ColorAndDelete(props: SectionActionProps) {
+export function ColorAndDelete(props: ActionProps) {
     const { section, term } = props;
 
     const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT}`);
@@ -86,7 +86,7 @@ const fieldsToReset = ['courseCode', 'courseNumber', 'deptLabel', 'deptValue', '
 /**
  * Sections that have not been added to a schedule can be added to a schedule.
  */
-export function ScheduleAddCell(props: SectionActionProps) {
+export function ScheduleAddCell(props: ActionProps) {
     const { section, courseDetails, term, scheduleNames, scheduleConflict } = props;
 
     const popupState = usePopupState({ popupId: 'SectionTableAddCellPopup', variant: 'popover' });
@@ -168,7 +168,7 @@ export function ScheduleAddCell(props: SectionActionProps) {
     );
 }
 
-export interface SectionActionCellProps extends Omit<SectionActionProps, 'classes'> {
+export interface ActionCellProps extends Omit<ActionProps, 'classes'> {
     /**
      * Whether the section has been added.
      */
@@ -178,7 +178,7 @@ export interface SectionActionCellProps extends Omit<SectionActionProps, 'classe
 /**
  * Given a section and schedule information, provides appropriate set of actions.
  */
-export function SectionActionCell(props: SectionActionCellProps) {
+export function ActionCell(props: ActionCellProps) {
     return (
         <TableCell padding="none" sx={{ width: '8%' }}>
             {props.addedCourse ? <ColorAndDelete {...props} /> : <ScheduleAddCell {...props} />}

apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/LocationsCell.tsx

@@ -18,7 +18,7 @@ export const LocationsCell = ({ meetings }: LocationsCellProps) => {
     const { setActiveTab } = useTabStore();
 
     const focusMap = useCallback(() => {
-        setActiveTab(2);
+        setActiveTab('map');
     }, [setActiveTab]);
 
     return (

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

@@ -2,7 +2,7 @@ import { TableRow, useTheme } from '@mui/material';
 import { AASection, CourseDetails } from '@packages/antalmanac-types';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { SectionActionCell } from '../cells/action';
+import { ActionCell } from './SectionTableBodyCells/ActionCell';
 
 import { CourseCodeCell } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/CourseCodeCell';
 import { DayAndTimeCell } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/DayAndTimeCell';
@@ -30,7 +30,7 @@ interface SectionTableBodyRowProps {
 // These components have too varied of types, any is fine here
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const tableBodyCells: Record<SectionTableColumn, React.ComponentType<any>> = {
-    action: SectionActionCell,
+    action: ActionCell,
     sectionCode: CourseCodeCell,
     sectionDetails: DetailsCell,
     instructors: InstructorsCell,

apps/antalmanac/src/components/ScheduleManagement/ScheduleManagement.tsx

@@ -0,0 +1,103 @@
+import { GlobalStyles, Stack, useMediaQuery, useTheme } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { ScheduleManagementTabs } from '$components/ScheduleManagement/ScheduleManagementTabs';
+import { ScheduleManagementTabsContent } from '$components/ScheduleManagement/ScheduleManagementTabsContent';
+import { getLocalStorageUserId } from '$lib/localStorage';
+import { useTabStore } from '$stores/TabStore';
+
+/**
+ * List of interactive tab buttons with their accompanying content.
+ * Each tab's content has functionality for managing the user's schedule.
+ */
+export function ScheduleManagement() {
+    const { activeTab, setActiveTab } = useTabStore();
+    const { tab } = useParams();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+    // Tab index mapped to the last known scrollTop.
+    const [positions, setPositions] = useState<Record<number, number>>({});
+
+    /**
+     * Ref to the scrollable container with all of the tabs-content within it.
+     */
+    const ref = useRef<HTMLDivElement>(null);
+
+    // Save the current scroll position to the store.
+    const onScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
+        const positionToSave = e.currentTarget.scrollTop;
+        setPositions((current) => {
+            current[activeTab] = positionToSave;
+            return current;
+        });
+    };
+
+    // Change the tab to the "added classes" tab if the user was previously logged in.
+    useEffect(() => {
+        if (tab) {
+            switch (tab) {
+                case 'added':
+                    setActiveTab('added');
+                    break;
+                case 'map':
+                    setActiveTab('map');
+                    break;
+            }
+
+            return;
+        }
+
+        const userId = getLocalStorageUserId();
+
+        if (userId === null) {
+            setActiveTab('search');
+        } else if (isMobile) {
+            setActiveTab('calendar');
+        } else {
+            setActiveTab('added');
+        }
+    }, [setActiveTab]);
+
+    // Restore scroll position if it has been previously saved.
+    useEffect(() => {
+        const savedPosition = positions[activeTab];
+
+        const animationFrame = requestAnimationFrame(() => {
+            if (ref.current && savedPosition != null) {
+                ref.current.scrollTop = savedPosition;
+            }
+        });
+
+        return () => {
+            if (animationFrame != null) {
+                cancelAnimationFrame(animationFrame);
+            }
+        };
+    }, [activeTab, positions]);
+
+    return (
+        <Stack direction="column" flexGrow={1} height="0">
+            <GlobalStyles styles={{ '*::-webkit-scrollbar': { height: '8px' } }} />
+
+            {!isMobile && <ScheduleManagementTabs />}
+
+            <Stack width="100%" height="0" flexGrow={1} padding={1}>
+                <Stack
+                    id="course-pane-box"
+                    direction="column"
+                    overflow="auto"
+                    height="0px"
+                    flexGrow={1}
+                    ref={ref}
+                    onScroll={onScroll}
+                >
+                    <ScheduleManagementTabsContent />
+                </Stack>
+            </Stack>
+
+            {isMobile && <ScheduleManagementTabs />}
+        </Stack>
+    );
+}

apps/antalmanac/src/components/ScheduleManagement/ScheduleManagementTabs.tsx

@@ -0,0 +1,107 @@
+import { Event, FormatListBulleted, MyLocation, Search } from '@mui/icons-material';
+import { Paper, Tab, Tabs, useMediaQuery, useTheme } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+import { useThemeStore } from '$stores/SettingsStore';
+import { useTabStore } from '$stores/TabStore';
+
+/**
+ * Information about the tab navigation buttons.
+ *
+ * Each button should be associated with a different aspect of schedule management.
+ */
+export type ScheduleManagementTabInfo = {
+    /**
+     * Label to display on the tab button.
+     */
+    label: string;
+
+    /**
+     * The path to navigate to in the URL.
+     */
+    href: string;
+
+    /**
+     * Icon to display.
+     */
+    icon: React.ReactElement;
+
+    /**
+     * ID for the tab?
+     */
+    id?: string;
+
+    /**
+     * Whether or not this is mobile-only.
+     */
+    mobile?: true;
+};
+
+const scheduleManagementTabs: Array<ScheduleManagementTabInfo> = [
+    {
+        label: 'Calendar',
+        icon: <Event />,
+        mobile: true,
+        href: '',
+    },
+    {
+        label: 'Search',
+        href: '/',
+        icon: <Search />,
+    },
+    {
+        label: 'Added',
+        href: '/added',
+        icon: <FormatListBulleted />,
+        id: 'added-courses-tab',
+    },
+    {
+        label: 'Map',
+        href: '/map',
+        icon: <MyLocation />,
+        id: 'map-tab',
+    },
+];
+
+export function ScheduleManagementTabs() {
+    const { activeTab, setActiveTabValue } = useTabStore();
+    const isDark = useThemeStore((store) => store.isDark);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+    const onChange = (_event: React.SyntheticEvent, value: number) => {
+        setActiveTabValue(value);
+    };
+
+    return (
+        <Paper elevation={0} variant="outlined" square sx={{ borderRadius: '4px 4px 0 0' }}>
+            <Tabs value={activeTab} onChange={onChange} indicatorColor="primary" variant="fullWidth" centered>
+                {scheduleManagementTabs.map((tab) => {
+                    return (
+                        <Tab
+                            key={tab.label}
+                            id={tab.id}
+                            component={Link}
+                            to={tab.href}
+                            icon={tab.icon}
+                            iconPosition={isMobile ? 'top' : 'start'}
+                            sx={{
+                                ...(!isMobile
+                                    ? {
+                                          minHeight: 'auto',
+                                          height: '44px',
+                                          padding: 3,
+                                          minWidth: '33%',
+                                      }
+                                    : {}),
+                                display: !isMobile && tab.mobile ? 'none' : 'flex',
+                                ...(isDark ? { '&.Mui-selected': { color: 'white' } } : {}),
+                            }}
+                            label={tab.label}
+                        />
+                    );
+                })}
+            </Tabs>
+        </Paper>
+    );
+}

apps/antalmanac/src/components/ScheduleManagement/ScheduleManagementTabsContent.tsx

@@ -0,0 +1,50 @@
+import { lazy, Suspense } from 'react';
+
+import darkModeLoadingGif from '../RightPane/CoursePane/SearchForm/Gifs/dark-loading.gif';
+import loadingGif from '../RightPane/CoursePane/SearchForm/Gifs/loading.gif';
+
+import { ScheduleCalendar } from '$components/Calendar/CalendarRoot';
+import { AddedCoursePane } from '$components/RightPane/AddedCourses/AddedCoursePane';
+import { CoursePaneRoot } from '$components/RightPane/CoursePane/CoursePaneRoot';
+import { useThemeStore } from '$stores/SettingsStore';
+import { useTabStore } from '$stores/TabStore';
+
+
+const UCIMap = lazy(() => import('../Map/Map'));
+
+export function ScheduleManagementTabsContent() {
+    const { activeTab } = useTabStore();
+    const isDark = useThemeStore((store) => store.isDark);
+
+    switch (activeTab) {
+        case 0:
+            return <ScheduleCalendar />;
+        case 1:
+            return <CoursePaneRoot />;
+        case 2:
+            return <AddedCoursePane />;
+        case 3:
+            return (
+                <Suspense
+                    fallback={
+                        <div
+                            style={{
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <img src={isDark ? darkModeLoadingGif : loadingGif} alt="Loading map" />
+                        </div>
+                    }
+                >
+                    <UCIMap />
+                </Suspense>
+            );
+
+        default:
+            return null;
+    }
+}