Merge branch 'main' into tracker-connect-back

This commit is contained in:
2023-04-27 14:51:19 +03:00
14 changed files with 972 additions and 829 deletions

View File

@ -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} &nbsp;{" "}
{SKILLS[currentCandidateObj.position_id]} &nbsp;{" "}
{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} &nbsp; {SKILLS[currentCandidateObj.position_id]} &nbsp; {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;

View File

@ -29,7 +29,7 @@
}
&__info {
padding-bottom: 40px;
padding: 15px 0 40px 0;
text-align: center;
margin-top: 10px;
width: 100%;

View File

@ -1,143 +1,114 @@
import React from 'react'
import {useSelector} from 'react-redux'
import {Link} from 'react-router-dom'
import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import ErrorBoundary from "../../hoc/ErrorBoundary";
import {LEVELS, SKILLS} from '../../constants/constants'
import {selectProfiles} from '../../redux/outstaffingSlice'
import { LEVELS, SKILLS } from "../../constants/constants";
import { selectProfiles } from "../../redux/outstaffingSlice";
import {urlForLocal} from '../../helper'
import { urlForLocal } from "../../helper";
import male from '../../images/medium_male.png'
import rectangle from '../../images/rectangle_secondPage.png'
import male from "../../images/medium_male.png";
import rectangle from "../../images/rectangle_secondPage.png";
import cursorImg from "../../images/cursorImg.png";
import './description.scss'
const Description = ({onLoadMore, isLoadingMore}) => {
import "./description.scss";
const Description = ({ onLoadMore, isLoadingMore }) => {
const candidatesListArr = useSelector(selectProfiles);
return (
<section className='description'>
<div className='container'>
<div className='description__wrapper'>
<ErrorBoundary>
{candidatesListArr && Array.isArray(candidatesListArr) && candidatesListArr.length > 0
? candidatesListArr.map((el) => (
<div className='row' key={el.id}>
<div className='col-2'>
{el.photo && <img className='description__img' src={urlForLocal(el.photo)} alt=''/>}
</div>
<div className='col-12 col-xl-6'>
<h3 className='description__title'>
<Link to={`/candidate/${el.id}`}>
{' '}
{el.specification} {SKILLS[el.position_id]},{' '}
{LEVELS[el.level]}{' '}
</Link>
</h3>
<section className="description">
<div className="container">
<div className="description__wrapper">
<ErrorBoundary>
{candidatesListArr &&
Array.isArray(candidatesListArr) &&
candidatesListArr.length > 0 ? (
candidatesListArr.map((el) => (
<div className="row" key={el.id}>
<div className="col-2">
{el.photo && (
<img
className="description__img"
src={urlForLocal(el.photo)}
alt=""
/>
)}
</div>
<div className="col-12 col-xl-6">
<h3 className="description__title">
<Link to={`/candidate/${el.id}`}>
{" "}
{el.specification} {SKILLS[el.position_id]},{" "}
{LEVELS[el.level]}{" "}
</Link>
</h3>
{el.vc_text_short ? (
<div className='description__text'>
{el.vc_text_short}
</div>
) : (
<p className='description__text-secondary'>
Описание отсутствует...
</p>
)}
</div>
<div className='col-12 col-xl-4'>
<Link to={`/candidate/${el.id}`}>
<button className='description__button'>
Подробное резюме
</button>
</Link>
</div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
{el.vc_text_short ? (
<div className="description__text">
{el.vc_text_short}
</div>
))
: /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */
candidatesListArr && Array.isArray(candidatesListArr) &&
candidatesListArr.map((el) => (
<div className='row' key={el.id}>
<div className='col-2'>
<img className='description__img' src={male} alt=''/>
</div>
<div className='col-12 col-xl-6'>
<h3 className='description__title'>
{SKILLS[el.position_id]}, {LEVELS[el.level]}
</h3>
{el.vc_text_short ? (
<div className='description__text'>
{el.vc_text_short}
</div>
) : (
<p className='description__text-secondary'>
Описание отсутствует...
</p>
)}
</div>
<div className='col-12 col-xl-4'>
<Link to={`/candidate/${el.id}`}>
<button className='description__button'>
Подробное резюме
</button>
</Link>
</div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div>
))}
</ErrorBoundary>
</div>
<div className='row'>
<div className='col-12'>
<div className='description__footer'>
<div className='description__footer-btn'>
{candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)}
) : (
<p className="description__text-secondary">
Описание отсутствует...
</p>
)}
</div>
<div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}>
<button className="description__button">
Подробное резюме
</button>
</Link>
</div>
<div className="col-xl-2"></div>
<div className="col-12 col-xl-6">
<ul className="description__list">
{Array.isArray(el?.skillValues) &&
el.skillValues?.map((e) => (
<li key={e.id} className="description__list-item">
{e.skill.name}
</li>
))}
</ul>
<img
className="description__rectangle"
src={rectangle}
alt=""
/>
</div>
<div className="col-xl-4"></div>
</div>
))
) : (
<div className="description__empty">
<img src={cursorImg}></img>
<p>
В данный момент<span> нет свободных </span> специалистов в
данной категории
</p>
</div>
)}
</ErrorBoundary>
</div>
<div className="row">
<div className="col-12">
<div className="description__footer">
<div className="description__footer-btn">
{candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)}
</div>
</div>
</div>
</div>
</section>
)
</div>
</section>
);
};
export default Description
export default Description;

View File

@ -3,7 +3,7 @@
margin-bottom: 120px;
&__title {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.6em;
font-weight: 700;
font-style: normal;
@ -18,13 +18,24 @@
}
&__empty {
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-family: "LabGrotesque", sans-serif;
font-style: normal;
letter-spacing: normal;
line-height: normal;
font-weight: 700;
font-size: 16px;
line-height: 32px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
span {
color: #406128;
}
img {
margin-right: 30px;
}
}
&____wrapper {
@ -43,7 +54,7 @@
}
&__text {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.6em;
font-weight: 100;
font-style: normal;
@ -54,7 +65,7 @@
word-wrap: break-word;
&-secondary {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.7em;
font-weight: 100;
font-style: normal;
@ -72,7 +83,7 @@
background-color: #73c141;
border: none;
color: #ffffff;
font-family: 'Muller';
font-family: "Muller";
font-weight: bold;
font-size: 1.6em;
line-height: normal;
@ -95,7 +106,7 @@
flex-wrap: wrap;
&-item {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.7em;
font-weight: 400;
font-style: normal;
@ -126,7 +137,7 @@
background-color: white;
margin-right: 60px;
color: #a0a0a0;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 400;
font-style: normal;

View File

@ -60,6 +60,12 @@ export const SideBar = () => {
<li>
<a href="#">Контакты</a>
</li>
<li>
<a href="#">Блог</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
</ul>
<p className="auth-body__politic">Политика конфиденциальности</p>
<div className="auth-body__contacts">