фиксы

src/App.js

@@ -4,8 +4,8 @@ import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom
 
 import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
 import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
-import Home from "./components/Home/Home";
+import Home from "./pages/Home/Home";
-import CandidatePage from './pages/CandidatePage'
+import Candidate from "./components/Candidate/Candidate";
 import Calendar from "./components/Calendar/Calendar";
 import ReportForm from "./components/ReportForm/ReportForm";
 import {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar";
@@ -24,6 +24,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 
 
 
+
 const App = () => {
   return (
       <>
@@ -36,7 +37,7 @@ const App = () => {
             <Route exact path='/authdev' element={<AuthForDevelopers/>}/>
             <Route exact path='/auth' element={<AuthForPartners/>}/>
 
-            <Route exact path='/candidate/:id' element={<CandidatePage/>}/>
+            <Route exact path='/candidate/:id' element={<Candidate/>}/>
             <Route exact path='/candidate/:id/form' element={<FormPage/>}/>
             <Route path='/:userId/calendar' element={<Calendar/>}/>
 

src/components/AuthBox/AuthBox.js

@@ -1,21 +1,23 @@
 import React, {useState} from 'react'
-import {Link} from 'react-router-dom'
+import {Link, useNavigate} from 'react-router-dom'
 import {useDispatch, useSelector} from 'react-redux'
 import {withSwalInstance} from 'sweetalert2-react'
 import swal from 'sweetalert2'
 
 import {Loader} from '../Loader/Loader'
+import ErrorBoundary from "../../hoc/ErrorBoundary";
 
-import {auth, setUserInfo} from '../../redux/outstaffingSlice'
+import {auth, selectAuth, setUserInfo} from '../../redux/outstaffingSlice'
 import {loading} from '../../redux/loaderSlice'
 import {setRole} from '../../redux/roleSlice'
 
 import {selectIsLoading} from '../../redux/loaderSlice'
 
+import {useRequest} from "../../hooks/useRequest";
+
 import ellipse from '../../images/ellipse.png'
 
 import './authBox.scss'
-import {useRequest} from "../../hooks/useRequest";
 
 
 const SweetAlert = withSwalInstance(swal);
@@ -23,14 +25,21 @@ const SweetAlert = withSwalInstance(swal);
 export const AuthBox = ({title, altTitle, roleChangeLink}) => {
   const dispatch = useDispatch();
 
-  const {apiRequest} = useRequest();
+  const navigate = useNavigate();
 
+  const isAuth = useSelector(selectAuth);
   const isLoading = useSelector(selectIsLoading);
 
+  const {apiRequest} = useRequest();
+
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);
 
+  if (isAuth) {
+    navigate('/')
+  }
+
   const submitHandler = () => {
 
     if (!isLoading) {
@@ -97,12 +106,14 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
 
           {error && (
               <div className='auth-box__form-error'>
+                <ErrorBoundary>
                   <SweetAlert
                       show={!!error}
                       title='Ошибка'
                       text={error}
                       onConfirm={() => setError(null)}
                   />
+                </ErrorBoundary>
               </div>
           )}
 
@@ -124,6 +135,7 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
             </Link>
           </div>
         </form>
+
       </div>
   )
 };

src/components/Candidate/Candidate.js

@@ -18,13 +18,19 @@ import back from '../../images/back_end.png'
 import design from '../../images/design.png'
 
 import './candidate.scss'
+import {LogoutButton} from "../LogoutButton/LogoutButton";
+import {Header} from "../Header/Header";
 
 
 const Candidate = () => {
   const {id: candidateId} = useParams();
+
   const navigate = useNavigate();
+
   const dispatch = useDispatch();
 
+  const currentCandidateObj = useSelector(selectCurrentCandidate);
+
   const [activeSnippet, setActiveSnippet] = useState(true);
 
   const {apiRequest} = useRequest();
@@ -39,8 +45,6 @@ const Candidate = () => {
     }).then((el) => dispatch(currentCandidate(el)))
   }, [dispatch, candidateId]);
 
-  const currentCandidateObj = useSelector(selectCurrentCandidate);
-
   const {position_id, skillValues, vc_text: text} = currentCandidateObj;
 
   const setStyles = () => {
@@ -80,16 +84,9 @@ const Candidate = () => {
   const {header, img, classes} = setStyles();
 
   return (
-      <div className='candidate'>
+      <>
-        <div className='row'>
+        <Header/>
-          <div className='col-12'>
+        <div className='container candidate'>
-            <div className='candidate__title'>
-              <h2>
-                <span>Аутстаффинг</span> it-персонала
-              </h2>
-            </div>
-          </div>
-        </div>
 
           <div className='row'>
             <div className='col-12 candidate__header'>
@@ -148,7 +145,8 @@ const Candidate = () => {
                               <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
+                                  <div className="item-works__text">Forked from
+                                    peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
                                     documentation
                                   </div>
                                   <div className="item-works__mark">Angular</div>
@@ -157,7 +155,8 @@ const Candidate = () => {
                               <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
+                                  <div className="item-works__text">Forked from
+                                    peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
                                     documentation
                                   </div>
                                   <div className="item-works__mark">Angular</div>
@@ -166,7 +165,8 @@ const Candidate = () => {
                               <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
+                                  <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>
@@ -182,6 +182,7 @@ const Candidate = () => {
           </div>
           <Footer/>
         </div>
+      </>
   )
 };
 

src/components/Candidate/candidate.scss

@@ -1,26 +1,6 @@
 @use 'sass:math'; 
 .candidate {
-  &__title {
-    margin-top: 60px;
 
-    h2 {
-      text-align: center;
-      color: #52b709;
-      font-family: 'GT Eesti Pro Display', sans-serif;
-      font-size: 5em;
-      font-weight: 700;
-      font-style: normal;
-      letter-spacing: normal;
-      line-height: 77.81px;
-
-      span {
-        color: #282828;
-        font-style: normal;
-        letter-spacing: 0.56px;
-        line-height: normal;
-      }
-    }
-  }
 
   &__header {
     display: flex;

src/components/Description/Description.js

@@ -3,6 +3,7 @@ import {useSelector} from 'react-redux'
 import {Link} from 'react-router-dom'
 
 import {Loader} from '../Loader/Loader'
+import ErrorBoundary from "../../hoc/ErrorBoundary";
 
 import {LEVELS, SKILLS} from '../../constants/constants'
 import {selectProfiles, selectFilteredCandidates,} from '../../redux/outstaffingSlice'
@@ -12,21 +13,24 @@ import rectangle from '../../images/rectangle_secondPage.png'
 
 import './description.scss'
 
-const Description = ({ onLoadMore, isLoadingMore }) => {
+
+const Description = ({onLoadMore, isLoadingMore}) => {
 
   const candidatesListArr = useSelector(selectProfiles);
   const filteredListArr = useSelector(selectFilteredCandidates);
 
+
   if (!filteredListArr) {
     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 col-xs-12'>
-                    <img className='description__img' src={el.photo} alt='' />
+                            <img className='description__img' src={el.photo} alt=''/>
                           </div>
                           <div className='col-12 col-xl-6'>
                             <h3 className='description__title'>
@@ -78,6 +82,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                           : 'Загрузка...'}
                     </div>
                 )}
+              </ErrorBoundary>
             </div>
 
             <div className='row'>
@@ -86,7 +91,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                   <div className='description__footer-btn'>
                     <button onClick={() => onLoadMore(2)}>
                       {isLoadingMore ? (
-                      <Loader width={40} height={40} />
+                          <Loader width={40} height={40}/>
                       ) : (
                           'Загрузить еще'
                       )}{' '}
@@ -104,11 +109,12 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
       <section className='description'>
         <div className='container'>
           <div className='description__wrapper'>
+            <ErrorBoundary>
               {filteredListArr && Array.isArray(filteredListArr) && filteredListArr.length > 0
                   ? filteredListArr.map((el) => (
                       <div className='row' key={el.id}>
                         <div className='col-2'>
-                    <img className='description__img' src={el.photo} alt='' />
+                          <img className='description__img' src={el.photo} alt=''/>
                         </div>
                         <div className='col-12 col-xl-6'>
                           <h3 className='description__title'>
@@ -159,7 +165,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                   candidatesListArr.map((el) => (
                       <div className='row' key={el.id}>
                         <div className='col-2'>
-                    <img className='description__img' src={male} alt='' />
+                          <img className='description__img' src={male} alt=''/>
                         </div>
                         <div className='col-12 col-xl-6'>
                           <h3 className='description__title'>
@@ -201,6 +207,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                         <div className='col-xl-4'></div>
                       </div>
                   ))}
+            </ErrorBoundary>
           </div>
 
           <div className='row'>

src/components/Header/Header.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {LogoutButton} from "../LogoutButton/LogoutButton";
+
+import './header.scss'
+
+export const Header = () => {
+  return (
+      <div className='container header'>
+        <h2>
+          <span>Аутстаффинг</span> it-персонала
+        </h2>
+        <LogoutButton/>
+      </div>
+  )
+};

src/components/Header/header.scss

@@ -0,0 +1,26 @@
+.header {
+  margin-top: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  h2 {
+    flex: 1;
+    text-align: center;
+    color: #52b709;
+    font-family: 'GT Eesti Pro Display', sans-serif;
+    font-size: 5em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 77.81px;
+
+    span {
+      color: #282828;
+      font-style: normal;
+      letter-spacing: 0.56px;
+      line-height: normal;
+    }
+  }
+}

src/components/Loader/Loader.js

@@ -2,10 +2,11 @@ import SVGLoader from 'react-loader-spinner'
 import './loader.scss'
 import React from "react";
 
-export const Loader = ({ width = 50, height = 50 }) => {
+
+export const Loader = ({width = 50, height = 50}) => {
   return (
       <div className='loader'>
-      <SVGLoader type='Circles' color='#fff' height={height} width={width} />
+        <SVGLoader type='Circles' color='#fff' height={height} width={width}/>
       </div>
   )
 };

src/components/Outstaffing/Outstaffing.js

@@ -3,6 +3,7 @@ import {useSelector, useDispatch} from 'react-redux'
 
 import OutstaffingBlock from '../OutstaffingBlock/OutstaffingBlock'
 import TagSelect from '../Select/TagSelect'
+import {Header} from "../Header/Header";
 
 import {selectTags, getPositionId, setPositionId} from '../../redux/outstaffingSlice'
 
@@ -11,7 +12,8 @@ import back from '../../images/back_end.png'
 import design from '../../images/design.png'
 
 import './outstaffing.scss'
-import {LogoutButton} from "../LogoutButton/LogoutButton";
+
+
 
 const createSelectPositionHandler =
     ({positionId, setPositionId, dispatch}) =>
@@ -36,12 +38,6 @@ const Outstaffing = () => {
   return (
       <>
         <section className='outstaffing'>
-          <div className='outstaffing__title'>
-            <h2>
-              <span>Аутстаффинг</span> it-персонала
-            </h2>
-            <LogoutButton/>
-          </div>
           <div className='row'>
             <div className='col-12 col-xl-4'>
               <OutstaffingBlock

src/components/Outstaffing/outstaffing.scss

@@ -1,30 +1,3 @@
-.outstaffing {
-  &__title {
-    margin-top: 60px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    h2 {
-      flex: 1;
-      text-align: center;
-      color: #52b709;
-      font-family: 'GT Eesti Pro Display', sans-serif;
-      font-size: 5em;
-      font-weight: 700;
-      font-style: normal;
-      letter-spacing: normal;
-      line-height: 77.81px;
-
-      span {
-        color: #282828;
-        font-style: normal;
-        letter-spacing: 0.56px;
-        line-height: normal;
-      }
-    }
-  }
-}
 
 @media (max-width: 375.98px) {
   .outstaffing__title > h2 {

src/hoc/ErrorBoundary.js

@@ -0,0 +1,22 @@
+import React, {Component} from "react";
+
+class ErrorBoundary extends Component {
+  state = {
+    error: null,
+  };
+
+  static getDerivedStateFromError(error) {
+    return {error};
+  }
+
+  render() {
+    const { error } = this.state;
+
+    if (error) {
+      return <div>Что-то пошло не так =( {error}</div>;
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary

src/pages/CandidatePage.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { WithLogout } from '../hoc/withLogout';
-import Candidate from '../components/Candidate/Candidate';
-
-const CandidatePage = () => <WithLogout><Candidate /></WithLogout>;
-
-export default CandidatePage;

src/pages/Home/Home.js

@@ -1,14 +1,15 @@
 import React, {useState, useEffect} from 'react'
 import {useDispatch} from 'react-redux'
 
-import Outstaffing from '../Outstaffing/Outstaffing'
+import Outstaffing from '../../components/Outstaffing/Outstaffing'
-import Description from '../Description/Description'
+import Description from '../../components/Description/Description'
-import {Footer} from '../Footer/Footer'
+import {Footer} from '../../components/Footer/Footer'
 
 import {profiles, tags} from '../../redux/outstaffingSlice'
 
 import {useRequest} from "../../hooks/useRequest";
-import {LogoutButton} from "../LogoutButton/LogoutButton";
+import {LogoutButton} from "../../components/LogoutButton/LogoutButton";
+import {Header} from "../../components/Header/Header";
 
 
 const Home = () => {
@@ -30,8 +31,7 @@ const Home = () => {
       setIsLoadingMore(false)
     });
 
-    apiRequest('/skills/skills-on-main-page', {
+    apiRequest('/skills/skills-on-main-page', {}).then((skills) => {
-    }).then((skills) => {
       if (!skills) {
         return []
       }
@@ -54,12 +54,14 @@ const Home = () => {
   };
 
   return (
+      <>
+        <Header/>
         <div className='container'>
-
           <Outstaffing/>
           <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/>
           <Footer/>
         </div>
+      </>
   )
 };