fixed code

src/components/Candidate/Candidate.js

@@ -1,24 +1,24 @@
 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 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 SectionOne from './sections/SectionOne';
-import SectionTwo from './sections/SectionTwo';
-import SectionThree from './sections/SectionThree';
-import SectionFour from './sections/SectionFour';
-import SectionFive from './sections/SectionFive';
-import SectionSkills from './sections/SectionSkills';
+import SectionSkills from './SectionSkills';
 
-const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
+const Candidate = () => {
   const history = useHistory();
-
   const { id: candidateId } = useParams();
 
-  const currentCandidate = candidatesArr.find((el) => Number(el.id) === Number(candidateId));
+  const dispatch = useDispatch();
 
-  const { name, skillsName, img } = currentCandidate;
+  const candidatesArr = useSelector(selectCandidates);
+  dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
+  const currentCandidateObj = useSelector(selectCurrentCandidate);
+
+  const { name, skillsName, img, skills } = currentCandidateObj;
 
   let classes;
 
@@ -66,24 +66,67 @@ const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
         <div className={style.candidate__main}>
           <div className="row">
             <div className="col-12 col-xl-4">
-              <Sidebar getCandidateForCalendar={getCandidateForCalendar} currentCandidateObj={currentCandidate} />
+              <Sidebar  />
             </div>
-
             <div className="col-12 col-xl-8">
               <div className={style.candidate__main__description}>
                 <h2>{name}</h2>
                 <img src={rectangle} alt="" />
                 <p># Описание опыта</p>
-                <SectionOne />
+                <div className={style.SectionOne}>
+                  <h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
+                  <p>
+                    Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их
+                    услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое
+                    обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все
+                    необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент)
+                    время и место.
+                  </p>
+                  <h4>Senior PHP/JS Developer</h4>
+                </div>
                 <p># Средства и инструменты:</p>
-                <SectionTwo />
+                <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># Описание опыта</p>
-                <SectionThree />
+                <div className={style.SectionThree}>
+                  <h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
+                  <p>
+                    Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.
+                  </p>
+                  <h4>Senior PHP/JS Developer</h4>
+                </div>
                 <p># Средства и инструменты:</p>
-                <SectionFour />
+                <div className={style.SectionFour}>
+                  <p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
+                  <p>Frontend - Vue.js</p>
+                  <p>БД - MYSQL</p>
+                </div>
                 <p># Функционал:</p>
-                <SectionFive />
-                <SectionSkills />
+                <>
+                  <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>