Пофиксил верстку сайдбара кандидатов
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { useHistory, useParams, Link } from 'react-router-dom'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import React, {useEffect} from 'react'
|
||||
import {useHistory, useParams, Link} from 'react-router-dom'
|
||||
import {useSelector, useDispatch} from 'react-redux'
|
||||
import {
|
||||
currentCandidate,
|
||||
selectCurrentCandidate,
|
||||
@@ -13,24 +13,23 @@ import SkillSection from '../SkillSection/SkillSection'
|
||||
import front from '../../images/front_end.png'
|
||||
import back from '../../images/back_end.png'
|
||||
import design from '../../images/design.png'
|
||||
import { fetchGet } from '../../server/server'
|
||||
import { Footer } from '../Footer/Footer'
|
||||
import {fetchGet} from '../../server/server'
|
||||
import {Footer} from '../Footer/Footer'
|
||||
|
||||
import './candidate.scss'
|
||||
import { getRole } from '../../redux/roleSlice'
|
||||
import { CodeSnippetlighter } from '../../pages/CodeSnippetPage'
|
||||
import { useState } from 'react'
|
||||
import {getRole} from '../../redux/roleSlice'
|
||||
import {useState} from 'react'
|
||||
|
||||
const Candidate = () => {
|
||||
const history = useHistory()
|
||||
const { id: candidateId } = useParams()
|
||||
const dispatch = useDispatch()
|
||||
const role = useSelector(getRole)
|
||||
const [activeSnippet, setActiveSnippet] = useState(true)
|
||||
const history = useHistory();
|
||||
const {id: candidateId} = useParams();
|
||||
const dispatch = useDispatch();
|
||||
const role = useSelector(getRole);
|
||||
const [activeSnippet, setActiveSnippet] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0)
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchGet({
|
||||
@@ -40,37 +39,37 @@ const Candidate = () => {
|
||||
role,
|
||||
logout: () => dispatch(auth(false))
|
||||
}).then((el) => dispatch(currentCandidate(el)))
|
||||
}, [dispatch, candidateId])
|
||||
}, [dispatch, candidateId]);
|
||||
|
||||
const currentCandidateObj = useSelector(selectCurrentCandidate)
|
||||
const currentCandidateObj = useSelector(selectCurrentCandidate);
|
||||
|
||||
const { position_id, skillValues, vc_text: text } = currentCandidateObj
|
||||
const {position_id, skillValues, vc_text: text} = currentCandidateObj;
|
||||
|
||||
const setStyles = () => {
|
||||
const styles = {
|
||||
classes: '',
|
||||
header: '',
|
||||
img: ''
|
||||
}
|
||||
};
|
||||
|
||||
switch (Number(position_id)) {
|
||||
case 1: {
|
||||
styles.classes = 'back'
|
||||
styles.header = 'Backend'
|
||||
styles.img = back
|
||||
styles.classes = 'back';
|
||||
styles.header = 'Backend';
|
||||
styles.img = back;
|
||||
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
styles.classes = 'des'
|
||||
styles.header = 'Frontend'
|
||||
styles.img = front
|
||||
styles.classes = 'des';
|
||||
styles.header = 'Frontend';
|
||||
styles.img = front;
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
styles.classes = 'front'
|
||||
styles.header = 'Design'
|
||||
styles.img = design
|
||||
styles.classes = 'front';
|
||||
styles.header = 'Design';
|
||||
styles.img = design;
|
||||
break
|
||||
}
|
||||
default:
|
||||
@@ -78,32 +77,32 @@ const Candidate = () => {
|
||||
}
|
||||
|
||||
return styles
|
||||
}
|
||||
};
|
||||
|
||||
function createMarkup(text) {
|
||||
return { __html: text.split('</p>').join('</p>') }
|
||||
return {__html: text.split('</p>').join('</p>')}
|
||||
}
|
||||
|
||||
const { header, img, classes } = setStyles()
|
||||
|
||||
const {header, img, classes} = setStyles();
|
||||
|
||||
return (
|
||||
<div className='candidate'>
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='candidate__title'>
|
||||
<h2>
|
||||
<span>Аутстаффинг</span> it-персонала
|
||||
</h2>
|
||||
<div className='candidate'>
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='candidate__title'>
|
||||
<h2>
|
||||
<span>Аутстаффинг</span> it-персонала
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='candidate__header'>
|
||||
<div className='row'>
|
||||
<div className='col-12 candidate__header'>
|
||||
|
||||
<div className='candidate__arrow' onClick={() => history.push('/')}>
|
||||
<div className='candidate__arrow-img'>
|
||||
<img src={arrow} alt='' />
|
||||
<img src={arrow} alt=''/>
|
||||
</div>
|
||||
<div className='candidate__arrow-sp'>
|
||||
<span>Вернуться к списку</span>
|
||||
@@ -112,84 +111,91 @@ const Candidate = () => {
|
||||
|
||||
<div className='candidate__icon'>
|
||||
<h3>{header}</h3>
|
||||
<img className={classes} src={img} alt='' />
|
||||
<img className={classes} src={img} alt=''/>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
)}
|
||||
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
|
||||
<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>
|
||||
)}
|
||||
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
|
||||
<button type="submit" className='candidate__btn'>
|
||||
Выбрать к собеседованию
|
||||
</button>
|
||||
</Link> */}
|
||||
<SkillSection skillsArr={skillValues} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
) :
|
||||
(
|
||||
// <div className="col-12 col-xl-8">
|
||||
// <CodeSnippetlighter />
|
||||
// </div>
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className="candidate__works works">
|
||||
<div className="works__body">
|
||||
<div className="works__item item-works">
|
||||
<div className="item-works__body">
|
||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
|
||||
<div className="item-works__mark">Angular</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<div className="item-works__body">
|
||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
|
||||
<div className="item-works__mark">Angular</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<div className="item-works__body">
|
||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
|
||||
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SkillSection skillsArr={skillValues}/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
) :
|
||||
(
|
||||
// <div className="col-12 col-xl-8">
|
||||
// <CodeSnippetlighter />
|
||||
// </div>
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className="candidate__works works">
|
||||
<div className="works__body">
|
||||
<div className="works__item item-works">
|
||||
<div className="item-works__body">
|
||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
|
||||
documentation
|
||||
</div>
|
||||
<div className="item-works__mark">Angular</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<div className="item-works__body">
|
||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
|
||||
documentation
|
||||
</div>
|
||||
<div className="item-works__mark">Angular</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="works__item item-works">
|
||||
<div className="item-works__body">
|
||||
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
|
||||
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
|
||||
documentation
|
||||
</div>
|
||||
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
export default Candidate
|
||||
|
||||
Reference in New Issue
Block a user