Merge pull request #237 from ita-social-projects/#222-AddLogoutFuncti…

…onalityConnectWithApi

#222 Logout functionality added

FrontEnd/src/components/HeaderFooter/header/navbar/DropdownMenu.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect, useRef } from "react";
+import css from "./DropdownMenu.module.css";
+
+function DropdownMenu({ children, toggleText }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const onBodyClick = (e) => {
+      if (!ref.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.body.addEventListener("mousedown", onBodyClick);
+
+    return () => {
+      document.body.removeEventListener("mousedown", onBodyClick);
+    };
+  }, []);
+
+  const handleOpen = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div ref={ref} className={css["dropdown-menu-tab"]}>
+      <span onClick={handleOpen} className={css["dropdown-menu-tab__text"]}>
+        {toggleText}
+      </span>
+      {isOpen && (
+        <div onClick={handleOpen} className={css["dropdown-menu"]}>
+          {React.Children.map(children, (child) => {
+            return React.cloneElement(child, {
+              className: css["dropdown-menu__text"],
+            });
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DropdownMenu;

FrontEnd/src/components/HeaderFooter/header/navbar/DropdownMenu.module.css

@@ -0,0 +1,73 @@
+.dropdown-menu-tab {
+  display: flex;
+  padding: 5px 0px;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.dropdown-menu-tab__text {
+  color: var(--main-grey-90, #25292c);
+  text-align: center;
+  font-feature-settings: "calt" off;
+  text-decoration: none;
+
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+}
+
+.dropdown-menu {
+  display: flex;
+  width: 160px;
+  padding: 4px 0px;
+  flex-direction: column;
+  align-items: flex-start;
+
+  position: absolute;
+  z-index: 1;
+  top: 44px;
+  left: 1321px;
+  border-radius: 2px;
+  background: var(--conditional-pop-over, #fff);
+  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+}
+
+.dropdown-menu button,
+.dropdown-menu button:focus,
+.dropdown-menu button:active {
+  outline: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.dropdown-menu__text,
+.dropdown-menu button {
+  display: flex;
+  padding: 5px 12px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+
+  color: var(--main-grey-90, #25292c);
+  font-feature-settings: "calt" off;
+  text-decoration: none;
+
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+}
+
+.dropdown-menu__text:focus,
+.dropdown-menu button:focus {
+  background: var(--main-grey-10, #eeeff1);
+  cursor: pointer;
+}

FrontEnd/src/components/HeaderFooter/header/navbar/Logout.jsx

@@ -0,0 +1,23 @@
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../../../hooks";
+
+function Logout() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  const onClick = async () => {
+    const response = await axios.post(
+      `${process.env.REACT_APP_BASE_API_URL}/api/auth/token/logout`
+    );
+    auth.logout();
+    navigate("/");
+  };
+  return (
+    <button onClick={onClick} type="submit">
+      Вихід
+    </button>
+  );
+}
+
+export default Logout;

FrontEnd/src/components/HeaderFooter/header/navbar/Profile.jsx

@@ -1,16 +1,23 @@
 import avatar_image from "./Avatar.png";
 import css from "./Profile.module.css";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
+import Logout from "./Logout";
+import DropdownMenu from "./DropdownMenu";
 
-function Profile(props) {
-    return (
-        <div className={css["header-profile-section"]}>
-            <img className={css["header-profile__avatar"]} src={avatar_image} alt=""/>
-            <div className={css["header-profile-tab"]}>
-                <Link to='/profile/user-info' className={css["header-profile-link__text"]}>Профіль</Link>
-            </div>
-        </div>
-    );
-};
+function Profile() {
+  return (
+    <div className={css["header-profile-section"]}>
+      <img
+        className={css["header-profile__avatar"]}
+        src={avatar_image}
+        alt=""
+      />
+      <DropdownMenu toggleText="Профіль">
+        <Link to="/profile/user-info">Профіль</Link>
+        <Logout />
+      </DropdownMenu>
+    </div>
+  );
+}
 
 export default Profile;

FrontEnd/src/components/HeaderFooter/header/navbar/Profile.module.css

@@ -1,36 +1,15 @@
 .header-profile-section {
-    display: flex;
-    align-items: center;
-    gap: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .header-profile__avatar {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 
-    border-radius: 100px;
-    border: 1px solid #E2E5EB;
-    background: #FFF;
-}
-
-.header-profile-tab {
-    display: flex;
-    padding: 5px 0px;
-    align-items: center;
-    gap: 8px;
-}
-
-.header-profile-link__text {
-    color: #3C4044;
-    text-align: center;
-    font-feature-settings: 'calt' off;
-    text-decoration: none;
-
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: -0.14px;
+  border-radius: 100px;
+  border: 1px solid var(--main-black-20, #E2E5EB);
+  background: var(--conditional-pop-over, #FFF)
 }

FrontEnd/src/hooks/useProvideAuth.js

@@ -5,7 +5,6 @@ export default function useProvideAuth() {
   const [isAuth, setIsAuth] = useState(false);
   const [isLoading, setLoading] = useState(true);
   const validateToken = async (authToken) => {
-    console.log("In validation")
     try {
       await axios.get(
         `${process.env.REACT_APP_BASE_API_URL}/api/auth/users/me/`,