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 { 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([]);

  useEffect(() => {
    apiRequest("/project/my-employee").then((el) => {
      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/categories" }
          ]}
        />
        <h2 className="partnerCategories__title">Данные персонала</h2>
        <div className="partnerCategories__items">
          {staff.map((card) => {
            return (
              <PartnerPersonCard
                key={card.id}
                name={card.employee.fio}
                img={card.employee.avatar}
                userId={card.user_id}
              />
            );
          })}
          {/*{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>
  );
};