fixed code

src/components/Candidate/Candidate.js

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

src/components/Candidate/SectionSkills.js

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

src/components/Form/Form.js

@@ -3,8 +3,6 @@ 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({
@@ -14,16 +12,19 @@ const Form = () => {
   });
 
   const history = useHistory();
-  const prevPath = useSelector(selectPath);
 
   const handleChange = (e) => {
-    const newData = { ...data };
-    newData[e.target.id] = e.target.value;
-    setData(newData);
+    const { id, value } = e.target;
+
+    setData((prev) => ({
+      ...prev,
+      [id]: value,
+    }));
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    console.log('submitData', data);
 
     const formData = new FormData();
     formData.append('email', data.email);
@@ -33,11 +34,17 @@ const Form = () => {
     fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', formData);
   };
 
+  const goBack = () => {
+    history.goBack();
+  };
+
+  console.log('data', data);
+
   return (
     <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} onClick={() => goBack()}>
             <div className={style.form__arrow__img}>
               <img src={arrow} alt="" />
             </div>

src/components/Sidebar/Sidebar.js

@@ -2,21 +2,15 @@ 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`} onClick={() => dispatch(path(history.location.pathname))}>
+        <Link to={`/form`}>
           <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
         </Link>
       </div>

src/redux/outstaffingSlice.js

@@ -7,7 +7,6 @@ const initialState = {
   selectedItems: [],
   currentCandidate: {},
   auth: true,
-  path: '',
 };
 
 export const outstaffingSlice = createSlice({
@@ -32,14 +31,10 @@ 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, path } =
-  outstaffingSlice.actions;
+export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates } = outstaffingSlice.actions;
 
 export const selectProfiles = (state) => state.outstaffing.profiles;
 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 selectCurrentCandidate = (state) => state.outstaffing.currentCandidate;
 export const selectAuth = (state) => state.outstaffing.auth;
-export const selectPath = (state) => state.outstaffing.path;
 
 export default outstaffingSlice.reducer;