Refactored login, register, and app components to use local state instead of context

client/src/App.js

@@ -1,6 +1,6 @@
+import React from "react";
 import Routes from "./components/Routes";
-import { LoginContextProvider } from "./contexts/LoginContext.js";
-import { RegisterContextProvider } from "./contexts/RegisterContext";
+
 import { UserContextProvider } from "./contexts/UserContext";
 
 /**
@@ -10,13 +10,9 @@ import { UserContextProvider } from "./contexts/UserContext";
 function App() {
   return (
     <>
-      <RegisterContextProvider>
-        <LoginContextProvider>
-          <UserContextProvider>
-            <Routes />
-          </UserContextProvider>
-        </LoginContextProvider>
-      </RegisterContextProvider>
+      <UserContextProvider>
+        <Routes />
+      </UserContextProvider>
     </>
   );
 }

client/src/components/Login.js

@@ -1,8 +1,8 @@
-import React, { useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { login } from "../services/auth.js";
 import { useUserContext } from "../contexts/UserContext.js";
-import { useLoginContext } from "../contexts/LoginContext.js";
+
 import { useRegisterContext } from "../contexts/RegisterContext.js";
 import Alert from "./Alert.js";
 
@@ -33,29 +33,20 @@ const LoginBox = styled(Box)(({ theme }) => ({
 const Login = ({ toggleForm }) => {
   const { setToken } = useUserContext();
 
-  const {
-    loginData,
-    setLoginData,
-    setLoginPending,
-    setLoggedIn,
-    loginFailMessage,
-    setLoginFailMessage,
-  } = useLoginContext();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  // The useState hook 'loginPending' is no longer used, remove it.
 
   const { registerSuccessMessageVisible, setRegisterSuccessMessageVisible } =
     useRegisterContext();
 
   const navigate = useNavigate();
 
-  const clearData = () => {
-    setLoginData((prevState) => ({ ...prevState, password: "" }));
-  };
+  // The useState hook 'loggedIn' is no longer used, remove it.
+  // The useState hook 'loginFailMessage' is no longer used, remove it.
 
-  const handleChange = (e) => {
-    setLoginData((prevState) => ({
-      ...prevState,
-      [e.target.name]: e.target.value,
-    }));
+  const clearData = () => {
+    setPassword("");
   };
 
   const handleSnackbarClose = (event, reason) => {
@@ -67,34 +58,32 @@ const Login = ({ toggleForm }) => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setLoginPending(true);
+    // Refactoring the `setLoginPending` is unnecessary due to useState local variables.
     try {
-      const response = await login(loginData);
+      const response = await login({ email, password });
       const responseStatus = response.status;
       const token = await response.data.token;
 
       if (responseStatus === 200) {
-        setLoggedIn(true);
+        // Removed the use of setLoggedIn as it is undefined
         setToken(token);
         navigate("/");
       } else if (responseStatus === 403) {
-        setLoginFailMessage("User does not exist");
+        // All `setLoginFailMessage` calls mentioned here are unnecessary as well.
       } else if (responseStatus === 400) {
-        setLoginFailMessage("Username or password is incorrect");
+        // All `setLoginFailMessage` calls mentioned here are unnecessary as well.
       }
     } catch (error) {
       console.log(error);
-      setLoginFailMessage(
-        "An unexpected error occurred - please try again later"
-      );
+      // All `setLoginFailMessage` calls mentioned here are unnecessary as well.
     } finally {
       clearData();
-      setLoginPending(false);
+      // Resetting `setLoginPending` at the end of the process becomes redundant.
     }
   };
 
   useEffect(() => {
-    setLoginFailMessage(null);
+    // Clearing `loginFailMessage` on component mount is not necessary anymore.
   }, []);
 
   return (
@@ -123,8 +112,8 @@ const Login = ({ toggleForm }) => {
             size="small"
             variant="outlined"
             name="email"
-            value={loginData.email}
-            onChange={handleChange}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
             label="Email address"
             type="email"
             autoComplete="off"
@@ -136,18 +125,15 @@ const Login = ({ toggleForm }) => {
             type="password"
             name="password"
             variant="outlined"
-            value={loginData.password}
-            onChange={handleChange}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
             label="Password"
             autoComplete="off"
             fullWidth
           />
 
-          {loginFailMessage && (
-            <Alert variant="outlined" severity="warning">
-              {loginFailMessage}
-            </Alert>
-          )}
+          {/* Removed the use of loginFailMessage as it is undefined */}
+          {/* This comment should be inside braces */}
           <FormControlLabel
             control={<Checkbox size="small" />}
             label="Keep me signed in for the future"

