guild_front/src/components/ProfileHeader/ProfileHeader.jsx

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { NavLink, useNavigate } from "react-router-dom";

import { auth, getProfileInfo, setProfileInfo } from "@redux/outstaffingSlice";

import { urlForLocal } from "@utils/helper";

import { apiRequest } from "@api/request";

import { Loader } from "@components/Common/Loader/Loader";

import avatarMok from "assets/images/avatarMok.png";

import "./profileHeader.scss";

export const ProfileHeader = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const profileInfo = useSelector(getProfileInfo);
  const currentPath = window.location.pathname;
  const [user] = useState(
    localStorage.getItem("role_status") === "18" ? "partner" : "developer"
  );

  const [isLoggingOut, setIsLoggingOut] = useState(false);

  const [navInfo] = useState({
    developer: [
      {
        path: "/summary",
        name: "Резюме"
      },
      {
        path: "/calendar",
        name: "Отчеты"
      },
      {
        path: "/tracker",
        name: "Трекер"
      },
      // {
      //   path: "/payouts",
      //   name: "Выплаты"
      // },
      {
        path: "/quiz",
        name: "Тесты"
      },
      {
        path: "/settings",
        name: "Настройки"
      }
    ],
    partner: [
      {
        path: "/catalog",
        name: "Каталог"
      },
      {
        path: "/requests",
        name: "Запросы"
      },
      {
        path: "/employees",
        name: "Персонал"
      },
      {
        path: "/tracker",
        name: "Трекер"
      },
      // {
      //   path: "/treaties",
      //   name: "Договоры"
      // },
      {
        path: "/settings",
        name: "Настройки"
      }
    ]
  });

  useEffect(() => {
    if (!Object.keys(profileInfo).length)
      apiRequest(`/user/me`).then((profileInfo) => {
        dispatch(
          setProfileInfo(
            profileInfo.userCard ? profileInfo.userCard : profileInfo
          )
        );
      });
  }, []);

  const handler = () => {
    setIsLoggingOut(true);
    localStorage.clear();
    dispatch(auth(false));
    setIsLoggingOut(false);
    navigate("/auth");
    dispatch(setProfileInfo({}));
  };

  const [active, setActive] = useState(false);

  const toggleBar = () => {
    if (active) {
      setActive(false);
    } else {
      setActive(true);
    }
  };

  const closeMenu = () => {
    setActive(false);
  };

  return (
    <header className="profile-header">
      <div className="auth-title">
        <div className="text">
          <NavLink to={"/profile"} className="profile-header__title">
            itguild.
            <span>
              {user === "developer" ? "для разработчиков" : "для партнеров"}
            </span>
          </NavLink>

          <button onClick={handler} className="profile-header__logout">
            {isLoggingOut ? <Loader /> : "Выйти"}
          </button>

          <div className="burger" onClick={() => toggleBar()}>
            <div
              className={active ? "burger__line  l1 change" : "burger__line"}
            ></div>
            <div
              className={active ? "burger__line  l2 change" : "burger__line"}
            ></div>
            <div
              className={active ? "burger__line  l3 change" : "burger__line"}
            ></div>
          </div>
        </div>
      </div>

      <div className={active ? "auth-body active" : "auth-body"}>
        {/* <div className="auth-body__title">
          <img src={ITguild}></img>
        </div> */}
        <nav className="auth-body__navigation">
          <div className="profile-header__personal-info">
            <h3 className="profile-header__personal-info-name">
              {profileInfo?.fio || profileInfo?.username}
            </h3>
            <NavLink end to={"/profile"}>
              <img
                src={
                  profileInfo?.photo
                    ? urlForLocal(profileInfo.photo)
                    : avatarMok
                }
                className="profile-header__personal-info-avatar"
                alt="avatar"
              />
            </NavLink>
          </div>

          {navInfo[user].map((link, index) => {
            return (
              <NavLink
                key={index}
                end
                to={link.path === "/quiz" ? link.path : `/profile${link.path}`}
                className={currentPath.includes(link.path) ? "active" : ""}
              >
                {link.name}
              </NavLink>
            );
          })}

          <button onClick={handler} className="profile-header__logout-burger">
            {isLoggingOut ? <Loader /> : "Выйти"}
          </button>
        </nav>
      </div>
      {active && <div className="backdrop" onClick={closeMenu}></div>}
    </header>
  );
};