Make the timetable feature open the search bar

frontend/app/clientLayout.tsx

@@ -48,15 +48,14 @@ const ClientLayout: React.FC<{
 const App: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  const [searchOpen, setSearchOpen] = React.useState(false);
   const currentBuilding = useSelector(selectCurrentBuilding);
   const path = usePathname();
   const drawerOpen = !!currentBuilding && (path == '/browse' || path == '/map');
 
   return (
     <>
-      <NavBar setSearchOpen={setSearchOpen} drawerOpen={drawerOpen}/>
-      <SearchModal open={searchOpen} setOpen={setSearchOpen}/>
+      <NavBar drawerOpen={drawerOpen}/>
+      <SearchModal />
       <Main drawerOpen={drawerOpen}>
         {children}
       </Main>

frontend/components/Features.tsx

@@ -7,9 +7,12 @@ import React from "react";
 
 import background from "../public/assets/landing_page/Feature_background.png";
 import vector from "../public/assets/landing_page/Feature_vector.png";
+import { useDispatch } from "../redux/hooks";
+import { openSearch } from "../redux/searchOpenSlice";
 import FeatureCard from "./FeatureCard";
 
 const Features = () => {
+  const dispatch = useDispatch();
   return (
     <StyledFeatureDiv>
       <StyledBackgroudVector src={background} alt="background vector" />
@@ -34,7 +37,7 @@ const Features = () => {
           }
           heading="Timetable"
           description="Get instant access to real-time room schedules across campus, ensuring you're always in the right place at the right time."
-          // FIX: Time table doesnt have a default page
+          onClick={() => dispatch(openSearch())}
         />
       </StyledCardParent>
     </StyledFeatureDiv>

frontend/components/NavBar.tsx

@@ -11,19 +11,21 @@ import { usePathname } from "next/navigation";
 import React from "react";
 
 import background from "../public/assets/landing_page/texture.png";
+import { useDispatch } from "../redux/hooks";
+import { openSearch } from "../redux/searchOpenSlice";
 import { drawerWidth } from "../views/BuildingDrawer";
 import Branding from "./Branding";
 import IconButton from "./IconButton";
 
 interface NavBarProps {
-  setSearchOpen: (open: boolean) => void;
   drawerOpen: boolean;
 }
 
 // This isn't actually enforced so update this if u change the navbar
 export const navHeight = 65;
 
-const NavBar: React.FC<NavBarProps> = ({ setSearchOpen, drawerOpen }) => {
+const NavBar: React.FC<NavBarProps> = ({ drawerOpen }) => {
+  const dispatch = useDispatch();
   const path = usePathname();
 
   return (
@@ -41,7 +43,7 @@ const NavBar: React.FC<NavBarProps> = ({ setSearchOpen, drawerOpen }) => {
       <Stack direction="row" spacing={1}>
         <IconButton
           aria-label="Open search"
-          onClick={() => setSearchOpen(true)}
+          onClick={() => dispatch(openSearch())}
         >
           <SearchIcon />
         </IconButton>

frontend/components/SearchModal.tsx

@@ -16,18 +16,19 @@ import { useLocalStorage } from "usehooks-ts";
 import useBuildings from "../hooks/useBuildings";
 import useRooms from "../hooks/useRooms";
 import { setCurrentBuilding } from "../redux/currentBuildingSlice";
-import { useDispatch } from "../redux/hooks";
+import { useDispatch, useSelector } from "../redux/hooks";
+import { closeSearch, selectSearchOpen } from "../redux/searchOpenSlice";
 import { BuildingSearchOption, RoomSearchOption, SearchOption } from "../types";
 
 interface SearchProps {
-  open: boolean;
-  setOpen: (open: boolean) => void;
+
 }
 
-const SearchModal: React.FC<SearchProps> = ({ open, setOpen }) => {
+const SearchModal: React.FC<SearchProps> = () => {
   const router = useRouter();
   const dispatch = useDispatch();
   const path = usePathname();
+  const open = useSelector(selectSearchOpen);
 
   const [recentSearches, setRecentSearches] = useLocalStorage<SearchOption[]>(
     "recentSearches", []
@@ -82,7 +83,7 @@ const SearchModal: React.FC<SearchProps> = ({ open, setOpen }) => {
   ) => {
     if (!option) return;
 
-    setOpen(false);
+    dispatch(closeSearch());
 
     if (!option.recent) {
       addRecentSearch(option);
@@ -101,7 +102,7 @@ const SearchModal: React.FC<SearchProps> = ({ open, setOpen }) => {
   return (
     <Modal
       open={open}
-      onClose={() => setOpen(false)}
+      onClose={() => dispatch(closeSearch())}
       sx={{ backdropFilter: "blur(3px)" }}
     >
       <Autocomplete

frontend/redux/searchOpenSlice.ts

@@ -0,0 +1,36 @@
+/**
+ * Redux slice to manage whether the search modal is open
+ */
+import { createSlice } from "@reduxjs/toolkit";
+
+import { RootState } from "./store";
+
+interface SearchOpenState {
+  value: boolean;
+}
+
+const initialState: SearchOpenState = {
+  value: false
+}
+
+const searchOpenSlice = createSlice({
+  name: "searchOpen",
+  initialState,
+  reducers: {
+    openSearch: (state) => {
+      state.value = true;
+    },
+    closeSearch: (state) => {
+      state.value = false;
+    },
+    toggleSearch: (state) => {
+      state.value = !state.value;
+    },
+  }
+});
+
+export const { openSearch, closeSearch, toggleSearch } = searchOpenSlice.actions;
+
+export const selectSearchOpen = (state: RootState) => state.searchOpen.value;
+
+export default searchOpenSlice.reducer;

frontend/redux/store.ts

@@ -3,12 +3,14 @@ import { configureStore } from '@reduxjs/toolkit'
 import currentBuildingReducer from "./currentBuildingSlice";
 import datetimeReducer from "./datetimeSlice";
 import filtersReducer from "./filtersSlice";
+import searchOpenSlice from "./searchOpenSlice";
 
 const store = configureStore({
   reducer: {
     currentBuilding: currentBuildingReducer,
     datetime: datetimeReducer,
-    filters: filtersReducer
+    filters: filtersReducer,
+    searchOpen: searchOpenSlice
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({