fixed code

This commit is contained in:
Hope87 2021-07-09 14:01:11 +03:00
parent 55d1a63c94
commit f2e769a71a
5 changed files with 59 additions and 59 deletions

View File

@ -1,12 +1,7 @@
import React from 'react'; import React, { useEffect } from 'react';
import { useHistory, useParams } from 'react-router-dom'; import { useHistory, useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { import { currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
currentCandidate,
selectCurrentCandidate,
selectProfiles,
selectFilteredCandidates,
} from '../../redux/outstaffingSlice';
import style from './Candidate.module.css'; import style from './Candidate.module.css';
import arrow from '../../images/right-arrow.png'; import arrow from '../../images/right-arrow.png';
import rectangle from '../../images/rectangle_secondPage.png'; import rectangle from '../../images/rectangle_secondPage.png';
@ -15,51 +10,63 @@ import SectionSkills from './SectionSkills';
import front from '../../images/front_end.png'; import front from '../../images/front_end.png';
import back from '../../images/back_end.png'; import back from '../../images/back_end.png';
import design from '../../images/design.png'; import design from '../../images/design.png';
import { fetchItemsForId } from '../../server/server';
const Candidate = () => { const Candidate = () => {
const history = useHistory(); const history = useHistory();
const { id: candidateId } = useParams(); const { id: candidateId } = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
const candidatesArr = useSelector(selectProfiles); useEffect(() => {
const filteredCandidates = useSelector(selectFilteredCandidates); fetchItemsForId('https://guild.craft-group.xyz/api/profile/', Number(candidateId)).then((el) =>
dispatch(currentCandidate(el))
dispatch( );
currentCandidate( }, [dispatch, candidateId]);
filteredCandidates.length > 0
? filteredCandidates.find((el) => Number(el.id) === Number(candidateId))
: candidatesArr.find((el) => Number(el.id) === Number(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;
let classes; const setStyles = () => {
let header; const styles = {
let img; classes: '',
header: '',
img: '',
};
if (Number(position_id) === 1) { switch (Number(position_id)) {
classes = style.back; case 1: {
header = 'Backend'; styles.classes = style.back;
img = back; styles.header = 'Backend';
} else if (Number(position_id) === 2) { styles.img = back;
classes = style.des;
header = 'Frontend'; break;
img = front; }
} else if (Number(position_id) === 3) { case 2: {
classes = style.front; styles.classes = style.des;
header = 'Design'; styles.header = 'Frontend';
img = design; styles.img = front;
} break;
}
case 3: {
style.classes = style.front;
style.header = 'Design';
style.img = design;
break;
}
default:
break;
}
return styles;
};
function createMarkup(text) { function createMarkup(text) {
return { __html: text.split('</p>').join('</p>') }; return { __html: text.split('</p>').join('</p>') };
} }
const { header, img, classes } = setStyles();
return ( return (
<section className={style.candidate}> <section className={style.candidate}>
<div className="container"> <div className="container">

View File

@ -5,9 +5,7 @@ const SectionSkills = ({ skillsArr }) => {
return ( return (
<div className={style.SectionSkills}> <div className={style.SectionSkills}>
<h3>Навыки:</h3> <h3>Навыки:</h3>
{skillsArr.map((skills) => ( {skillsArr && skillsArr.map((skills) => <p key={skills.id}>{skills.skill.name}</p>)}
<p key={skills.id}>{skills.skill.name}</p>
))}
</div> </div>
); );
}; };

View File

@ -3,8 +3,6 @@ import style from './Form.module.css';
import { fetchForm } from '../../server/server'; import { fetchForm } from '../../server/server';
import arrow from '../../images/right-arrow.png'; import arrow from '../../images/right-arrow.png';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { selectPath } from '../../redux/outstaffingSlice';
import { useSelector } from 'react-redux';
const Form = () => { const Form = () => {
const [data, setData] = useState({ const [data, setData] = useState({
@ -14,16 +12,19 @@ const Form = () => {
}); });
const history = useHistory(); const history = useHistory();
const prevPath = useSelector(selectPath);
const handleChange = (e) => { const handleChange = (e) => {
const newData = { ...data }; const { id, value } = e.target;
newData[e.target.id] = e.target.value;
setData(newData); setData((prev) => ({
...prev,
[id]: value,
}));
}; };
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault(); e.preventDefault();
console.log('submitData', data);
const formData = new FormData(); const formData = new FormData();
formData.append('email', data.email); formData.append('email', data.email);
@ -33,11 +34,17 @@ const Form = () => {
fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', formData); fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', formData);
}; };
const goBack = () => {
history.goBack();
};
console.log('data', data);
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-sm-12"> <div className="col-sm-12">
<div className={style.form__arrow} onClick={() => history.replace(prevPath)}> <div className={style.form__arrow} onClick={() => goBack()}>
<div className={style.form__arrow__img}> <div className={style.form__arrow__img}>
<img src={arrow} alt="" /> <img src={arrow} alt="" />
</div> </div>

View File

@ -2,21 +2,15 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import dogBig from '../../images/dog.jpg'; import dogBig from '../../images/dog.jpg';
import style from './Sidebar.module.css'; import style from './Sidebar.module.css';
import { useHistory } from 'react-router-dom';
import { path } from '../../redux/outstaffingSlice';
import { useDispatch } from 'react-redux';
const Sidebar = () => { const Sidebar = () => {
const history = useHistory();
const dispatch = useDispatch();
return ( return (
<div className={style.candidateSidebar}> <div className={style.candidateSidebar}>
<div className={style.candidateSidebar__info}> <div className={style.candidateSidebar__info}>
<img src={dogBig} alt="" /> <img src={dogBig} alt="" />
<p className={style.candidateSidebar__info__e}>Опыт работы</p> <p className={style.candidateSidebar__info__e}>Опыт работы</p>
<p className={style.candidateSidebar__info__y}>4+ лет</p> <p className={style.candidateSidebar__info__y}>4+ лет</p>
<Link to={`/form`} onClick={() => dispatch(path(history.location.pathname))}> <Link to={`/form`}>
<button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button> <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
</Link> </Link>
</div> </div>

View File

@ -7,7 +7,6 @@ const initialState = {
selectedItems: [], selectedItems: [],
currentCandidate: {}, currentCandidate: {},
auth: true, auth: true,
path: '',
}; };
export const outstaffingSlice = createSlice({ export const outstaffingSlice = createSlice({
@ -32,14 +31,10 @@ export const outstaffingSlice = createSlice({
auth: (state, action) => { auth: (state, action) => {
state.auth = action.payload; state.auth = action.payload;
}, },
path: (state, action) => {
state.path = action.payload;
},
}, },
}); });
export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, path } = export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates } = outstaffingSlice.actions;
outstaffingSlice.actions;
export const selectProfiles = (state) => state.outstaffing.profiles; export const selectProfiles = (state) => state.outstaffing.profiles;
export const selectTags = (state) => state.outstaffing.tags; export const selectTags = (state) => state.outstaffing.tags;
@ -47,6 +42,5 @@ export const selectFilteredCandidates = (state) => state.outstaffing.filteredCan
export const selectItems = (state) => state.outstaffing.selectedItems; export const selectItems = (state) => state.outstaffing.selectedItems;
export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate; export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate;
export const selectAuth = (state) => state.outstaffing.auth; export const selectAuth = (state) => state.outstaffing.auth;
export const selectPath = (state) => state.outstaffing.path;
export default outstaffingSlice.reducer; export default outstaffingSlice.reducer;