Merge branch 'main' into gpa

icssc · Oct 10, 2023 · ef40ee2 · ef40ee2
1 parent b77c0c7
commit ef40ee2
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 216 deletions.
diff --git a/apps/antalmanac/src/components/Map/Map.tsx b/apps/antalmanac/src/components/Map/Map.tsx
@@ -217,7 +217,7 @@ export default function CourseMap() {
         <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', flexGrow: 1, height: '100%' }}>
             <MapContainer ref={map} center={[33.6459, -117.842717]} zoom={16} style={{ height: '100%' }}>
                 {/* Menu floats above the map. */}
-                <Paper sx={{ zIndex: 400, position: 'relative', my: 2, mx: 6.942, marginX: '15%', marginY: 8 }}>
+                <Paper sx={{ position: 'relative', mx: 'auto', my: 2, width: '70%', zIndex: 400 }}>
                     <Tabs value={selectedDayIndex} onChange={handleChange} variant="fullWidth" sx={{ minHeight: 0 }}>
                         {days.map((day) => (
                             <Tab key={day} label={day} sx={{ padding: 1, minHeight: 'auto', minWidth: '10%' }} />

diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneRoot.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneRoot.tsx
@@ -1,5 +1,4 @@
-import { withStyles } from '@material-ui/core/styles';
-import { PureComponent } from 'react';
+import { useCallback, useEffect, useReducer } from 'react';
 
 import RightPaneStore from '../RightPaneStore';
 import CoursePaneButtonRow from './CoursePaneButtonRow';
@@ -9,82 +8,68 @@ import analyticsEnum, { logAnalytics } from '$lib/analytics';
 import { openSnackbar } from '$actions/AppStoreActions';
 import { clearCache } from '$lib/course-helpers';
 
-const styles = {
-    container: {
-        height: '100%',
-    },
-};
+function RightPane() {
+    const [key, forceUpdate] = useReducer((currentCount) => currentCount + 1, 0);
 
-class RightPane extends PureComponent {
-    // When a user clicks the refresh button in CoursePaneButtonRow,
-    // we increment the refresh state by 1.
-    // Since it's the key for CourseRenderPane, it triggers a rerender
-    // and reloads the latest course data
-    state = {
-        refresh: 0,
-    };
-
-    returnToSearchBarEvent = (event: KeyboardEvent) => {
-        if (
-            !(RightPaneStore.getDoDisplaySearch() || RightPaneStore.getOpenSpotAlertPopoverActive()) &&
-            (event.key === 'Backspace' || event.key === 'Escape')
-        ) {
-            event.preventDefault();
-            RightPaneStore.toggleSearch();
-            this.forceUpdate();
-        }
-    };
-
-    componentDidMount() {
-        document.addEventListener('keydown', this.returnToSearchBarEvent, false);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this.returnToSearchBarEvent, false);
-    }
-
-    refreshSearch = () => {
-        logAnalytics({
-            category: analyticsEnum.classSearch.title,
-            action: analyticsEnum.classSearch.actions.REFRESH,
-        });
-        clearCache();
-        this.setState({ refresh: this.state.refresh + 1 });
-    };
-
-    toggleSearch = () => {
+    const toggleSearch = useCallback(() => {
         if (
             RightPaneStore.getFormData().ge !== 'ANY' ||
             RightPaneStore.getFormData().deptValue !== 'ALL' ||
             RightPaneStore.getFormData().sectionCode !== '' ||
             RightPaneStore.getFormData().instructor !== ''
         ) {
             RightPaneStore.toggleSearch();
-            this.forceUpdate();
+            forceUpdate();
         } else {
             openSnackbar(
                 'error',
                 `Please provide one of the following: Department, GE, Course Code/Range, or Instructor`
             );
         }
-    };
+    }, []);
+
+    const refreshSearch = useCallback(() => {
+        logAnalytics({
+            category: analyticsEnum.classSearch.title,
+            action: analyticsEnum.classSearch.actions.REFRESH,
+        });
+        clearCache();
+        forceUpdate();
+    }, []);
+
+    useEffect(() => {
+        const handleReturnToSearch = (event: KeyboardEvent) => {
+            if (
+                !(RightPaneStore.getDoDisplaySearch() || RightPaneStore.getOpenSpotAlertPopoverActive()) &&
+                (event.key === 'Backspace' || event.key === 'Escape')
+            ) {
+                event.preventDefault();
+                RightPaneStore.toggleSearch();
+                forceUpdate();
+            }
+        };
+
+        document.addEventListener('keydown', handleReturnToSearch, false);
+
+        return () => {
+            document.removeEventListener('keydown', handleReturnToSearch, false);
+        };
+    }, []);
 
-    render() {
-        return (
-            <div style={{ height: '100%', padding: 8 }}>
-                <CoursePaneButtonRow
-                    showSearch={!RightPaneStore.getDoDisplaySearch()}
-                    onDismissSearchResults={this.toggleSearch}
-                    onRefreshSearch={this.refreshSearch}
-                />
-                {RightPaneStore.getDoDisplaySearch() ? (
-                    <SearchForm toggleSearch={this.toggleSearch} />
-                ) : (
-                    <CourseRenderPane key={this.state.refresh} />
-                )}
-            </div>
-        );
-    }
+    return (
+        <div style={{ height: '100%', padding: 8 }}>
+            <CoursePaneButtonRow
+                showSearch={!RightPaneStore.getDoDisplaySearch()}
+                onDismissSearchResults={toggleSearch}
+                onRefreshSearch={refreshSearch}
+            />
+            {RightPaneStore.getDoDisplaySearch() ? (
+                <SearchForm toggleSearch={toggleSearch} />
+            ) : (
+                <CourseRenderPane key={key} />
+            )}
+        </div>
+    );
 }
 
-export default withStyles(styles)(RightPane);
+export default RightPane;