revision form page

src/components/Candidate/Candidate.js

@@ -18,6 +18,7 @@ import design from '../../images/design.png';
 
 const Candidate = () => {
   const history = useHistory();
+
   const { id: candidateId } = useParams();
 
   const dispatch = useDispatch();
@@ -35,8 +36,6 @@ const Candidate = () => {
 
   const currentCandidateObj = useSelector(selectCurrentCandidate);
 
-  console.log('currentCandidateObj ', currentCandidateObj);
-
   const { position_id, skillValues, vc_text: text } = currentCandidateObj;
 
   let classes;

src/components/Form/Form.js

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import style from './Form.module.css';
 import { fetchForm } from '../../server/server';
+import arrow from '../../images/right-arrow.png';
+import { useHistory } from 'react-router-dom';
+import { selectPath } from '../../redux/outstaffingSlice';
+import { useSelector } from 'react-redux';
 
 const Form = () => {
   const [data, setData] = useState({
@@ -9,6 +13,9 @@ const Form = () => {
     comment: '',
   });
 
+  const history = useHistory();
+  const prevPath = useSelector(selectPath);
+
   const handleChange = (e) => {
     const newData = { ...data };
     newData[e.target.id] = e.target.value;
@@ -30,6 +37,14 @@ const Form = () => {
     <div className="container">
       <div className="row">
         <div className="col-sm-12">
+          <div className={style.form__arrow} onClick={() => history.replace(prevPath)}>
+            <div className={style.form__arrow__img}>
+              <img src={arrow} alt="" />
+            </div>
+            <div className={style.form__arrow__sp}>
+              <span>Вернуться к кандидату</span>
+            </div>
+          </div>
           <form className={style.form} id="test">
             <label htmlFor="email">Емейл:</label>
             <input

src/components/Form/Form.module.css

@@ -82,3 +82,38 @@
   line-height: 71.88px;
   text-align: center;
 }
+
+.form__arrow {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 80px;
+}
+
+@media (max-width: 575.98px) {
+  .form__arrow {
+    margin-bottom: 40px;
+  }
+}
+
+.form__arrow__img > img {
+  cursor: pointer;
+}
+
+.form__arrow__sp > span {
+  margin-left: 40px;
+  margin-right: 120px;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+}
+
+@media (max-width: 575.98px) {
+  .form__arrow__sp > span {
+    margin-right: 0px;
+  }
+}

src/components/Sidebar/Sidebar.js

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

src/redux/outstaffingSlice.js

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