preLoader and validate report form

src/components/ProfileCalendar/ProfileCalendar.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
+import {currentMonth, getReports} from '../Calendar/calendarHelper'
 import { Link } from 'react-router-dom'
 import moment from "moment";
 
-import {currentMonth, getReports} from '../Calendar/calendarHelper'
 import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
-import { Footer } from '../Footer/Footer'
+import {Loader} from "../Loader/Loader";
 import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
+import { Footer } from '../Footer/Footer'
 
 import {useRequest} from "../../hooks/useRequest";
 import { getProfileInfo } from '../../redux/outstaffingSlice'
@@ -22,6 +23,7 @@ export const ProfileCalendar = () => {
     const [reports, setReports] = useState([]);
     const [totalHours, setTotalHours] = useState(0);
     const [requestDates, setRequestDates] = useState('');
+    const [loader, setLoader] = useState(false)
 
     const {apiRequest} = useRequest();
 
@@ -30,6 +32,7 @@ export const ProfileCalendar = () => {
     });
 
     useEffect(async () => {
+        setLoader(true)
         if (!requestDates) {
             return
         }
@@ -45,6 +48,7 @@ export const ProfileCalendar = () => {
                 }
                 setTotalHours(spendTime);
                 setReports(reports)
+                setLoader(false)
             })
     }, [requestDates]);
 
@@ -68,14 +72,18 @@ export const ProfileCalendar = () => {
                         }}>Заполнить отчет за день</button>
                     </Link>
                 </div>
-                <div className='row'>
-                    <div className='col-12 col-xl-12'>
-                        <ProfileCalendarComponent reportsDates={reports} />
-                        <p className='calendar__hours'>
-                            {month} : <span> {totalHours} часов </span>
-                        </p>
+                {loader ?
+                    <Loader height={80}  width={80} />
+                    :
+                    <div className='row'>
+                        <div className='col-12 col-xl-12'>
+                            <ProfileCalendarComponent reportsDates={reports} />
+                            <p className='calendar__hours'>
+                                {month} : <span> {totalHours} часов </span>
+                            </p>
+                        </div>
                     </div>
-                </div>
+                }
             </div>
             <Footer />
         </div>

src/components/ProfileCalendar/profileCalendar.scss

@@ -16,6 +16,15 @@
   .summary__info {
     padding-right: 25px;
   }
+
+  .loader {
+    margin: 20px 0 50px;
+    &:hover {
+      path {
+        fill: #ffffff;
+      }
+    }
+  }
   .profile__calendar {
     margin-top: 20px;
   }

src/components/ReportForm/ReportForm.js

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 import {useSelector} from 'react-redux'
-import {Link} from 'react-router-dom'
+import {Link, useNavigate} from 'react-router-dom'
 
 import {Loader} from '../Loader/Loader'
 import {currentMonthAndDay} from '../Calendar/calendarHelper'
@@ -33,11 +33,12 @@ const getCreatedDate = (day) => {
 };
 
 const ReportForm = () => {
+  const navigate= useNavigate();
   const reportDate = useSelector(getReportDate);
 
   const {apiRequest} = useRequest();
   const [isFetching, setIsFetching] = useState(false);
-  const [reportSuccess, setReportSuccess] = useState(false);
+  const [reportSuccess, setReportSuccess] = useState('');
 
   const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
   const [troublesInputValue, setTroublesInputValue] = useState('');
@@ -56,6 +57,11 @@ const ReportForm = () => {
   };
 
   const handler = () => {
+    if(!inputs[0].task) {
+      setReportSuccess('Заполните задачи');
+      setTimeout(() => setReportSuccess(''), 1000)
+      return
+    }
     apiRequest('/reports/create', {
       method: 'POST',
       data: {
@@ -66,10 +72,11 @@ const ReportForm = () => {
         status: 1,
       },
     }).then((res) => {
-      if (res.status === 200) {
-        setReportSuccess(true);
-        setTimeout(() => setReportSuccess(false), 2000)
-      }
+      setReportSuccess('Отчет отправлен');
+      setTimeout(() => {
+        setReportSuccess('')
+        navigate('/profile/calendar');
+      }, 1000)
       setInputs(() => []);
       setTroublesInputValue('');
       setScheduledInputValue('');
@@ -189,7 +196,7 @@ const ReportForm = () => {
                 Всего за день : <span>{totalHours} часов</span>
               </p>
               {reportSuccess &&
-              <p className='report-form__footer-done'>Отчет отправлен</p>
+              <p className={`report-form__footer-done ${reportSuccess === 'Заполните задачи' ? 'errorText' : ''}`}>{reportSuccess}</p>
               }
             </div>
           </div>

src/components/ReportForm/reportForm.scss

@@ -314,6 +314,11 @@
       font-weight: 500;
       margin-left: 20px;
     }
+
+    .errorText {
+      color: #bf3c3c;
+      font-weight: 600;
+    }
   }
 
   &__form {