#25 Moved sendLoginRequest and sendLogoutRequest to utils

frontend/src/pages/LoginPage.jsx

@@ -3,7 +3,7 @@ import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
 import { Link, useLocation } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
-import { makeRequest } from "../utils.ts";
+import { sendLogoutRequest, sendLoginRequest } from "../utils.ts";
 
 const LoginPage = () => {
   const [username, setUsername] = useState("");
@@ -15,29 +15,28 @@ const LoginPage = () => {
 
   useEffect(() => {
     if (currentUser?.id) {
-      gotoHome();
+      setLocation("/");
     }
-  }, [currentUser]);
+  }, [currentUser, setLocation]);
 
-  const gotoHome = () => {
-    setLocation("/");
-  };
-
-  const sendLoginRequest = async (e) => {
+  const formCb = async (e) => {
     e?.preventDefault();
-    await makeRequest({
-      url: "http://localhost:5000/login",
-      method: "POST",
-      body: { username, password },
-    })
-      .then((resp) => resp.json())
-      .then((data) => {
-        if (data.error) {
-          setError(data);
-          return;
-        }
-        setCurrentUser(data);
-      });
+    const res = await sendLoginRequest(username, password);
+
+    if (res?.isError) {
+      if (res.message.includes("already")) {
+        setError({
+          ...res,
+          message: "An error occured. Try logging in again.",
+        });
+        await sendLogoutRequest();
+        return;
+      }
+      setError(res);
+      return;
+    }
+    setCurrentUser(res);
+    setLocation("/");
   };
 
   return (
@@ -53,7 +52,7 @@ const LoginPage = () => {
         )}
         <h2>Login</h2>
         <br />
-        <Form onSubmit={sendLoginRequest}>
+        <Form onSubmit={formCb}>
           <Form.Group as={Row} className="mb-3" controlId="username">
             <Form.Label column sm={2} className="me-2">
               Username

frontend/src/pages/LogoutPage.jsx

@@ -3,23 +3,18 @@ import { useContext, useEffect } from "react";
 import { Container } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
-import { makeRequest } from "../utils.ts";
+import { sendLogoutRequest } from "../utils.ts";
 
 const LogoutPage = () => {
   const { setCurrentUser } = useContext(UserContext);
   useEffect(() => {
-    const cleanup = async () => {
-      await makeRequest({
-        url: "http://localhost:5000/logout",
-        method: "POST",
-      });
-
+    (async () => {
+      await sendLogoutRequest();
       await setCurrentUser({});
       localStorage.removeItem("currentUser");
       window.location.href = "/login";
-    };
-    cleanup();
-  }, []);
+    })();
+  }, [setCurrentUser]);
 
   return (
     <React.Fragment>