Merge pull request #13 from CPSC319-Winter-term-2/hide-navbar-sidebar-from-login

hided navbar and sidebar from login page

src/App.tsx

@@ -6,72 +6,30 @@ import Login from "./components/login/Login";
 import Home from "./components/home/Home";
 import Contacts from "./components/contacts/Contacts";
 import Calendar from "./components/calendar/Calendar";
-import Navbar from "./components/navbar/Navbar";
 import { ThemeProvider } from "@emotion/react";
 import ProtectedRoute from "./ProtectedRoute";
 
 import Theme from "./Theme";
 
 import "./style/App.css";
-import Sidebar from "./components/sidebar/Sidebar";
-import {
-  MeetingStatus,
-  SidebarUserObj,
-} from "./components/sidebar/SidebarUser";
-import MeetingDetails from "./components/meeting-details/MeetingDetails";
-import { Box } from "@mui/material";
 
 const App: React.FC = () => {
   const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
 
-  /* Temporary data */
-  const [sidebarUsers] = useState<SidebarUserObj[]>([
-    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
-    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
-    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY },
-    { id: 4, name: "Bob B.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 5, name: "Bob C.", meetingStatus: MeetingStatus.OFFLINE },
-    { id: 6, name: "Bob D.", meetingStatus: MeetingStatus.ONLINE },
-    { id: 7, name: "Bob E.", meetingStatus: MeetingStatus.AWAY },
-    { id: 8, name: "Bob F.", meetingStatus: MeetingStatus.OFFLINE },
-    { id: 9, name: "Bob G.", meetingStatus: MeetingStatus.ONLINE },
-    { id: 10, name: "Bob H.", meetingStatus: MeetingStatus.AWAY },
-    { id: 11, name: "Bob I.", meetingStatus: MeetingStatus.OFFLINE },
-    { id: 12, name: "Bob J.", meetingStatus: MeetingStatus.AWAY },
-    { id: 13, name: "Bob K.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 14, name: "Bob L.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 15, name: "Bob M.", meetingStatus: MeetingStatus.OFFLINE },
-    { id: 16, name: "Bob N.", meetingStatus: MeetingStatus.OFFLINE },
-    { id: 17, name: "Bob O.", meetingStatus: MeetingStatus.AWAY },
-    { id: 18, name: "Bob P.", meetingStatus: MeetingStatus.AWAY },
-    { id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE },
-    { id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE },
-  ]);
-
   return (
     <ThemeProvider theme={Theme}>
       <Router>
-        <Navbar />
+        <Routes>
-        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+          <Route path="/login" element={<Login />} />
-          <Box sx={{ flexGrow: 1 }}>
+          <Route element={<ProtectedRoute />}>
-            <Routes>
+            <Route path="/" element={<Home />} />
-              <Route path="/login" element={<Login />} />
+            <Route
-              <Route element={<ProtectedRoute />}>
+              path="/contacts"
-                <Route path="/" element={<Home />} />
+              element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
-                <Route
+            />
-                  path="/contacts"
+            <Route path="/calendar" element={<Calendar />} />
-                  element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
+          </Route>
-                />
+        </Routes>
-                <Route path="/calendar" element={<Calendar />} />
-              </Route>
-            </Routes>
-          </Box>
-          <Box>
-            <Sidebar users={sidebarUsers} />
-          </Box>
-        </Box>
-        <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
       </Router>
     </ThemeProvider>
   );

src/ProtectedRoute.tsx

@@ -1,12 +1,61 @@
-import { useLocation, Outlet, Navigate } from "react-router-dom";
+import {useLocation, Outlet, Navigate, Routes, Route} from "react-router-dom";
 import useAuth from "./hooks/useAuth";
+import Navbar from "./components/navbar/Navbar";
+import Sidebar from "./components/sidebar/Sidebar";
+import React, {useState} from "react";
+import {
+  MeetingStatus,
+  SidebarUserObj,
+} from "./components/sidebar/SidebarUser";
+import MeetingDetails from "./components/meeting-details/MeetingDetails";
+import {Box} from "@mui/material";
 
 const ProtectedRoute = () => {
-    const { auth }: any = useAuth();
+  const { auth }: any = useAuth();
-    const location = useLocation();
+  const location = useLocation();
-    return (
+
-        auth?.isLoggedIn ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />
+  const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
-    );
+  /* Temporary data */
-}
+  const [sidebarUsers] = useState<SidebarUserObj[]>([
+    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY },
+    { id: 4, name: "Bob B.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 5, name: "Bob C.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 6, name: "Bob D.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 7, name: "Bob E.", meetingStatus: MeetingStatus.AWAY },
+    { id: 8, name: "Bob F.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 9, name: "Bob G.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 10, name: "Bob H.", meetingStatus: MeetingStatus.AWAY },
+    { id: 11, name: "Bob I.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 12, name: "Bob J.", meetingStatus: MeetingStatus.AWAY },
+    { id: 13, name: "Bob K.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 14, name: "Bob L.", meetingStatus: MeetingStatus.IN_MEETING },
+    { id: 15, name: "Bob M.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 16, name: "Bob N.", meetingStatus: MeetingStatus.OFFLINE },
+    { id: 17, name: "Bob O.", meetingStatus: MeetingStatus.AWAY },
+    { id: 18, name: "Bob P.", meetingStatus: MeetingStatus.AWAY },
+    { id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE },
+    { id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE },
+  ]);
+  return (
+    auth?.isLoggedIn
+      ?
+      <>
+        <Navbar />
+        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+          <Box sx={{ flexGrow: 1 }}>
+            <Outlet />
+          </Box>
+          <Box>
+            <Sidebar users={sidebarUsers} />
+          </Box>
+        </Box>
+        <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
+      </>
+      : <Navigate to="/login" state={{ from: location }} replace />
+  );
+};
 
 export default ProtectedRoute;