Fixed catalog pages and added modal
This commit is contained in:
MaxOvs19
@ -1,35 +1,38 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import {useParams, Link, useNavigate, Navigate} from 'react-router-dom'
|
||||
import {useSelector, useDispatch} from 'react-redux'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Link, useNavigate, Navigate } from "react-router-dom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import SkillSection from '../SkillSection/SkillSection'
|
||||
import Sidebar from '../CandidateSidebar/CandidateSidebar'
|
||||
import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
|
||||
import {ProfileBreadcrumbs} from "../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import {Footer} from '../Footer/Footer'
|
||||
import SkillSection from "../SkillSection/SkillSection";
|
||||
import Sidebar from "../CandidateSidebar/CandidateSidebar";
|
||||
import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "../Footer/Footer";
|
||||
|
||||
import {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffingSlice'
|
||||
import {
|
||||
currentCandidate,
|
||||
selectCurrentCandidate,
|
||||
} from "../../redux/outstaffingSlice";
|
||||
|
||||
import {apiRequest} from "../../api/request";
|
||||
import {createMarkup} from "../../helper";
|
||||
import { apiRequest } from "../../api/request";
|
||||
import { createMarkup } from "../../helper";
|
||||
|
||||
import gitImgItem from "../../images/gitItemImg.png"
|
||||
import rectangle from '../../images/rectangle_secondPage.png'
|
||||
import front from '../Outstaffing/images/front_end.png'
|
||||
import back from '../Outstaffing/images/back_end.png'
|
||||
import design from '../Outstaffing/images/design.png'
|
||||
import rightArrow from "../../images/arrowRight.png"
|
||||
import gitImgItem from "../../images/gitItemImg.png";
|
||||
import rectangle from "../../images/rectangle_secondPage.png";
|
||||
import front from "../Outstaffing/images/front_end.png";
|
||||
import back from "../Outstaffing/images/back_end.png";
|
||||
import design from "../Outstaffing/images/design.png";
|
||||
import rightArrow from "../../images/arrowRight.png";
|
||||
|
||||
import {LEVELS, SKILLS} from '../../constants/constants'
|
||||
|
||||
import './candidate.scss'
|
||||
import { LEVELS, SKILLS } from "../../constants/constants";
|
||||
|
||||
import "./candidate.scss";
|
||||
import { Navigation } from "../Navigation/Navigation";
|
||||
|
||||
const Candidate = () => {
|
||||
if(localStorage.getItem('role_status') !== '18') {
|
||||
return <Navigate to="/profile" replace/>
|
||||
if (localStorage.getItem("role_status") !== "18") {
|
||||
return <Navigate to="/profile" replace />;
|
||||
}
|
||||
const {id: candidateId} = useParams();
|
||||
const { id: candidateId } = useParams();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -39,190 +42,201 @@ const Candidate = () => {
|
||||
|
||||
const [activeSnippet, setActiveSnippet] = useState(true);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0)
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/profile/${candidateId}`, {
|
||||
params: Number(candidateId),
|
||||
}).then((el) => dispatch(currentCandidate(el)))
|
||||
}).then((el) => dispatch(currentCandidate(el)));
|
||||
}, [dispatch, candidateId]);
|
||||
|
||||
const {position_id, skillValues, vc_text: text} = currentCandidateObj;
|
||||
const { position_id, skillValues, vc_text: text } = currentCandidateObj;
|
||||
|
||||
const setStyles = () => {
|
||||
const styles = {
|
||||
classes: '',
|
||||
header: '',
|
||||
img: ''
|
||||
classes: "",
|
||||
header: "",
|
||||
img: "",
|
||||
};
|
||||
|
||||
switch (Number(position_id)) {
|
||||
case 1: {
|
||||
styles.classes = 'back';
|
||||
styles.header = 'Backend';
|
||||
styles.classes = "back";
|
||||
styles.header = "Backend";
|
||||
styles.img = back;
|
||||
|
||||
break
|
||||
break;
|
||||
}
|
||||
case 2: {
|
||||
styles.classes = 'des';
|
||||
styles.header = 'Frontend';
|
||||
styles.classes = "des";
|
||||
styles.header = "Frontend";
|
||||
styles.img = front;
|
||||
break
|
||||
break;
|
||||
}
|
||||
case 3: {
|
||||
styles.classes = 'front';
|
||||
styles.header = 'Design';
|
||||
styles.classes = "front";
|
||||
styles.header = "Design";
|
||||
styles.img = design;
|
||||
break
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break
|
||||
break;
|
||||
}
|
||||
|
||||
return styles
|
||||
return styles;
|
||||
};
|
||||
|
||||
const {header, img, classes} = setStyles();
|
||||
const { header, img, classes } = setStyles();
|
||||
|
||||
return (
|
||||
<div className='candidate__wrapper'>
|
||||
<ProfileHeader/>
|
||||
<div className='container candidate'>
|
||||
<ProfileBreadcrumbs links={[
|
||||
{name: 'Главная', link: '/profile'},
|
||||
{name: 'Каталог свободных специалистов', link: '/profile/catalog'},
|
||||
{name: `${currentCandidateObj.specification} ${SKILLS[currentCandidateObj.position_id]}, ${LEVELS[currentCandidateObj.level]}`, link: `/candidate/${currentCandidateObj.id}`}
|
||||
<div className="candidate__wrapper">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<div className="container candidate">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile" },
|
||||
{
|
||||
name: "Каталог свободных специалистов",
|
||||
link: "/profile/catalog",
|
||||
},
|
||||
{
|
||||
name: `${currentCandidateObj.specification} ${
|
||||
SKILLS[currentCandidateObj.position_id]
|
||||
}, ${LEVELS[currentCandidateObj.level]}`,
|
||||
link: `/candidate/${currentCandidateObj.id}`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
/>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-12 candidate__header'>
|
||||
<div className="row">
|
||||
<div className="col-12 candidate__header">
|
||||
<div className="candidate__header__left">
|
||||
<h3>
|
||||
{currentCandidateObj.specification} {" "}
|
||||
{SKILLS[currentCandidateObj.position_id]} {" "}
|
||||
{LEVELS[currentCandidateObj.level]}
|
||||
</h3>
|
||||
<div
|
||||
className="candidate__arrow"
|
||||
onClick={() => navigate("/profile/catalog")}
|
||||
>
|
||||
<div className="candidate__arrow-img">
|
||||
<img src={rightArrow} alt="" />
|
||||
</div>
|
||||
<div className="candidate__arrow-sp">
|
||||
<span>Вернуться к списку</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='candidate__header__left'>
|
||||
<h3>{currentCandidateObj.specification} {SKILLS[currentCandidateObj.position_id]} {LEVELS[currentCandidateObj.level]}</h3>
|
||||
<div className='candidate__arrow' onClick={() => navigate('/profile/catalog')}>
|
||||
<div className='candidate__arrow-img'>
|
||||
<img src={rightArrow} alt=''/>
|
||||
</div>
|
||||
<div className='candidate__arrow-sp'>
|
||||
<span>Вернуться к списку</span>
|
||||
<div className="candidate__icon">
|
||||
<h3>{header}</h3>
|
||||
<img className={classes} src={img} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="candidate__main">
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-4">
|
||||
<Sidebar
|
||||
candidate={currentCandidateObj}
|
||||
position
|
||||
activeSnippet={activeSnippet}
|
||||
setActiveSnippet={setActiveSnippet}
|
||||
/>
|
||||
</div>
|
||||
{activeSnippet ? (
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className="candidate__main-description">
|
||||
<img src={rectangle} alt="" />
|
||||
<p className="candidate__hashtag"># Описание опыта</p>
|
||||
{text ? (
|
||||
<div
|
||||
className="candidate__text"
|
||||
dangerouslySetInnerHTML={createMarkup(text)}
|
||||
></div>
|
||||
) : (
|
||||
<p className="candidate__text-secondary">
|
||||
{currentCandidateObj.vc_text
|
||||
? currentCandidateObj.vc_text
|
||||
: "Описание отсутствует..."}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<SkillSection skillsArr={skillValues} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className="candidate__works works">
|
||||
<div className="works__body">
|
||||
<div className="works__body__info">
|
||||
<p>Страница портфолио кода разработчика</p>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<Link to="/" className="item-works__body">
|
||||
<div className="item-works__body__head">
|
||||
<div className="item-works__body__info">
|
||||
<img src={gitImgItem} alt="img" />
|
||||
<div className="item-works__body__project">
|
||||
<h5>cybershop-api</h5>
|
||||
<p>Реактивная социальная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-works__body__head__arrow">
|
||||
<img src={rightArrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<span>JavaScript </span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<Link to="/" className="item-works__body">
|
||||
<div className="item-works__body__head">
|
||||
<div className="item-works__body__info">
|
||||
<img src={gitImgItem} alt="img" />
|
||||
<div className="item-works__body__project">
|
||||
<h5>cybershop-api</h5>
|
||||
<p>Реактивная социальная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-works__body__head__arrow">
|
||||
<img src={rightArrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<span>JavaScript </span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<Link to="/" className="item-works__body">
|
||||
<div className="item-works__body__head">
|
||||
<div className="item-works__body__info">
|
||||
<img src={gitImgItem} alt="img" />
|
||||
<div className="item-works__body__project">
|
||||
<h5>cybershop-api</h5>
|
||||
<p>Реактивная социальная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-works__body__head__arrow">
|
||||
<img src={rightArrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<span>JavaScript </span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='candidate__icon'>
|
||||
<h3>{header}</h3>
|
||||
<img className={classes} src={img} alt=''/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='candidate__main'>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
|
||||
setActiveSnippet={setActiveSnippet}/>
|
||||
</div>
|
||||
{
|
||||
activeSnippet ?
|
||||
(
|
||||
<div className='col-12 col-xl-8'>
|
||||
<div className='candidate__main-description'>
|
||||
<img src={rectangle} alt=''/>
|
||||
<p className='candidate__hashtag'># Описание опыта</p>
|
||||
{text ? (
|
||||
<div
|
||||
className='candidate__text'
|
||||
dangerouslySetInnerHTML={createMarkup(text)}
|
||||
></div>
|
||||
) : (
|
||||
<p className='candidate__text-secondary'>
|
||||
{currentCandidateObj.vc_text
|
||||
? currentCandidateObj.vc_text
|
||||
: 'Описание отсутствует...'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<SkillSection skillsArr={skillValues}/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
) :
|
||||
(
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className="candidate__works works">
|
||||
<div className="works__body">
|
||||
<div className="works__body__info">
|
||||
<p>Страница портфолио кода разработчика</p>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<Link to='/' className="item-works__body">
|
||||
<div className='item-works__body__head'>
|
||||
<div className='item-works__body__info'>
|
||||
<img src={gitImgItem} alt='img' />
|
||||
<div className='item-works__body__project'>
|
||||
<h5>cybershop-api</h5>
|
||||
<p>Реактивная социальная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='item-works__body__head__arrow'>
|
||||
<img src={rightArrow} alt='arrow' />
|
||||
</div>
|
||||
</div>
|
||||
<span>JavaScript </span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<Link to='/' className="item-works__body">
|
||||
<div className='item-works__body__head'>
|
||||
<div className='item-works__body__info'>
|
||||
<img src={gitImgItem} alt='img' />
|
||||
<div className='item-works__body__project'>
|
||||
<h5>cybershop-api</h5>
|
||||
<p>Реактивная социальная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='item-works__body__head__arrow'>
|
||||
<img src={rightArrow} alt='arrow' />
|
||||
</div>
|
||||
</div>
|
||||
<span>JavaScript </span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<Link to='/' className="item-works__body">
|
||||
<div className='item-works__body__head'>
|
||||
<div className='item-works__body__info'>
|
||||
<img src={gitImgItem} alt='img' />
|
||||
<div className='item-works__body__project'>
|
||||
<h5>cybershop-api</h5>
|
||||
<p>Реактивная социальная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='item-works__body__head__arrow'>
|
||||
<img src={rightArrow} alt='arrow' />
|
||||
</div>
|
||||
</div>
|
||||
<span>JavaScript </span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Candidate
|
||||
export default Candidate;
|
||||
|
||||
Reference in New Issue
Block a user