Lift some course pane state to store

apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneRoot.tsx

@@ -8,18 +8,15 @@ import analyticsEnum, { logAnalytics } from '$lib/analytics';
 import { openSnackbar } from '$actions/AppStoreActions';
 import WebSOC from '$lib/websoc';
 import Grades from '$lib/grades';
+import useCoursePaneStore from '$stores/CoursePaneStore';
 
 function RightPane() {
     const [key, forceUpdate] = useReducer((currentCount) => currentCount + 1, 0);
+    const { searchIsDisplayed, displaySearch, displaySections } = useCoursePaneStore();
 
-    const toggleSearch = useCallback(() => {
-        if (
-            RightPaneStore.getFormData().ge !== 'ANY' ||
-            RightPaneStore.getFormData().deptValue !== 'ALL' ||
-            RightPaneStore.getFormData().sectionCode !== '' ||
-            RightPaneStore.getFormData().instructor !== ''
-        ) {
-            RightPaneStore.toggleSearch();
+    const handleSearch = useCallback(() => {
+        if (RightPaneStore.formDataIsValid()) {
+            displaySections();
             forceUpdate();
         } else {
             openSnackbar(
@@ -39,37 +36,29 @@ function RightPane() {
         forceUpdate();
     }, []);
 
-    useEffect(() => {
-        const handleReturnToSearch = (event: KeyboardEvent) => {
-            if (
-                !(RightPaneStore.getDoDisplaySearch() || RightPaneStore.getOpenSpotAlertPopoverActive()) &&
-                (event.key === 'Backspace' || event.key === 'Escape')
-            ) {
-                event.preventDefault();
-                RightPaneStore.toggleSearch();
-                forceUpdate();
-            }
-        };
+    const handleKeydown = useCallback(
+        (event: KeyboardEvent) => {
+            if (event.key === 'Escape') displaySearch();
+        },
+        [displaySearch]
+    );
 
-        document.addEventListener('keydown', handleReturnToSearch, false);
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeydown, false);
 
         return () => {
-            document.removeEventListener('keydown', handleReturnToSearch, false);
+            document.removeEventListener('keydown', handleKeydown, false);
         };
     }, []);
 
     return (
         <div style={{ height: '100%' }}>
             <CoursePaneButtonRow
-                showSearch={!RightPaneStore.getDoDisplaySearch()}
-                onDismissSearchResults={toggleSearch}
+                showSearch={!searchIsDisplayed}
+                onDismissSearchResults={displaySearch}
                 onRefreshSearch={refreshSearch}
             />
-            {RightPaneStore.getDoDisplaySearch() ? (
-                <SearchForm toggleSearch={toggleSearch} />
-            ) : (
-                <CourseRenderPane key={key} id={key} />
-            )}
+            {searchIsDisplayed ? <SearchForm toggleSearch={handleSearch} /> : <CourseRenderPane key={key} id={key} />}
         </div>
     );
 }

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

@@ -11,6 +11,7 @@ import LegacySearch from './LegacySearch';
 import PrivacyPolicyBanner from './PrivacyPolicyBanner';
 import TermSelector from './TermSelector';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
+import useCoursePaneStore from '$stores/CoursePaneStore';
 
 const styles: Styles<Theme, object> = {
     rightPane: {
@@ -48,23 +49,7 @@ const styles: Styles<Theme, object> = {
 
 const SearchForm = (props: { classes: ClassNameMap; toggleSearch: () => void }) => {
     const { classes, toggleSearch } = props;
-
-    const search = new URLSearchParams(window.location.search);
-
-    const [showLegacySearch, setShowLegacySearch] = useState(
-        Boolean(
-            search.get('courseCode') ||
-                search.get('courseNumber') ||
-                search.get('deptLabel') ||
-                search.get('GE') ||
-                search.get('deptValue') ||
-                search.get('term')
-        )
-    );
-
-    const toggleShowLegacySearch = () => {
-        setShowLegacySearch(!showLegacySearch);
-    };
+    const { manualSearchEnabled, toggleManualSearch } = useCoursePaneStore();
 
     const onFormSubmit = (event: FormEvent) => {
         event.preventDefault();
@@ -84,19 +69,16 @@ const SearchForm = (props: { classes: ClassNameMap; toggleSearch: () => void })
                             fieldName={'term'}
                         />
                         <Tooltip title="Toggle Manual Search">
-                            <IconButton onClick={toggleShowLegacySearch}>
+                            <IconButton onClick={toggleManualSearch}>
                                 <Tune />
                             </IconButton>
                         </Tooltip>
                     </div>
 
-                    {!showLegacySearch ? (
+                    {!manualSearchEnabled ? (
                         <div className={classes.container}>
                             <div className={classes.searchBar} id="searchBar">
-                                <FuzzySearch
-                                    toggleSearch={toggleSearch}
-                                    toggleShowLegacySearch={toggleShowLegacySearch}
-                                />
+                                <FuzzySearch toggleSearch={toggleSearch} toggleShowLegacySearch={toggleManualSearch} />
                             </div>
                         </div>
                     ) : (

apps/antalmanac/src/components/RightPane/RightPaneStore.ts

@@ -54,10 +54,6 @@ class RightPaneStore extends EventEmitter {
         return this.formData;
     };
 
-    getDoDisplaySearch = () => {
-        return this.doDisplaySearch;
-    };
-
     getOpenSpotAlertPopoverActive = () => {
         return this.openSpotAlertPopoverActive;
     };
@@ -79,13 +75,14 @@ class RightPaneStore extends EventEmitter {
         this.emit('formReset');
     };
 
-    toggleSearch = () => {
-        this.doDisplaySearch = !this.doDisplaySearch;
-    };
-
     toggleOpenSpotAlert = () => {
         this.openSpotAlertPopoverActive = !this.openSpotAlertPopoverActive;
     };
+
+    formDataIsValid = () => {
+        const { ge, deptValue, sectionCode, instructor } = this.formData;
+        return ge !== 'ANY' || deptValue !== 'ALL' || sectionCode !== '' || instructor !== '';
+    };
 }
 
 const store = new RightPaneStore();

apps/antalmanac/src/stores/CoursePaneStore.ts

@@ -0,0 +1,49 @@
+import { create } from 'zustand';
+
+interface CoursePaneStore {
+    /** Whether the search form is displayed (or the classes view) */
+    searchIsDisplayed: boolean;
+    /** Switch to the course search form */
+    displaySearch: () => void;
+    /** Switch to the classes view */
+    displaySections: () => void;
+
+    manualSearchEnabled: boolean;
+    enableManualSearch: () => void;
+    disableManualSearch: () => void;
+    toggleManualSearch: () => void;
+}
+
+function paramsAreInURL() {
+    const search = new URLSearchParams(window.location.search);
+
+    // TODO: This should be standardized
+    const searchParams = ['courseCode', 'courseNumber', 'deptLabel', 'GE', 'deptValue', 'term'];
+
+    return searchParams.some((param) => search.get(param) !== null);
+}
+
+export const useCoursePaneStore = create<CoursePaneStore>((set) => {
+    return {
+        searchIsDisplayed: true,
+        displaySearch: () => {
+            console.log('switching to search');
+            set({ searchIsDisplayed: true });
+        },
+        displaySections: () => {
+            console.log('Switching to sections');
+            set({ searchIsDisplayed: false });
+        },
+
+        manualSearchEnabled: paramsAreInURL(),
+        enableManualSearch: () => set({ manualSearchEnabled: true }),
+        disableManualSearch: () => set({ manualSearchEnabled: false }),
+        toggleManualSearch: () => set((state) => ({ manualSearchEnabled: !state.manualSearchEnabled })),
+    };
+});
+
+export default useCoursePaneStore;
+
+setInterval(() => {
+    console.log(useCoursePaneStore.getState().searchIsDisplayed);
+}, 5000);