guild_front/src/pages/PartnerСategories/PartnerСategories.jsx

import React, { useEffect, useState } from "react";
// import { useDispatch } from "react-redux";
// import { Link } from "react-router-dom";
import { Navigate } from "react-router-dom";

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

// import { setPartnerEmployees } from "@redux/outstaffingSlice";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation";
import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";

// import rightArrow from "assets/icons/arrows/arrowRight.svg";
// import avatarImg from "assets/images/avatarMok.png";
// import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
// import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
// import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
// import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
// import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
// import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
// import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
// import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
// import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import "./partnerСategories.scss";

export const PartnerCategories = () => {
  // const dispatch = useDispatch();
  if (localStorage.getItem("role_status") !== "18") {
    return <Navigate to="/profile" replace />;
  }

  const [staff, setStaff] = useState([]);
  const [loader, setLoader] = useState(false);

  useEffect(() => {
    setLoader(true);
    apiRequest("/project/my-employee").then((el) => {
      setLoader(false);
      setStaff(el?.managerEmployees);
    });
  }, []);

  // const [personalInfoItems] = useState([
  //   {
  //     title: "Backend разработчики",
  //     link: "/profile/categories/employees",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: true,
  //     img: BackEndImg
  //   },
  //   {
  //     title: "Frontend разработчики",
  //     link: "/profile/categories/employees",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: true,
  //     img: FrontendImg
  //   },
  //   {
  //     title: "Архитектура проектов",
  //     link: "/profile/categories/employees",
  //     description: "Потоки данных ER ERP CRM CQRS UML BPMN",
  //     available: true,
  //     img: ArchitectureImg
  //   },
  //   {
  //     title: "Дизайн проектов",
  //     link: "/profile/categories/employees",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: true,
  //     img: DesignImg
  //   },
  //   {
  //     title: "Тестирование проектов",
  //     link: "/profile/add-request",
  //     description: "SQL Postman TestRail Kibana Ручное тестирование",
  //     available: false,
  //     img: TestImg
  //   },
  //   {
  //     title: "Администрирование проектов",
  //     link: "/profile/add-request",
  //     description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
  //     available: false,
  //     img: AdminImg
  //   },
  //   {
  //     title: "Управление проектом",
  //     link: "/profile/add-request",
  //     description: "Scrum Kanban Agile Miro CustDev",
  //     available: false,
  //     img: ManageImg
  //   },
  //   {
  //     title: "Копирайтинг проектов",
  //     link: "/profile/add-request",
  //     description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
  //     available: false,
  //     img: CopyImg
  //   },
  //   {
  //     title: "Реклама и SMM",
  //     link: "/profile/add-request",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: false,
  //     img: SmmImg
  //   }
  // ]);

  // const [mokPersons] = useState([
  //   {
  //     personAvatar: avatarImg,
  //     name: "Макаренко Дмитрий",
  //     qualification: "PHP Backend - разработчик",
  //     level: "Middle",
  //     project: "Админка НВД Консалтинг",
  //     tasks_in_progress: 5,
  //     month_hours: 140,
  //     id: 1
  //   },
  //   {
  //     personAvatar: avatarImg,
  //     name: "Макаренко Дмитрий",
  //     qualification: "PHP Backend - разработчик",
  //     level: "Middle",
  //     project: "Админка НВД Консалтинг",
  //     tasks_in_progress: 5,
  //     month_hours: 140,
  //     id: 2
  //   },
  //   {
  //     personAvatar: avatarImg,
  //     name: "Макаренко Дмитрий",
  //     qualification: "PHP Backend - разработчик",
  //     level: "Middle",
  //     project: "Админка НВД Консалтинг",
  //     tasks_in_progress: 5,
  //     month_hours: 140,
  //     id: 3
  //   }
  // ]);
  return (
    <div className="partnerCategories">
      <ProfileHeader />
      <Navigation />
      <div className="container">
        <ProfileBreadcrumbs
          links={[
            { name: "Главная", link: "/profile" },
            { name: "Данные моего персонала", link: "/profile/employees" }
          ]}
        />
        <h2 className="partnerCategories__title">Данные персонала</h2>
        {loader ? (
          <Loader style={"green"} height={80} width={80} />
        ) : (
          <div className="partnerCategories__items">
            {Boolean(staff) ? staff.map((card) => {
              return (
                <PartnerPersonCard
                  key={card.id}
                  name={card.employee.fio}
                  img={card.employee.avatar}
                  userId={card.user_id}
                />
              );
            }) : <span className="partnerCategories__empty">У вас нет нанятого персонала</span>}
            {/*{personalInfoItems.map((item, index) => {*/}
            {/*  return (*/}
            {/*    <Link*/}
            {/*      to={item.link}*/}
            {/*      key={index}*/}
            {/*      className={*/}
            {/*        item.available*/}
            {/*          ? "partnerCategories__item item"*/}
            {/*          : "partnerCategories__item item item__disable"*/}
            {/*      }*/}
            {/*      onClick={() => {*/}
            {/*        dispatch(setPartnerEmployees(mokPersons));*/}
            {/*      }}*/}
            {/*    >*/}
            {/*      <div className="item__title">*/}
            {/*        <img src={item.img} alt={item.title} />*/}
            {/*        <h4>{item.title}</h4>*/}
            {/*      </div>*/}
            {/*      <div className="item__info">*/}
            {/*        <p>{item.description}</p>*/}
            {/*        <div className="more">*/}
            {/*          <img src={rightArrow} alt="arrow" />*/}
            {/*        </div>*/}
            {/*      </div>*/}
            {/*      {!item.available && (*/}
            {/*        <div className="item__disableHover">*/}
            {/*          <p>У вас нет персонала из категории</p>*/}
            {/*          <button>Подобрать</button>*/}
            {/*        </div>*/}
            {/*      )}*/}
            {/*    </Link>*/}
            {/*  );*/}
            {/*})}*/}
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
};