fix lint warnings

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import "./styles.css";
 

src/ProtectedRoute.tsx

@@ -1,19 +1,18 @@
-import {useLocation, Outlet, Navigate, Routes, Route} from "react-router-dom";
+import { useLocation, Outlet, Navigate } 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 React, { useState } from "react";
 import {
   MeetingStatus,
   SidebarUserObj,
 } from "./components/sidebar/SidebarUser";
-import {Box} from "@mui/material";
+import { Box } from "@mui/material";
 
 const ProtectedRoute = () => {
   const { auth }: any = useAuth();
   const location = useLocation();
 
-  const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
   /* Temporary data */
   const [sidebarUsers] = useState<SidebarUserObj[]>([
     { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
@@ -38,22 +37,21 @@ const ProtectedRoute = () => {
     { id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE },
     { id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE },
   ]);
-  return (
+  return auth?.isLoggedIn ? (
-    auth?.isLoggedIn
+    <>
-      ?
+      <Navbar />
-      <>
+      <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
-        <Navbar />
+        <Box sx={{ flexGrow: 1 }}>
-        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+          <Outlet />
-          <Box sx={{ flexGrow: 1 }}>
-            <Outlet />
-          </Box>
-          <Box>
-            <Sidebar users={sidebarUsers} />
-          </Box>
         </Box>
-      </>
+        <Box>
-      : <Navigate to="/login" state={{ from: location }} replace />
+          <Sidebar users={sidebarUsers} />
+        </Box>
+      </Box>
+    </>
+  ) : (
+    <Navigate to="/login" state={{ from: location }} replace />
   );
 };
 
-export default ProtectedRoute;
+export default ProtectedRoute;

src/components/login/Login.tsx

@@ -1,5 +1,5 @@
-import { useRef, useState, useEffect, useContext } from "react";
+import { useState } from "react";
-import { useLocation, Link, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Stack, Typography } from "@mui/material";
 import Container from "@mui/material/Container";
 import TextField from "@mui/material/TextField";
@@ -10,7 +10,6 @@ import LoginIcon from "@mui/icons-material/Login";
 import useAuth from "../../hooks/useAuth";
 
 const Login: React.FC = () => {
-
   const { setAuth }: any = useAuth();
 
   const navigate = useNavigate();
@@ -34,8 +33,8 @@ const Login: React.FC = () => {
 
   const handleLogin = () => {
     if (username === "" && password === "") {
-      setAuth({username: username, isLoggedIn: true});
+      setAuth({ username: username, isLoggedIn: true });
-      navigate(from, {replace: true});
+      navigate(from, { replace: true });
     }
     setUsername("");
     setPassword("");
@@ -44,25 +43,52 @@ const Login: React.FC = () => {
   return (
     <Container className="login">
       <Stack className="grid-container" spacing={2}>
-        <img className="login-logo" src={hsbcLogo} alt="HSBC Logo"/>
+        <img className="login-logo" src={hsbcLogo} alt="HSBC Logo" />
         {/* <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p> */}
-        <TextField className="username-input" id="outlined-basic" label="Username" variant="outlined" placeholder="Username" onChange={(event) => {setUsername(event.target.value)}}/>
+        <TextField
-        <TextField className="password-input" id="outlined-basic" label="Password" variant="outlined" placeholder="Password" type="password" onChange={(event) => {setPassword(event.target.value)}}/>
+          className="username-input"
+          id="outlined-basic"
+          label="Username"
+          variant="outlined"
+          placeholder="Username"
+          onChange={(event) => {
+            setUsername(event.target.value);
+          }}
+        />
+        <TextField
+          className="password-input"
+          id="outlined-basic"
+          label="Password"
+          variant="outlined"
+          placeholder="Password"
+          type="password"
+          onChange={(event) => {
+            setPassword(event.target.value);
+          }}
+        />
         <Stack direction="row" justifyContent="space-between" spacing={2}>
           <a className="register-btn" href="#">
             <Typography sx={{ ml: 1, mb: 1 }}>Forgot your password?</Typography>
           </a>
-          <Button endIcon={<LoginIcon />} className="login-btn" variant="contained" type="submit" onClick={handleLogin}>Login</Button>
+          <Button
+            endIcon={<LoginIcon />}
+            className="login-btn"
+            variant="contained"
+            type="submit"
+            onClick={handleLogin}
+          >
+            Login
+          </Button>
         </Stack>
         <Stack direction="row" justifyContent="space-between" spacing={2}>
           <Typography sx={{ ml: 1 }}>Login with</Typography>
           <a className="zoom-logo" href="#">
-            <img src={zoomLogo} alt="Zoom Logo"/>
+            <img src={zoomLogo} alt="Zoom Logo" />
           </a>
         </Stack>
       </Stack>
     </Container>
   );
 };
-  
+
-export default Login;
+export default Login;

src/context/AuthProvider.tsx

@@ -3,13 +3,13 @@ import { createContext, useState } from "react";
 const AuthContext = createContext({});
 
 export const AuthProvider = ({ children }: {children: any}) => {
-    const [auth, setAuth] = useState({});
+  const [auth, setAuth] = useState({});
 
-    return (
+  return (
-        <AuthContext.Provider value={{ auth, setAuth }}>
+    <AuthContext.Provider value={{ auth, setAuth }}>
-            {children}
+      {children}
-        </AuthContext.Provider>
+    </AuthContext.Provider>
-    )
+  );
-}
+};
 
 export default AuthContext;

src/hooks/useAuth.tsx

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import AuthContext from "../context/AuthProvider";
 
 const useAuth = () => {
-    return useContext(AuthContext);
+  return useContext(AuthContext);
-}
+};
 
 export default useAuth;