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 {

src/hooks/useRequest.js

@@ -58,4 +58,4 @@ export const useRequest = () => {
 
 
   return {apiRequest}
-};
+};

src/pages/ViewReport/ViewReport.js

@@ -3,8 +3,9 @@ import {Link} from "react-router-dom";
 import {useRequest} from "../../hooks/useRequest";
 import {useSelector} from "react-redux";
 import {getReportDate} from "../../redux/reportSlice";
-import {currentMonthAndDay} from "../../components/Calendar/calendarHelper";
+import SVG from 'react-inlinesvg'
 
+import {Loader} from "../../components/Loader/Loader"
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {Footer} from "../../components/Footer/Footer";
 
@@ -32,10 +33,12 @@ export const ViewReport = () => {
     const [difficulties, setDifficulties] = useState([])
     const [tomorrowTask, setTomorrowTask] = useState([])
     const [totalHours, setTotalHours] = useState(0);
-    const [reportDay, setReportDay] = useState(new Date (getCreatedDate(reportDate)))
-    const [currentDay, setCurrentDay] = useState(new Date ())
+    const [reportDay] = useState(new Date (getCreatedDate(reportDate)))
+    const [currentDay] = useState(new Date ())
+    const [loader, setLoader] = useState(false)
 
     function getReportFromDate(day) {
+        setLoader(true)
         setTaskText([])
         setDifficulties([])
         setTomorrowTask([])
@@ -62,6 +65,7 @@ export const ViewReport = () => {
                     })
                 }
                 setTotalHours(spendTime)
+                setLoader(false)
             })
     }
 
@@ -98,14 +102,17 @@ export const ViewReport = () => {
                 </div>
                 <div className='viewReport__switchDate'>
                     <div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
-                        <img src={arrowSwitchDate} alt='arrow'/>
+                        <SVG src={arrowSwitchDate}/>
                     </div>
                     <p>{getCreatedDate(reportDay)}</p>
                     <div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
-                        <img src={arrowSwitchDate} alt='arrow'/>
+                        <SVG src={arrowSwitchDate}/>
                     </div>
                 </div>
-                {taskText.length ?
+                {loader &&
+                    <Loader width={75} height={75}/>
+                }
+                {Boolean(taskText.length) &&
                     <div className='viewReport__content'>
                         <div className='table__container'>
                             <table className='viewReport__done'>
@@ -155,7 +162,8 @@ export const ViewReport = () => {
                             </div>
                         }
                     </div>
-                    :
+                }
+                {!Boolean(taskText.length) && !loader &&
                     <div className='viewReport__noTask'>
                         <p>В этот день вы <span>не заполняли</span> отчет</p>
                     </div>

src/pages/ViewReport/viewReport.scss

@@ -148,6 +148,14 @@
     opacity: 0.5;
   }
 
+  .loader {
+    &:hover {
+      path {
+        fill: #ffffff;
+      }
+    }
+  }
+
   .table__container {
     margin: 0 -28px;
     overflow: hidden;