From 52f76f82096e00398b6a43dc8d74190bdd97b7b1 Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Sun, 13 Mar 2022 11:58:14 -0700
Subject: [PATCH] fix lint warnings

---
 src/App.tsx                    |  2 +-
 src/ProtectedRoute.tsx         | 36 ++++++++++++------------
 src/components/login/Login.tsx | 50 ++++++++++++++++++++++++++--------
 src/context/AuthProvider.tsx   | 14 +++++-----
 src/hooks/useAuth.tsx          |  4 +--
 5 files changed, 65 insertions(+), 41 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 51159e7..1595743 100644
--- a/src/App.tsx
+++ b/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";
 
diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx
index e3a9edd..ad67baa 100644
--- a/src/ProtectedRoute.tsx
+++ b/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 (
-    auth?.isLoggedIn
-      ?
-      <>
-        <Navbar />
-        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
-          <Box sx={{ flexGrow: 1 }}>
-            <Outlet />
-          </Box>
-          <Box>
-            <Sidebar users={sidebarUsers} />
-          </Box>
+  return auth?.isLoggedIn ? (
+    <>
+      <Navbar />
+      <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+        <Box sx={{ flexGrow: 1 }}>
+          <Outlet />
         </Box>
-      </>
-      : <Navigate to="/login" state={{ from: location }} replace />
+        <Box>
+          <Sidebar users={sidebarUsers} />
+        </Box>
+      </Box>
+    </>
+  ) : (
+    <Navigate to="/login" state={{ from: location }} replace />
   );
 };
 
-export default ProtectedRoute;
\ No newline at end of file
+export default ProtectedRoute;
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index 5ff4a66..e1b25b1 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -1,5 +1,5 @@
-import { useRef, useState, useEffect, useContext } from "react";
-import { useLocation, Link, useNavigate } from "react-router-dom";
+import { useState } from "react";
+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});
-      navigate(from, {replace: true});
+      setAuth({ username: username, isLoggedIn: 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 className="password-input" id="outlined-basic" label="Password" variant="outlined" placeholder="Password" type="password" onChange={(event) => {setPassword(event.target.value)}}/>
+        <TextField
+          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;
\ No newline at end of file
+
+export default Login;
diff --git a/src/context/AuthProvider.tsx b/src/context/AuthProvider.tsx
index cb661da..8411ab4 100644
--- a/src/context/AuthProvider.tsx
+++ b/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 (
-        <AuthContext.Provider value={{ auth, setAuth }}>
-            {children}
-        </AuthContext.Provider>
-    )
-}
+  return (
+    <AuthContext.Provider value={{ auth, setAuth }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
 
 export default AuthContext;
\ No newline at end of file
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
index d1fb072..e1d0b6d 100644
--- a/src/hooks/useAuth.tsx
+++ b/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;
\ No newline at end of file