BroncoDirectMe · blu3eee · Mar 11, 2024 · Apr 9, 2024 · Apr 9, 2024
diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BroncoDirectMe</title>
   </head>
-  <body style="width: 400px">
+  <body style="width: 400px; margin: 0">
     <div id="app"></div>
     <script src="./script.js"></script>
   </body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,60 +4,105 @@ import SearchBar from './components/SearchBar';
 import { MsalProvider } from '@azure/msal-react';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { msalInstance, MicrosoftOAuth } from './components/MicrosoftOath';
-import { Box, IconButton } from '@mui/material';
+import {
+  Box,
+  IconButton,
+  BottomNavigation,
+  BottomNavigationAction,
+  Tooltip,
+} from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
-import { Panel } from './components/panel_component';
+import BugReportIcon from '@mui/icons-material/BugReport';
 import DegreeProgressBar from './components/DegreeProgressBar';
 import './styles/App.css';
 import UpdateAlert from './components/UpdateAlert';
 import TermsOfService from './components/TermsOfService';
+import CourseSearchBar from './components/CourseSearchBar';
+import HomeIcon from '@mui/icons-material/Home';
+import SearchIcon from '@mui/icons-material/Search';
 
 /**
  * @returns Main app component
  */
 export function App(): ReactElement {
-  const [isPanelOpen, setPanelState] = React.useState(false);
-  const togglePanel = (): void => setPanelState(!isPanelOpen);
-  const [isSettingsButtonOpen, setSettingsButtonState] = React.useState(true);
+  const [value, setValue] = React.useState('home');
+
+  const handleChange = (
+    event: React.SyntheticEvent<Element, Event>,
+    newValue: string
+  ): void => {
+    setValue(newValue);
+  };
+
+  const handleBugReportClick = (): void => {
+    // Specify the URL you want to open in a new tab
+    const url =
+      'https://docs.google.com/forms/d/e/1FAIpQLSfEAQ5xbzU98fxRBaQgxKv01pEU07_ALcrJU-lGmOdIhKvkAw/viewform';
+    // Open a new tab with the specified URL
+    window.open(url, '_blank');
+  };
 
   return (
     <MsalProvider instance={msalInstance}>
       <div className="App">
-        {!isPanelOpen && (
-          <section>
-            <UpdateAlert />
-            <TermsOfService />
-            <div id="errorElm"></div>
-            <Box id="mainContent">
-              <h1>BroncoDirectMe Search</h1>
-              {isSettingsButtonOpen && (
-                <IconButton
-                  onClick={() => {
-                    togglePanel();
-                    setSettingsButtonState(false);
-                  }}
-                  id="settingsButton"
-                >
-                  <SettingsIcon id="settingsIcon" />
+        <section>
+          <UpdateAlert />
+          <TermsOfService />
+          <div id="errorElm"></div>
+          <Box id="mainContent">
+            <h1>BroncoDirectMe</h1>
+            <div id="mainButtons">
+              <Tooltip title={'Report bugs'}>
+                <IconButton id="bugReportButton" onClick={handleBugReportClick}>
+                  <BugReportIcon id="bugReportIcon" />
                 </IconButton>
-              )}
-            </Box>
-            <SearchBar settingBarState={isSettingsButtonOpen} />
-            {/* <MicrosoftOAuth /> */}
-            <DegreeProgressBar />
-          </section>
-        )}
-        {/* Hides main app components when setting panel opens */}
-        <Panel
-          title={'Settings'}
-          isOpen={isPanelOpen}
-          onClose={() => {
-            togglePanel();
-            setSettingsButtonState(true);
-          }}
+              </Tooltip>
+            </div>
+          </Box>
+          {value === 'home' && (
+            <>
+              <SearchBar settingBarState={true} />
+              <DegreeProgressBar />
+            </>
+          )}
+
+          {value === 'search' && (
+            <>
+              <CourseSearchBar />
+              {/* Additional components for Search Courses tab */}
+            </>
+          )}
+
+          {/* Settings components */}
+          {value === 'settings' && (
+            <>
+              <ToggleButton />
+            </>
+          )}
+          {/* <MicrosoftOAuth /> */}
+        </section>
+        <BottomNavigation
+          value={value}
+          onChange={handleChange}
+          showLabels
+          id="bottomNavBar"
         >
-          <ToggleButton />
-        </Panel>
+          <BottomNavigationAction
+            label="Home"
+            value="home"
+            icon={<HomeIcon />}
+          />
+          <BottomNavigationAction
+            label="Search Courses"
+            value="search"
+            icon={<SearchIcon />}
+          />
+          <BottomNavigationAction
+            label="Settings"
+            value="settings"
+            icon={<SettingsIcon />}
+          />
+        </BottomNavigation>
       </div>
     </MsalProvider>
   );

diff --git a/src/components/CourseSearchBar.tsx b/src/components/CourseSearchBar.tsx
@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { TextField, Autocomplete, CircularProgress } from '@mui/material';
+
+interface CourseInfo {
+  id: string;
+  courseName: string;
+  courseNumber: string;
+  preReqs: string;
+  coReqs: string;
+  units: string;
+}
+
+const CourseSearchBar: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [searchText, setSearchText] = useState('');
+  const [options, setOptions] = useState<CourseInfo[]>([]);
+  const [selectedCourse, setSelectedCourse] = useState<CourseInfo | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const delayDebounce = setTimeout(() => {
+      if (searchText === '') {
+        // setOptions([]);
+        return;
+      }
+
+      setLoading(true);
+      fetch(
+        // change to prod api url when the backend endpoints are updated
+        // `https://api.cppbroncodirect.me/courses?key=${encodeURIComponent(searchText))}`
+        `http://localhost:3000/courses?key=${encodeURIComponent(searchText)}`
+      )
+        .then(async (response) => await response.json())
+        .then((data) => {
+          setOptions(data);
+        })
+        .catch((error) => {
+          console.error(`Error fetching courses:`, error);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }, 2000); // 2-second delay
+
+    return () => clearTimeout(delayDebounce);
+  }, [searchText]);
+
+  const fetchCourseDetails = async (courseNumber: string): Promise<void> => {
+    try {
+      const response = await fetch(
+        // change to prod api url when the backend endpoints are updated
+        // `https://api.cppbroncodirect.me/courses/${courseNumber}`
+        `http://localhost:3000/courses/${courseNumber}`
+      );
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data: CourseInfo = await response.json();
+      setSelectedCourse(data);
+    } catch (error) {
+      console.error('Error fetching course details:', error);
+      setSelectedCourse(null);
+    }
+  };
+
+  return (
+    <div>
+      <Autocomplete
+        id="course-search"
+        sx={{
+          width: '100%',
+        }}
+        open={open}
+        onOpen={() => {
+          setOpen(true);
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+        getOptionLabel={(option) =>
+          `${option.courseNumber}: ${option.courseName}`
+        }
+        options={options}
+        loading={loading}
+        onChange={(event, newValue: CourseInfo | null) => {
+          if (newValue) {
+            fetchCourseDetails(newValue.courseNumber).catch((e) => {});
+          }
+        }}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            onChange={(e) => setSearchText(e.target.value)}
+            placeholder="Search for a course"
+            variant="outlined"
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <CircularProgress color="inherit" size={20} />}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+          />
+        )}
+      />
+      {selectedCourse && (
+        <div
+          style={{
+            marginTop: 10,
+            padding: 5,
+          }}
+        >
+          <h2>{selectedCourse.courseName}</h2>
+          <span style={{ fontSize: 14 }}>
+            {(
+              [
+                { name: 'Course ID', value: selectedCourse.courseNumber },
+                { name: 'Units', value: selectedCourse.units },
+                {
+                  name: 'Prerequisites',
+                  value: selectedCourse.preReqs,
+                  hidden: !selectedCourse.preReqs,
+                },
+                {
+                  name: 'Corequisites',
+                  value: selectedCourse.coReqs,
+                  hidden: !selectedCourse.coReqs,
+                },
+              ] as CourseFieldProps[]
+            ).map((field, index) => (
+              <CourseField key={index} {...field} />
+            ))}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CourseSearchBar;
+
+interface CourseFieldProps {
+  name: string;
+  value: string;
+  hidden?: boolean;
+}
+const CourseField: React.FC<CourseFieldProps> = ({
+  name,
+  value,
+  hidden = false,
+}) => {
+  return hidden ? null : (
+    <p>
+      <strong>{name}:</strong> {value}
+    </p>
+  );
+};
diff --git a/src/styles/App.css b/src/styles/App.css
@@ -1,18 +1,53 @@
 .App {
-  min-height: 250px;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.App section {
+  padding: 3vh 5vw;
+  overflow-y: auto;
+  flex-grow: 1;
 }
 
 #mainContent {
   display: flex;
   justify-content: space-between;
-  padding-left: 5vw;
-  padding-right: 5vw;
+  align-items: center;
+}
+
+#mainButtons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+#bugReportButton {
+  padding: 0;
+  border-radius: 6px;
+  height: fit-content;
+}
+
+#bugReportIcon {
+  font-size: 2rem;
+  padding: 2px;
+  color: #bf0a30;
 }
 
 #settingsButton {
   padding: 0;
+  border-radius: 6px;
+  height: fit-content;
 }
 
 #settingsIcon {
   font-size: 2rem;
+  padding: 2px;
+  color: #2b7dff;
+}
+
+#bottomNavBar {
+  border-top: solid 1px #989898b0;
+  flex-shrink: 0;
 }
diff --git a/src/styles/SearchBar.css b/src/styles/SearchBar.css
@@ -50,15 +50,14 @@
 }
 
 .search-bar {
-  width: 85vw;
-  margin-bottom: 10%;
-  margin-left: 5vw;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  width: 100%;
+  margin-bottom: 3vh;
 }
 
 .loading-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
   margin-bottom: 20px;
 }