Merge branch 'main' into fix-advanced-search-error

icssc · Nov 23, 2024 · 0dd7638 · 0dd7638
2 parents 9ffd237 + f980933
commit 0dd7638
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 19 deletions.
diff --git a/apps/antalmanac/src/App.tsx b/apps/antalmanac/src/App.tsx
@@ -10,21 +10,25 @@ import { undoDelete } from './actions/AppStoreActions';
 import AppQueryProvider from './providers/Query';
 import AppThemeProvider from './providers/Theme';
 import AppThemev5Provider from './providers/Themev5';
+import { ErrorPage } from './routes/ErrorPage';
 import Feedback from './routes/Feedback';
 import Home from './routes/Home';
 
 const BrowserRouter = createBrowserRouter([
     {
         path: '/',
         element: <Home />,
+        errorElement: <ErrorPage />,
     },
     {
         path: '/:tab',
         element: <Home />,
+        errorElement: <ErrorPage />,
     },
     {
         path: '/feedback',
         element: <Feedback />,
+        errorElement: <ErrorPage />,
     },
 ]);
 

diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/GESelector.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/GESelector.tsx
@@ -55,10 +55,10 @@ class GESelector extends PureComponent<GESelectorProps, GESelectorState> {
         const stateObj = { url: 'url' };
         const url = new URL(window.location.href);
         const urlParam = new URLSearchParams(url.search);
-        urlParam.delete('GE');
+        urlParam.delete('ge');
         const changedValue = event.target.value as string;
         if (changedValue && changedValue != 'ANY') {
-            urlParam.append('GE', event.target.value as string);
+            urlParam.append('ge', event.target.value as string);
         }
         const param = urlParam.toString();
         const new_url = `${param.trim() ? '?' : ''}${param}`;

diff --git a/apps/antalmanac/src/components/RightPane/RightPaneStore.ts b/apps/antalmanac/src/components/RightPane/RightPaneStore.ts
@@ -45,7 +45,7 @@ class RightPaneStore extends EventEmitter {
         const search = new URLSearchParams(window.location.search);
         this.urlCourseCodeValue = search.get('courseCode') || '';
         this.urlTermValue = search.get('term') || '';
-        this.urlGEValue = search.get('GE') || '';
+        this.urlGEValue = search.get('ge') || '';
         this.urlCourseNumValue = search.get('courseNumber') || '';
         this.urlDeptLabel = search.get('deptLabel') || '';
         this.urlDeptValue = search.get('deptValue') || '';

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx
@@ -187,7 +187,9 @@ const CourseInfoBar = (props: CourseInfoBarProps) => {
                     void togglePopover(currentTarget);
                 }}
             >
-                {`${deptCode} ${courseNumber} | ${courseTitle}`}
+                <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                    {`${deptCode} ${courseNumber} | ${courseTitle}`}
+                </span>
             </Button>
             <Popover
                 anchorEl={anchorEl}

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx
@@ -1,11 +1,11 @@
-import { Button, Paper, Popper, useMediaQuery } from '@material-ui/core';
+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 { MOBILE_BREAKPOINT } from '../../../globals';
-
 import { logAnalytics } from '$lib/analytics';
+import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
 const styles = {
     button: {
@@ -33,8 +33,10 @@ function CourseInfoButton({
     analyticsAction,
     analyticsCategory,
 }: CourseInfoButtonProps) {
+    const theme = useTheme();
+    const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
     const [popupAnchor, setPopupAnchor] = useState<HTMLElement | null>(null);
-    const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`);
     const [isClicked, setIsClicked] = useState(false);
 
     useEffect(() => {
@@ -65,11 +67,14 @@ function CourseInfoButton({
         }
     };
 
+    const scheduleManagementWidth = useScheduleManagementStore((state) => state.scheduleManagementWidth);
+    const compact =
+        isMobileScreen || (scheduleManagementWidth && scheduleManagementWidth < theme.breakpoints.values.xs);
+
     return (
         <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ display: 'flex' }}>
             <Button
                 className={classes.button}
-                startIcon={!isMobileScreen && icon}
                 variant="contained"
                 size="small"
                 onClick={(event: React.MouseEvent<HTMLElement>) => {
@@ -87,7 +92,20 @@ function CourseInfoButton({
                     }
                 }}
             >
-                {text}
+                <span style={{ display: 'flex', gap: 4 }}>
+                    {icon}
+                    {!compact && (
+                        <span
+                            style={{
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                            }}
+                        >
+                            {text}
+                        </span>
+                    )}
+                </span>
             </Button>
 
             {popupContent && (

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/cells/action.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/cells/action.tsx
@@ -82,7 +82,7 @@ export function ColorAndDelete(props: SectionActionProps) {
  * Copying a specific class's link will only copy its course code.
  * If there is random value let in the url, it will interfere with the generated url.
  */
-const fieldsToReset = ['courseCode', 'courseNumber', 'deptLabel', 'deptValue', 'GE', 'term'];
+const fieldsToReset = ['courseCode', 'courseNumber', 'deptLabel', 'deptValue', 'ge', 'term'];
 
 /**
  * Sections that have not been added to a schedule can be added to a schedule.

diff --git a/apps/antalmanac/src/routes/ErrorPage.tsx b/apps/antalmanac/src/routes/ErrorPage.tsx
@@ -0,0 +1,43 @@
+import { Typography, Button, Stack } from '@mui/material';
+import { Link, useRouteError } from 'react-router-dom';
+
+export const ErrorPage = () => {
+    const error = useRouteError();
+
+    return (
+        <Stack
+            spacing={3}
+            sx={{
+                padding: '1rem',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flexDirection: 'column',
+                height: '100vh',
+                gap: 2,
+            }}
+        >
+            <Typography variant="h3" component="h1">
+                Oops! Something went wrong.
+            </Typography>
+            <Stack spacing={2} sx={{ textAlign: 'center' }}>
+                <Typography variant="h5" component="p">
+                    This error may be caused by your browser having an out of date version of AntAlmanac.
+                </Typography>
+                <Typography variant="h5" component="p">
+                    Try refreshing the page. If the error persists, please submit a{' '}
+                    <Link to="https://forms.gle/k81f2aNdpdQYeKK8A">bug report</Link> with the provided error.
+                </Typography>
+            </Stack>
+            <Link to="/">
+                <Button variant="contained" size="large">
+                    Back to Home
+                </Button>
+            </Link>
+            <details open>
+                <summary>View Error Message</summary>
+                <p>{error instanceof Error && <pre>{error.stack}</pre>}</p>
+            </details>
+        </Stack>
+    );
+};
diff --git a/apps/antalmanac/src/routes/Home.tsx b/apps/antalmanac/src/routes/Home.tsx
@@ -1,7 +1,7 @@
 import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
-import { CssBaseline, useMediaQuery, useTheme } from '@mui/material';
-import { Stack } from '@mui/material';
+import { CssBaseline, useMediaQuery, useTheme, Stack } from '@mui/material';
+import { useCallback, useEffect, useRef } from 'react';
 import Split from 'react-split';
 
 import Calendar from '$components/Calendar/CalendarRoot';
@@ -10,6 +10,7 @@ import NotificationSnackbar from '$components/NotificationSnackbar';
 import PatchNotes from '$components/PatchNotes';
 import ScheduleManagement from '$components/SharedRoot';
 import { Tutorial } from '$components/Tutorial';
+import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
 function MobileHome() {
     return (
@@ -22,6 +23,29 @@ function MobileHome() {
 
 function DesktopHome() {
     const theme = useTheme();
+    const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
+
+    const scheduleManagementRef = useRef<HTMLDivElement>();
+
+    const handleDrag = useCallback(() => {
+        const scheduleManagementElement = scheduleManagementRef.current;
+        if (!scheduleManagementElement) {
+            return;
+        }
+
+        const elementWidth = scheduleManagementElement.getBoundingClientRect().width;
+        setScheduleManagementWidth(elementWidth);
+    }, [setScheduleManagementWidth]);
+
+    useEffect(() => {
+        handleDrag();
+
+        window.addEventListener('resize', handleDrag);
+
+        return () => {
+            window.removeEventListener('resize', handleDrag);
+        };
+    }, [handleDrag]);
 
     return (
         <>
@@ -30,7 +54,7 @@ function DesktopHome() {
 
                 <Split
                     sizes={[45, 55]}
-                    minSize={100}
+                    minSize={400}
                     expandToMin={false}
                     gutterSize={10}
                     gutterAlign="center"
@@ -43,11 +67,12 @@ function DesktopHome() {
                         backgroundColor: theme.palette.primary.main,
                         width: '10px',
                     })}
+                    onDrag={handleDrag}
                 >
                     <Stack direction="column">
                         <Calendar isMobile={false} />
                     </Stack>
-                    <Stack direction="column">
+                    <Stack direction="column" ref={scheduleManagementRef}>
                         <ScheduleManagement />
                     </Stack>
                 </Split>

diff --git a/apps/antalmanac/src/stores/CoursePaneStore.ts b/apps/antalmanac/src/stores/CoursePaneStore.ts
@@ -25,7 +25,7 @@ function paramsAreInURL() {
         'courseCode',
         'courseNumber',
         'deptLabel',
-        'GE',
+        'ge',
         'deptValue',
         'term',
         'sectionCode',
@@ -45,7 +45,7 @@ function paramsAreInURL() {
 function requiredParamsAreInURL() {
     const search = new URLSearchParams(window.location.search);
 
-    const searchParams = ['courseCode', 'courseNumber', 'GE', 'deptValue'];
+    const searchParams = ['courseCode', 'courseNumber', 'ge', 'deptValue'];
 
     return searchParams.some((param) => search.get(param) !== null);
 }

diff --git a/apps/antalmanac/src/stores/HoveredStore.ts b/apps/antalmanac/src/stores/HoveredStore.ts
@@ -1,5 +1,4 @@
-import { AASection, ScheduleCourse } from '@packages/antalmanac-types';
-import { CourseDetails } from '@packages/antalmanac-types';
+import { AASection, ScheduleCourse, CourseDetails } from '@packages/antalmanac-types';
 import { create } from 'zustand';
 
 import { calendarizeCourseEvents, calendarizeFinals } from './calendarizeHelpers';

diff --git a/apps/antalmanac/src/stores/ScheduleManagementStore.ts b/apps/antalmanac/src/stores/ScheduleManagementStore.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface ScheduleManagementStore {
+    scheduleManagementWidth: number | null;
+    setScheduleManagementWidth: (width: number) => void;
+}
+
+export const useScheduleManagementStore = create<ScheduleManagementStore>((set) => ({
+    scheduleManagementWidth: null,
+    setScheduleManagementWidth: (width) => set({ scheduleManagementWidth: width }),
+}));