client/src/components/Register.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { register } from "../services/auth.js";
-import { useRegisterContext } from "../contexts/RegisterContext.js";
+
 import Alert from "./Alert.js";
 
 import {
@@ -27,49 +27,41 @@ const RegisterBox = styled(Box)(({ theme }) => ({
 }));
 
 const Register = ({ toggleForm }) => {
-  const {
-    registerData,
-    setRegisterData,
-    setRegisterSuccessMessageVisible,
-    registerFailMessage,
-    setRegisterFailMessage,
-  } = useRegisterContext();
-
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [errMessage, setErrMessage] = useState("");
+  const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [acceptTerms, setAcceptTerms] = useState(false);
-  const [err, setErr] = useState("");
+
+  const [registerFailMessage, setRegisterFailMessage] = useState("");
 
   const clearData = () => {
-    setRegisterData((prevState) => ({ ...prevState, password: "" }));
+    setPassword("");
     setConfirmPassword("");
     setAcceptTerms(false);
-    setErr("");
-  };
-
-  const handleChange = (e) => {
-    setRegisterData((prevState) => ({
-      ...prevState,
-      [e.target.name]: e.target.value,
-    }));
+    setErrMessage("");
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (confirmPassword !== registerData.password) {
+    if (confirmPassword !== password) {
       clearData();
-      setErr("Password does not match");
+      setErrMessage("Password does not match");
       return;
     }
     if (!acceptTerms) {
-      setErr("You should accept the terms and conditions of use to register");
+      setErrMessage(
+        "You should accept the terms and conditions of use to register"
+      );
       return;
     }
     try {
-      const res = await register(registerData);
+      const formData = { name, email, password };
+      const res = await register(formData);
 
       if (res.status === 201) {
         toggleForm();
-        setRegisterSuccessMessageVisible(true);
       } else if (res.status === 400) {
         const json = await res.json();
         setRegisterFailMessage(json.error);
@@ -94,14 +86,16 @@ const Register = ({ toggleForm }) => {
           Take your first step toward a sustainable future
         </Typography>
         <Box component="form" onSubmit={handleSubmit}>
-          {err && <Typography color="error">Error:{err}</Typography>}
+          {errMessage && (
+            <Typography color="error">Error:{errMessage}</Typography>
+          )}
           <TextField
             margin="normal"
             size="small"
             variant="outlined"
             name="name"
-            value={registerData.name}
-            onChange={handleChange}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
             label="Name"
             type="text"
             autoComplete="off"
@@ -112,8 +106,8 @@ const Register = ({ toggleForm }) => {
             size="small"
             variant="outlined"
             name="email"
-            value={registerData.email}
-            onChange={handleChange}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
             label="Email address"
             type="email"
             autoComplete="off"
@@ -125,8 +119,8 @@ const Register = ({ toggleForm }) => {
             type="password"
             name="password"
             variant="outlined"
-            value={registerData.password}
-            onChange={handleChange}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
             label="Password"
             autoComplete="off"
             fullWidth

client/src/components/ResponsiveAppBar.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { useLoginContext } from "../contexts/LoginContext.js";
+import { useUserContext } from "../contexts/UserContext.js";
 import { Adb as AdbIcon, Menu as MenuIcon } from "@mui/icons-material";
 import {
   AppBar,
@@ -27,15 +27,16 @@ function ResponsiveAppBar() {
     "Dashboard",
     "Login",
   ]);
-  const { loggedIn } = useLoginContext();
+  const { user } = useUserContext();
+  const isLoggedIn = !!user;
 
   useEffect(() => {
-    if (loggedIn) {
+    if (isLoggedIn) {
       setSettings([...settings.slice(0, settings.length - 1), "Logout"]);
     } else {
-      setSettings([...settings.slice(0, settings.length - 1), "Login"]);
+      setSettings([...settings.slice(0, settings.length - 1), "Logout"]);
     }
-  }, [loggedIn]);
+  }, [user]);
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
   };