Переписываю спорные решения

Фикс отправки отчета, проверка на массив в map в Description.js

README.md

@@ -1,4 +1,4 @@
-# Getting Started with Create React App
+nvm# Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 

src/App.js

@@ -4,13 +4,13 @@ import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom
 
 import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
 import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
-import HomePage from './pages/HomePage'
+import Home from "./components/Home/Home";
 import CandidatePage from './pages/CandidatePage'
-import CalendarPage from './pages/CalendarPage'
+import Calendar from "./components/Calendar/Calendar";
-import ReportPage from './pages/ReportFormPage.js'
+import ReportForm from "./components/ReportForm/ReportForm";
-import ProfileCalendarPage from './pages/ProfileCalendarPage.js'
+import {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar";
-import FormPage from './pages/FormPage.js'
+import FormPage from './pages/FormPage/FormPage.js'
-import SingleReportPage from './pages/SingleReportPage'
+import SingleReportPage from './pages/SingleReportPage/SingleReportPage'
 import {QuizPage} from './pages/quiz/QuizPage'
 import {InterjacentPage} from './pages/quiz/InterjacentPage'
 import {QuizTestPage} from './pages/quiz/QuizTestPage'
@@ -23,23 +23,24 @@ import './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 
 
+
 const App = () => {
   return (
       <>
-        <h1>IT Аутстаффинг в России</h1>
         <Router>
 
           <Routes>
-            <Route exact path='/' element={<HomePage/>}/>
+
+            <Route exact path='/' element={<Home/>}/>
 
             <Route exact path='/authdev' element={<AuthForDevelopers/>}/>
             <Route exact path='/auth' element={<AuthForPartners/>}/>
 
             <Route exact path='/candidate/:id' element={<CandidatePage/>}/>
             <Route exact path='/candidate/:id/form' element={<FormPage/>}/>
-            <Route path='/:userId/calendar' element={<CalendarPage/>}/>
+            <Route path='/:userId/calendar' element={<Calendar/>}/>
 
-            <Route exact path='/report' element={<ReportPage/>}/>
+            <Route exact path='/report' element={<ReportForm/>}/>
             <Route path='/report/:id' element={<SingleReportPage/>}/>
 
             <Route exact path='quiz'>
@@ -52,7 +53,7 @@ const App = () => {
 
             <Route exact path='profile'>
               <Route index element={<Profile/>}/>
-              <Route exact path='calendar' element={<ProfileCalendarPage/>}/>
+              <Route exact path='calendar' element={<ProfileCalendar/>}/>
               <Route exact path='summary' element={<Summary/>}/>
             </Route>
 

src/components/Calendar/Calendar.js

@@ -1,22 +1,27 @@
 import React, {useEffect, useState} from 'react'
 import {useSelector} from 'react-redux'
-import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
+import {Link, useNavigate} from 'react-router-dom'
-import {Link} from 'react-router-dom'
 
 import CalendarComponent from './CalendarComponent'
 import {currentMonth} from './calendarHelper'
 import {Footer} from '../Footer/Footer'
+import {LogoutButton} from "../LogoutButton/LogoutButton";
+
+import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
 
 import rectangle from '../../images/rectangle_secondPage.png'
 
 import './calendar.scss'
 
-const Calendar = ({onSelect}) => {
+
+const Calendar = () => {
 
   const candidateForCalendar = useSelector(selectCurrentCandidate);
 
   const [month, setMonth] = useState('');
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     setMonth(currentMonth)
   }, [month]);
@@ -26,11 +31,15 @@ const Calendar = ({onSelect}) => {
   const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
 
   return (
+      <div className='container'>
         <section className='calendar'>
           <div className='row'>
+            <div className='calendar__header'>
             <h2 className='calendar__profile'>
               Добрый день, <span>Александр !</span>
             </h2>
+            <LogoutButton />
+            </div>
             <div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
               <div className='calendar__info'>
                 <img className='calendar__info-img' src={photo} alt='img'/>
@@ -50,7 +59,7 @@ const Calendar = ({onSelect}) => {
 
           <div className='row'>
             <div className='col-12 col-xl-12'>
-            <CalendarComponent onSelect={onSelect}/>
+              <CalendarComponent onSelect={() => { navigate('/report/0') }}/>
               <p className='calendar__hours'>
                 {month} : <span> 60 часов </span>
               </p>
@@ -58,6 +67,7 @@ const Calendar = ({onSelect}) => {
           </div>
           <Footer/>
         </section>
+      </div>
   )
 };
 

src/components/Calendar/calendar.scss

@@ -2,6 +2,17 @@
   margin-bottom: 40px;
   font-family: 'LabGrotesque', sans-serif;
 
+  &__header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    h2 {
+      flex: 1;
+    }
+  }
+
   &__profile {
     color: #282828;
     font-size: 3.4em;
@@ -45,8 +56,6 @@
       position: absolute;
       width: 132px;
       height: 132px;
-      left: -40px;
-      top: -10px;
     }
   }
 

src/components/Description/Description.js

@@ -22,7 +22,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
       <section className='description'>
         <div className='container'>
           <div className='description__wrapper'>
-            {candidatesListArr && candidatesListArr.length > 0 ? (
+            {candidatesListArr && Array.isArray(candidatesListArr) && candidatesListArr.length > 0 ? (
               candidatesListArr.map((el) => (
                 <div className='row' key={el.id}>
                   <div className='col-2 col-xs-12'>
@@ -56,7 +56,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                   <div className='col-xl-2'></div>
                   <div className='col-12 col-xl-6'>
                     <ul className='description__list'>
-                      {el.skillValues.map((e) => (
+                      {Array.isArray(el?.skillValues) && el.skillValues.map((e) => (
                         <li key={e.id} className='description__list-item'>
                           {e.skill.name}
                         </li>
@@ -104,7 +104,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
     <section className='description'>
       <div className='container'>
         <div className='description__wrapper'>
-          {filteredListArr && filteredListArr.length > 0
+          {filteredListArr && Array.isArray(filteredListArr) && filteredListArr.length > 0
             ? filteredListArr.map((el) => (
                 <div className='row' key={el.id}>
                   <div className='col-2'>
@@ -139,7 +139,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                   <div className='col-xl-2'></div>
                   <div className='col-12 col-xl-6'>
                     <ul className='description__list'>
-                      {el.skillValues.map((e) => (
+                      {Array.isArray(el?.skillValues) &&  el.skillValues?.map((e) => (
                         <li key={e.id} className='description__list-item'>
                           {e.skill.name}
                         </li>
@@ -155,7 +155,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                 </div>
               ))
             : /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */
-              candidatesListArr &&
+              candidatesListArr && Array.isArray(candidatesListArr) &&
               candidatesListArr.map((el) => (
                 <div className='row' key={el.id}>
                   <div className='col-2'>
@@ -186,7 +186,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
                   <div className='col-xl-2'></div>
                   <div className='col-12 col-xl-6'>
                     <ul className='description__list'>
-                      {el.skillValues.map((e) => (
+                      {Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
                         <li key={e.id} className='description__list-item'>
                           {e.skill.name}
                         </li>
@@ -207,8 +207,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
           <div className='col-12'>
             <div className='description__footer'>
               <div className='description__footer-btn'>
-                {
+                {candidatesListArr &&
-                candidatesListArr &&
                 filteredListArr.length === 0 ? (
                   <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
                 ) : null}

src/components/Home/Home.js

@@ -8,6 +8,7 @@ import {Footer} from '../Footer/Footer'
 import {profiles, tags} from '../../redux/outstaffingSlice'
 
 import {useRequest} from "../../hooks/useRequest";
+import {LogoutButton} from "../LogoutButton/LogoutButton";
 
 
 const Home = () => {
@@ -53,11 +54,12 @@ const Home = () => {
   };
 
   return (
-      <>
+      <div className='container'>
+
         <Outstaffing/>
         <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/>
         <Footer/>
-      </>
+      </div>
   )
 };
 

src/components/LogoutButton/LogoutButton.js

@@ -14,8 +14,8 @@ export const LogoutButton = () => {
   const navigate = useNavigate();
 
   return (
-      <div className='logout-button'>
       <button
+          className='logout-button'
           onClick={() => {
             setIsLoggingOut(true);
             localStorage.clear();
@@ -24,8 +24,7 @@ export const LogoutButton = () => {
             navigate(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
           }}
       >
-          {isLoggingOut ? <Loader/> : 'Выйти'}{' '}
+        {isLoggingOut ? <Loader/> : 'Выйти'}
       </button>
-      </div>
   )
 };

src/components/LogoutButton/logoutButton.scss

@@ -1,10 +1,7 @@
 .logout-button {
-  position: absolute;
-  top: 70px;
-  right: 2.5rem;
-  z-index: 100;
 
-  button {
+  position: relative;
+  z-index: 100;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -12,29 +9,19 @@
   width: 131px;
   height: 40px;
   border-radius: 10px;
-    font-family: 'Muller';
   font-size: 1.6em;
   letter-spacing: 0.8px;
   background-color: #6aaf5c;
   color: #ffffff;
   border: 3px solid #6aaf5c;
-    font-family: 'Muller';
+  font-family: 'Muller', sans-serif;
   text-align: center;
-  }
 
   &:hover {
-    button {
     background-color: #ffffff;
     color: #6aaf5c;
     border: 3px solid #6aaf5c;
     box-shadow: 3px 2px 5px rgba(82, 151, 34, 0.21);
     transition: 0.3s;
   }
-  }
-}
-
-@media (max-width: 1199px) {
-  .logout-button {
-    top: 16px !important;
-  }
 }

src/components/Outstaffing/Outstaffing.js

@@ -1,19 +1,20 @@
 import React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import {useSelector, useDispatch} from 'react-redux'
 
 import OutstaffingBlock from '../OutstaffingBlock/OutstaffingBlock'
 import TagSelect from '../Select/TagSelect'
 
-import {  selectTags,  getPositionId,  setPositionId} from '../../redux/outstaffingSlice'
+import {selectTags, getPositionId, setPositionId} from '../../redux/outstaffingSlice'
 
 import front from '../../images/front_end.png'
 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 }) =>
+    ({positionId, setPositionId, dispatch}) =>
         (id) => {
           if (id === positionId) {
             dispatch(setPositionId(null))
@@ -35,16 +36,12 @@ const Outstaffing = () => {
   return (
       <>
         <section className='outstaffing'>
-        <div className='row'>
-          <div className='col-12'>
           <div className='outstaffing__title'>
             <h2>
               <span>Аутстаффинг</span> it-персонала
             </h2>
+            <LogoutButton/>
           </div>
-          </div>
-        </div>
-
           <div className='row'>
             <div className='col-12 col-xl-4'>
               <OutstaffingBlock
@@ -87,7 +84,7 @@ const Outstaffing = () => {
             </div>
           </div>
         </section>
-      <TagSelect />
+        <TagSelect/>
       </>
   )
 };

src/components/Outstaffing/outstaffing.scss

@@ -1,11 +1,15 @@
 .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';
+      font-family: 'GT Eesti Pro Display', sans-serif;
       font-size: 5em;
       font-weight: 700;
       font-style: normal;

src/components/ReportForm/ReportForm.js

@@ -58,7 +58,7 @@ const ReportForm = () => {
   const handler = () => {
     apiRequest('/reports/create', {
       method: 'POST',
-      body: {
+      data: {
         tasks: inputs,
         difficulties: troublesInputValue,
         tomorrow: scheduledInputValue,

src/pages/ActPage/ActPage.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ActContent } from "../components/features/bookkeeping/ActContent/ActContent"
+import { ActContent } from "../../components/features/bookkeeping/ActContent/ActContent"
-import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete"
+import { BookkeepingTemplete } from "../../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete"
 
 export const ActPage = () => {
     return (

src/pages/CalendarPage.js

@@ -4,8 +4,8 @@ import { WithLogout } from '../hoc/withLogout';
 import Calendar from '../components/Calendar/Calendar';
 
 const CalendarPage = () => {
-  const navigate = useNavigate();
+
-  return <WithLogout><Calendar onSelect={() => { navigate('/report/0') }} /></WithLogout>;
+  return <WithLogout><Calendar onSelect={} /></WithLogout>;
 };
 
 export default CalendarPage;

src/pages/CodeSnippetPage.js

@@ -4,14 +4,14 @@ import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 export const CodeSnippetlighter = () => {
     const [codeString, setCodeString] = useState(``) 
-
+    //
-    useEffect(()=>{
+    // useEffect(()=>{
-      fetch('/code.txt')
+    //   fetch('/code.txt')
-      .then((r) => r.text())
+    //   .then((r) => r.text())
-      .then(text  => {
+    //   .then(text  => {
-        setCodeString(text)
+    //     setCodeString(text)
-      })  
+    //   })
-    }, [])
+    // }, [])
   
     return (
         <SyntaxHighlighter language={"javascript"} style={a11yDark} wrapLongLines={false} customStyle={{fontSize:14}} showLineNumbers={true}>

src/pages/FormPage/FormPage.js

@@ -1,22 +1,25 @@
 import React from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {useParams, useNavigate} from 'react-router-dom'
-import {
-  currentCandidate,
-  selectCurrentCandidate,
-} from '../redux/outstaffingSlice'
 import SVG from 'react-inlinesvg'
-import {WithLogout} from '../hoc/withLogout'
-import Form from '../components/Form/Form'
-import {LEVELS, SKILLS} from '../constants/constants'
-import {Footer} from '../components/Footer/Footer'
 
-import arrow from '../images/right-arrow.png'
+import {useRequest} from "../../hooks/useRequest";
-import rectangle from '../images/rectangle_secondPage.png'
+import {WithLogout} from '../../hoc/withLogout'
-import telegramIcon from '../images/telegram-icon.svg'
+
+import Form from '../../components/Form/Form'
+import {Footer} from '../../components/Footer/Footer'
+
+import arrow from '../../images/right-arrow.png'
+import rectangle from '../../images/rectangle_secondPage.png'
+import telegramIcon from '../../images/telegram-icon.svg'
+
+import {LEVELS, SKILLS} from '../../constants/constants'
+
+import {currentCandidate, selectCurrentCandidate} from '../../redux/outstaffingSlice'
 
 import './formPage.scss'
-import {useRequest} from "../hooks/useRequest";
+
+
 
 
 const FormPage = () => {

src/pages/HomePage.js

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

src/pages/ProfileCalendarPage.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar';
-
-const ProfileCalendarPage = () => {
-    return <ProfileCalendar/>;
-};
-
-export default ProfileCalendarPage;

src/pages/ReportFormPage.js

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

src/pages/SingleReportPage/SingleReportPage.js

@@ -1,15 +1,17 @@
 import React from 'react'
-import { WithLogout } from '../hoc/withLogout'
+import { WithLogout } from '../../hoc/withLogout'
-import arrowLeft from '../images/right-arrow.png'
+import arrowLeft from '../../images/right-arrow.png'
 
 import SVG from 'react-inlinesvg'
 
-import dateArrowIcon from '../images/dateArrow.svg'
+import dateArrowIcon from '../../images/dateArrow.svg'
-import calendarIcon from '../images/calendar.svg'
+import calendarIcon from '../../images/calendar.svg'
 
-import { TaskItem } from '../components/TaskItem/TaskItem'
+import { TaskItem } from '../../components/TaskItem/TaskItem'
 
 import './singleReportPage.scss'
+import {useNavigate} from "react-router";
+import {LogoutButton} from "../../components/LogoutButton/LogoutButton";
 
 const tasks = [
   {
@@ -25,10 +27,13 @@ const tasks = [
 ];
 
 const SingleReportPage = () => {
+
+  const navigate= useNavigate();
+
   return (
-    <WithLogout>
+
       <div className='single-report-page'>
-        <div className='single-report-page__back'>
+        <div onClick={()=> {navigate(-1)}} className='single-report-page__back'>
           <div className='single-report-page__back-arrow'>
             <img src={arrowLeft} alt='arrowLeft'/>
           </div>
@@ -100,8 +105,9 @@ const SingleReportPage = () => {
             <div className='single-report-page__hours-text'></div>
           </div>
         </div>
+        <LogoutButton />
       </div>
-    </WithLogout>
+
   )
 };
 

src/pages/SingleReportPage/singleReportPage.scss

@@ -1,15 +1,14 @@
 .single-report-page {
-  padding-top: 4.6rem;
+  padding: 4.6rem 20px 0;
-
+  font-family: 'GT Eesti Pro Display', sans-serif;
   &__back {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-
+    cursor: pointer;
     &-text {
       margin-left: 3.1rem;
       color: #000000;
-      font-family: 'GT Eesti Pro Display';
       font-size: 18px;
       font-weight: 300;
       letter-spacing: normal;
@@ -26,7 +25,6 @@
 
     &-text {
       color: #282828;
-      font-family: 'GT Eesti Pro Display';
       font-size: 33px;
       font-weight: 700;
       line-height: 48.74px;
@@ -52,7 +50,6 @@
         border-radius: 5px;
         border: 1px solid #c4c4c4;
         background-color: #f0f7e0;
-
         display: flex;
         justify-content: center;
         align-items: center;
@@ -63,7 +60,6 @@
           margin-left: 10px;
           margin-bottom: 0;
           color: #000000;
-          font-family: "GT Eesti Pro Display";
           font-size: 13px;
           font-weight: 300;
           font-style: normal;
@@ -104,7 +100,6 @@
       align-items: center;
       h3 {
         color: #18586e;
-        font-family: 'GT Eesti Pro Display';
         font-size: 20px;
         font-weight: 500;
         letter-spacing: normal;
@@ -117,7 +112,6 @@
       margin-top: 2.4rem;
       width: 580px;
       color: #000000;
-      font-family: 'GT Eesti Pro Display';
       font-size: 15px;
       font-weight: 400;
       letter-spacing: normal;