fixed code

src/components/Candidate/Candidate.js

@@ -1,146 +1,15 @@
 import React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
-import { selectCandidates, currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
+import { currentCandidate, selectCurrentCandidate, selectProfiles } from '../../redux/outstaffingSlice';
 import style from './Candidate.module.css';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import Sidebar from '../Sidebar/Sidebar';
 import SectionSkills from './SectionSkills';
-
-// const Candidate = () => {
-//   const history = useHistory();
-//   const { id: candidateId } = useParams();
-
-//   const dispatch = useDispatch();
-
-//   const candidatesArr = useSelector(selectCandidates);
-//   dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
-//   const currentCandidateObj = useSelector(selectCurrentCandidate);
-
-//   console.log('currentCandidateObj ', currentCandidateObj);
-
-//   const { name, skillsName, img, skills, text } = currentCandidateObj;
-
-//   let classes;
-
-//   if (skillsName === 'Backend') {
-//     classes = style.back;
-//     console.log(classes);
-//   } else if (skillsName === 'Design') {
-//     classes = style.des;
-//   } else if (skillsName === 'Frontend') {
-//     classes = style.front;
-//   }
-
-//   return (
-//     <section className={style.candidate}>
-//       <div className="container">
-//         <div className="row">
-//           <div className="col-12">
-//             <div className={style.candidate__title}>
-//               <h2>
-//                 <span>Аутстаффинг</span> it-персонала
-//               </h2>
-//             </div>
-//           </div>
-//         </div>
-
-//         <div className="row">
-//           <div className="col-12">
-//             <div className={style.candidate__header}>
-//               <div className={style.arrow} onClick={() => history.push('/')}>
-//                 <div className={style.arrow__img}>
-//                   <img src={arrow} alt="" />
-//                 </div>
-//                 <div className={style.arrow__sp}>
-//                   <span>Вернуться к списку</span>
-//                 </div>
-//               </div>
-
-//               <div className={style.icon}>
-//                 <h3>{skillsName}</h3>
-//                 <img className={classes} src={img} alt="" />
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//         <div className={style.candidate__main}>
-//           <div className="row">
-//             <div className="col-12 col-xl-4">
-//               <Sidebar />
-//             </div>
-//             <div className="col-12 col-xl-8">
-//               <div className={style.candidate__main__description}>
-//                 <h2>{name}</h2>
-//                 <img src={rectangle} alt="" />
-//                 <p className={style.hashtag}># Описание опыта</p>
-//                 <div className={style.SectionOne}>
-//                   <h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
-//                   <p>
-//                     Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их
-//                     услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое
-//                     обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все
-//                     необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент)
-//                     время и место.
-//                   </p>
-//                   <h4>Senior PHP/JS Developer</h4>
-//                 </div>
-//                 <p className={style.hashtag}># Средства и инструменты:</p>
-//                 <div className={style.SectionTwo}>
-//                   <p>
-//                     - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js,
-//                     MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP.
-//                     Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node.
-//                   </p>
-//                   <p>
-//                     - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и
-//                     JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания
-//                     всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs.
-//                   </p>
-//                 </div>
-//                 <p className={style.hashtag}># Описание опыта</p>
-//                 <div className={style.SectionThree}>
-//                   <h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
-//                   <p>
-//                     Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.
-//                   </p>
-//                   <h4>Senior PHP/JS Developer</h4>
-//                 </div>
-//                 <div className={style.SectionFour}>
-//                   <p className={style.hashtag}># Средства и инструменты:</p>
-//                   <p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
-//                   <p>Frontend - Vue.js</p>
-//                   <p>БД - MYSQL</p>
-//                 </div>
-//                 <p className={style.hashtag}># Функционал:</p>
-//                 <>
-//                   <div className={style.SectionFive}>
-//                     <p>Регистрации/авторизации;</p>
-//                     <p>Управления правами менеджеров отеля, назначение поставщиков</p>
-//                     <p>Управления описанием и профилем отелей;</p>
-//                     <p>Управления финансами, ценообразованием, квотами;</p>
-//                     <p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
-//                     <p>Управления новостями отеля;</p>
-//                     <p>Просмотра расширенной статистики по заявкам и людям;</p>
-//                   </div>
-//                   <button type="submit" className={style.SectionFive__btn}>
-//                     Выбрать к собеседованию
-//                   </button>
-//                 </>
-//                 <SectionSkills skillsArr={skills} />
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     </section>
-//   );
-// };
-
-// export default Candidate;
-
-//////////////////////////////////////////////////
+import front from '../../images/front_end.png';
+import back from '../../images/back_end.png';
+import design from '../../images/design.png';
 
 const Candidate = () => {
   const history = useHistory();
@@ -148,23 +17,32 @@ const Candidate = () => {
 
   const dispatch = useDispatch();
 
-  const candidatesArr = useSelector(selectCandidates);
+  const candidatesArr = useSelector(selectProfiles);
+
   dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
+
   const currentCandidateObj = useSelector(selectCurrentCandidate);
 
   console.log('currentCandidateObj ', currentCandidateObj);
 
-  const { name, skillsName, img, skills, text } = currentCandidateObj;
+  const { fio: name, position_id, skillValues, vc_text: text } = currentCandidateObj;
 
   let classes;
+  let header;
+  let img;
 
-  if (skillsName === 'Backend') {
+  if (Number(position_id) === 1) {
     classes = style.back;
-    console.log(classes);
-  } else if (skillsName === 'Design') {
+    header = 'Backend';
+    img = back;
+  } else if (Number(position_id) === 2) {
     classes = style.des;
-  } else if (skillsName === 'Frontend') {
+    header = 'Frontend';
+    img = front;
+  } else if (Number(position_id) === 3) {
     classes = style.front;
+    header = 'Design';
+    img = design;
   }
 
   function createMarkup(text) {
@@ -197,7 +75,7 @@ const Candidate = () => {
               </div>
 
               <div className={style.icon}>
-                <h3>{skillsName}</h3>
+                <h3>{header}</h3>
                 <img className={classes} src={img} alt="" />
               </div>
             </div>
@@ -221,7 +99,7 @@ const Candidate = () => {
                 <button type="submit" className={style.SectionFive__btn}>
                   Выбрать к собеседованию
                 </button>
-                <SectionSkills skillsArr={skills} />
+                <SectionSkills skillsArr={skillValues} />
               </div>
             </div>
           </div>