Merge pull request #49 from CS3219-AY2324S1/adjust-login-visible-ui

Adjust UI visibility based on log in

Author: szelongq

.gitignore

@@ -37,3 +37,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# IDE files
+/*/.idea/

frontend/src/api/axios/config.ts

@@ -1,9 +1,5 @@
 import axios from 'axios'
 
-export const httpClient = axios.create({
-  baseURL: process.env.REACT_APP_BASE_URL,
-});
-
 export const questionhttpClient = axios.create({
   baseURL: process.env.REACT_APP_QUESTION_BASE_URL,
 })

frontend/src/auth/RedirectIfLoggedIn.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "./auth.context";
+
+interface RedirectIfLoggedInProps {
+  children: ReactNode;
+}
+
+export default function RedirectIfLoggedIn({ children }: RedirectIfLoggedInProps) {
+  const { user } = useAuth();
+  if (user) {
+    return <Navigate to="/home" />;
+  }
+  return <>{children}</>;
+}

frontend/src/components/Navbar.tsx

@@ -17,7 +17,7 @@ import AdbIcon from "@mui/icons-material/Adb";
 import { useAuth } from "../auth/auth.context";
 import { useNavigate } from "react-router-dom";
 
-const pages = ["Products", "Pricing", "Blog"];
+const pages = ["Questions"];
 const authPages = [
   {
     name: "Login",
@@ -67,7 +67,7 @@ export default function Navbar() {
             variant="h6"
             noWrap
             component="a"
-            href="/"
+            href="/home"
             sx={{
               mr: 2,
               display: { xs: "none", md: "flex" },
@@ -78,7 +78,7 @@ export default function Navbar() {
               textDecoration: "none",
             }}
           >
-            LOGO
+            PeerPrep
           </Typography>
 
           <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
@@ -110,12 +110,12 @@ export default function Navbar() {
                 display: { xs: "block", md: "none" },
               }}
             >
-              {pages.map((page) => (
+              {user && pages.map((page) => (
                 <MenuItem key={page} onClick={handleCloseNavMenu}>
                   <Typography textAlign="center">{page}</Typography>
                 </MenuItem>
               ))}
-              {authPages.map((page) => (
+              {!user && authPages.map((page) => (
                 <MenuItem key={page.name} onClick={() => navigate(page.link)}>
                   <Typography textAlign="center">{page.name}</Typography>
                 </MenuItem>
@@ -127,7 +127,7 @@ export default function Navbar() {
             variant="h5"
             noWrap
             component="a"
-            href="/"
+            href="/home"
             sx={{
               mr: 2,
               display: { xs: "flex", md: "none" },
@@ -139,10 +139,10 @@ export default function Navbar() {
               textDecoration: "none",
             }}
           >
-            LOGO
+            PeerPrep
           </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
-            {pages.map((page) => (
+            {user && pages.map((page) => (
               <Button
                 key={page}
                 onClick={handleCloseNavMenu}

frontend/src/index.tsx

@@ -6,6 +6,7 @@ import App from "./pages/App";
 import Login from "./pages/login";
 import SignUp from "./pages/signup";
 import AuthGuard from "./auth/AuthGuard";
+import RedirectIfLoggedIn from "./auth/RedirectIfLoggedIn";
 import { DataContextProvider } from "./data/data.context";
 
 import ProblemSolver from "./pages/ProblemSolver";
@@ -23,9 +24,23 @@ root.render(
         <DataContextProvider>
           <Routes>
             <Route path="/" element={<Landing />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<SignUp />} />
             <Route path="/landing" element={<Landing />} />
+            <Route
+              path="/login"
+              element={
+                <RedirectIfLoggedIn>
+                  <Login />
+                </RedirectIfLoggedIn>
+              }
+            />
+            <Route
+              path="/signup"
+              element={
+                <RedirectIfLoggedIn>
+                  <SignUp />
+                </RedirectIfLoggedIn>
+              }
+            />
             <Route
               path="/home"
               element={

frontend/src/pages/login.tsx

@@ -17,6 +17,9 @@ export default function Login() {
       <CssBaseline />
       <Navbar />
       <CenteredContainer>
+        <Typography variant="h4" align="center" paddingBottom={5}>
+          Log In
+        </Typography>
         <TextField
           sx={{ width: "25ch" }}
           label="email"

frontend/src/pages/signup.tsx

@@ -24,6 +24,9 @@ export default function SignUp() {
       <CssBaseline />
       <Navbar />
       <CenteredContainer>
+        <Typography variant="h4" align="center" paddingBottom={5}>
+          Sign Up
+        </Typography>
         <TextField
           sx={{ width: "25ch" }}
           label="email"