Basic integration with backend finished

.env

@@ -1 +1,2 @@
-VITE_CURRENT_SEASON = 2024
+VITE_CURRENT_SEASON = 2024
+VITE_BACKEND_URL = http://localhost:8089/api

src/Types.ts

@@ -248,3 +248,7 @@ export interface IAddPost {
   title: string;
   photo: string;
 }
+
+export interface IGeneralResponse {
+  message: string;
+}

src/components/Footer.module.scss

@@ -2,16 +2,23 @@
 
 .footer {
   position: sticky;
-  width: 100vw;
+  display: flex;
+  flex-direction: row;
+  width: 98vw;
   height: 3rem;
   margin-left: -0.5rem;
   bottom: 0px;
   background-color: v.$main-color;
   color: whitesmoke;
 
-  button {
-    position: absolute;
-    top: 0.5rem;
-    right: 0px;
+  span {
+    flex: 1;
+  }
+
+  a {
+    color: whitesmoke;
+    text-decoration: none;
+    padding: 0.25rem;
+    margin: 0.25rem;
   }
 }

src/components/Footer.tsx

@@ -4,6 +4,8 @@ import { UserContext } from "../App";
 import { Button } from "@fluentui/react-components";
 import { Add16Regular } from "@fluentui/react-icons";
 import AddPost from "./AddPost";
+import Logout from "./Logout";
+import { Link } from "react-router-dom";
 
 function Footer() {
   const { userState } = useContext(UserContext);
@@ -17,8 +19,10 @@ function Footer() {
   return (
     <footer className={styles.footer}>
       <span>Created by Piotr Ptak - {new Date().getFullYear()}</span>
-      {userState?.isLoggedIn && userState?.userId && (
-        <>
+      {userState?.isLoggedIn && userState?.userId ? (
+        <div className="btn-group">
+          <Logout />
+
           <Button
             appearance="primary"
             icon={<Add16Regular />}
@@ -29,7 +33,12 @@ function Footer() {
             Add post
           </Button>
           <AddPost closeDialog={closeDialog} isOpen={isDialogOpen} />
-        </>
+        </div>
+      ) : (
+        <div className="btn-group">
+          <Link to="Login">Login</Link>
+          <Link to="Register">Register</Link>
+        </div>
       )}
     </footer>
   );

src/components/Logout.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@fluentui/react-components";
+import { useCallback, useContext } from "react";
+import { UserContext } from "../App";
+import { useNavigate } from "react-router-dom";
+
+function Logout() {
+  const { setUserState } = useContext(UserContext);
+  const navigate = useNavigate();
+
+  const onClick = useCallback(() => {
+    if (setUserState) {
+      setUserState({
+        isLoggedIn: false,
+        userId: "",
+      });
+
+      localStorage.removeItem("token");
+      navigate("/");
+    }
+  }, []);
+
+  return (
+    <Button appearance="secondary" onClick={onClick}>
+      Logout
+    </Button>
+  );
+}
+
+export default Logout;

src/pages/Login.tsx

@@ -1,30 +1,62 @@
 import { Input, Label, Button, Text } from "@fluentui/react-components";
-import { ChangeEvent, useCallback, useState } from "react";
-import { LoginUser } from "../Types";
+import { ChangeEvent, useCallback, useContext, useState } from "react";
+import { IGeneralResponse, LoginUser } from "../Types";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { UserContext } from "../App";
 
 function Login() {
+  const { setUserState } = useContext(UserContext);
+
   const [loginState, setLoginState] = useState<LoginUser>({
     email: "",
     password: "",
   });
 
+  const navigate = useNavigate();
+
   const setEmail = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setLoginState({
-      ...loginState,
+    setLoginState((prev) => ({
+      ...prev,
       email: e.target.value,
-    });
+    }));
   }, []);
 
   const setPassword = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setLoginState({
-      ...loginState,
+    setLoginState((prev) => ({
+      ...prev,
       password: e.target.value,
-    });
+    }));
   }, []);
 
-  const handleClick = () => {
-    // use mutation from React Query
-    alert(JSON.stringify(loginState));
+  const { mutateAsync } = useMutation({
+    mutationKey: ["login"],
+    mutationFn: (user: LoginUser) => {
+      return axios.post<IGeneralResponse>(
+        `${import.meta.env.VITE_BACKEND_URL}/auth/login`,
+        {
+          email: user.email,
+          password: user.password,
+        }
+      );
+    },
+    onSuccess: (data) => {
+      if (data.status === 200) {
+        const token = data.data.message;
+        localStorage.setItem("token", token);
+        if (setUserState) {
+          setUserState({ isLoggedIn: true, userId: token });
+        }
+        navigate("/");
+      }
+
+      return "";
+    },
+  });
+
+  const handleClick = async () => {
+    await mutateAsync(loginState);
   };
 
   return (

src/pages/Register.tsx

@@ -6,12 +6,18 @@ import {
   Checkbox,
   MessageBar,
 } from "@fluentui/react-components";
-import { ChangeEvent, useCallback, useState } from "react";
+import { ChangeEvent, useCallback, useContext, useState } from "react";
 import { registerUserSchema, RegisterUser } from "../validation";
-import { IErrorState } from "../Types";
+import { IErrorState, IGeneralResponse } from "../Types";
 import { ValidationError } from "yup";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { UserContext } from "../App";
 
 function Register() {
+  const { setUserState } = useContext(UserContext);
+
   const [registerState, setRegisterState] = useState<RegisterUser>({
     email: "",
     password: "",
@@ -24,24 +30,51 @@ function Register() {
     content: "",
   });
 
+  const navigate = useNavigate();
+
   const setStateValue = useCallback(
     (
       e: ChangeEvent<HTMLInputElement>,
       k: keyof Omit<RegisterUser, "isRobot">
     ) => {
-      setRegisterState({
-        ...registerState,
+      setRegisterState((prev) => ({
+        ...prev,
         [k]: e.target.value,
-      });
+      }));
     },
     []
   );
 
+  const { mutateAsync } = useMutation({
+    mutationKey: ["register"],
+    mutationFn: (user: Omit<RegisterUser, "isRobot">) => {
+      return axios.post<IGeneralResponse>(
+        `${import.meta.env.VITE_BACKEND_URL}/auth/register`,
+        {
+          email: user.email,
+          password: user.password,
+          confirmedPassword: user.confirmPassword,
+        }
+      );
+    },
+    onSuccess: (data) => {
+      if (data.status === 201) {
+        const token = data.data.message;
+        localStorage.setItem("token", token);
+        if (setUserState) {
+          setUserState({ isLoggedIn: true, userId: token });
+        }
+        navigate("/");
+      }
+    },
+  });
+
   const handleClick = async () => {
     try {
       await registerUserSchema.validate(registerState);
 
-      // use mutation from React Query
+      await mutateAsync(registerState);
+
       setErrorState({
         content: "",
         isError: false,
@@ -53,7 +86,6 @@ function Register() {
         isError: true,
       });
     }
-    alert(JSON.stringify(registerState));
   };
 
   return (
@@ -111,13 +143,23 @@ function Register() {
         <Button
           appearance="primary"
           onClick={handleClick}
-          disabled={registerState.isRobot || !errorState.isError}
+          disabled={registerState.isRobot || errorState.isError}
         >
           Register
         </Button>
       </div>
       {errorState.isError ? (
-        <MessageBar intent="error">{errorState.content}</MessageBar>
+        <MessageBar
+          intent="error"
+          style={{
+            cursor: "pointer",
+          }}
+          onClick={() => {
+            setErrorState({ isError: false, content: "" });
+          }}
+        >
+          {errorState.content}
+        </MessageBar>
       ) : (
         <></>
       )}