Merge pull request #18 from CPSC319-Winter-term-2/fix-eslint-warnings-login

fixed eslint warnings

src/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-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";
@@ -10,10 +10,9 @@ import {
 import {Box} from "@mui/material";
 
 const ProtectedRoute = () => {
-  const { auth }: any = useAuth();
+  const auth= useAuth();
   const location = useLocation();
 
-  const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
   /* Temporary data */
   const [sidebarUsers] = useState<SidebarUserObj[]>([
     { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },

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";
@@ -9,13 +9,17 @@ import zoomLogo from "../../assets/zoom.png";
 import LoginIcon from "@mui/icons-material/Login";
 import useAuth from "../../hooks/useAuth";
 
+interface LocationState {
+  from: { pathname: string };
+}
 const Login: React.FC = () => {
 
-  const { setAuth }: any = useAuth();
+  const setAuth = useAuth();
 
   const navigate = useNavigate();
-  const location: any = useLocation();
+  const location = useLocation();
-  const from = location.state?.from?.pathname || "/";
+  const state = location.state as LocationState;
+  const from = state?.from?.pathname || "/";
 
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -34,7 +38,9 @@ const Login: React.FC = () => {
 
   const handleLogin = () => {
     if (username === "" && password === "") {
-      setAuth({username: username, isLoggedIn: true});
+      // setAuth({username: username, isLoggedIn: true});
+      setAuth["username"] = username;
+      setAuth["isLoggedIn"] = true;
       navigate(from, {replace: true});
     }
     setUsername("");
@@ -46,8 +52,8 @@ const Login: React.FC = () => {
       <Stack className="grid-container" spacing={2}>
         <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="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="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>

src/context/AuthProvider.tsx

@@ -1,15 +1,20 @@
 import { createContext, useState } from "react";
 
-const AuthContext = createContext({});
+interface loginInfo {
-
+  username: string;
-export const AuthProvider = ({ children }: {children: any}) => {
+  isLoggedIn: boolean;
-    const [auth, setAuth] = useState({});
-
-    return (
-        <AuthContext.Provider value={{ auth, setAuth }}>
-            {children}
-        </AuthContext.Provider>
-    )
 }
 
+const AuthContext = createContext<loginInfo>({username: "", isLoggedIn: false});
+
+export const AuthProvider = ({ children }: {children: React.ReactNode}) => {
+  const [auth] = useState<loginInfo>({username: "", isLoggedIn: false});
+
+  return (
+    <AuthContext.Provider value={auth}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
 export default AuthContext;

src/hooks/useAuth.tsx

@@ -1,8 +1,13 @@
 import { useContext } from "react";
 import AuthContext from "../context/AuthProvider";
 
-const useAuth = () => {
+interface loginInfo {
-    return useContext(AuthContext);
+  username: string;
+  isLoggedIn: boolean;
 }
 
+const useAuth = () => {
+  return useContext<loginInfo>(AuthContext);
+};
+
 export default useAuth;

src/index.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from "react-dom";
 import App from "./App";
 import "./style/App.css";
-import { AuthProvider } from './context/AuthProvider';
+import { AuthProvider } from "./context/AuthProvider";
 
 const Index:React.FC = () => {
   return (