Merge pull request #37 from apuc/quiz-error-msg

Quiz error msg

src/components/ReportForm/ReportForm.js

@@ -28,6 +28,7 @@ const ReportForm = () => {
   const role = useSelector(getRole)
 
   const [isFetching, setIsFetching] = useState(false)
+  const [reportSuccess, setReportSuccess] = useState(false)
 
   const [inputs, setInputs] = useState([ { task: '', hours_spent: '', minutes_spent: 0 } ]);
   const [troublesInputValue, setTroublesInputValue] = useState('');
@@ -37,8 +38,10 @@ const ReportForm = () => {
     setInputs((prev) => [...prev, { task: '', hours_spent: '', minutes_spent: 0 }])
   }
 
+  const totalHours = inputs.reduce((a,b) => a + b.hours_spent, 0)
+
   const deleteInput = (indexRemove) => {
-    if (indexRemove !== 1) {
+    if (indexRemove !== 0) {
       setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
     }
   }
@@ -152,6 +155,10 @@ const ReportForm = () => {
                 logout: () => dispatch(auth(false))
               }).then((res) =>
                 res.json().then((resJSON) => {
+                  if(res.status === 200) {
+                    setReportSuccess(true)
+                    setTimeout(()=> setReportSuccess(false),2000)
+                  }
                   setInputs( () => [] )
                   setTroublesInputValue('');
                   setScheduledInputValue('');
@@ -163,8 +170,11 @@ const ReportForm = () => {
               {isFetching ? <Loader /> : 'Отправить'}
             </button>
             <p className='report-form__footer-text'>
-              Всего за день : <span>60 часов</span>
+              Всего за день : <span>{totalHours} часов</span>
             </p>
+            {reportSuccess &&
+              <p className='report-form__footer-done'>Отчет отправлен</p>
+            }
           </div>
         </div>
       </div>

src/components/ReportForm/reportForm.scss

@@ -264,6 +264,14 @@
         font-weight: 100;
       }
     }
+
+    &-done {
+      margin-bottom: 0;
+      font-size: 18px;
+      color: green;
+      font-weight: 500;
+      margin-left: 20px;
+    }
   }
 
   &__form {

src/components/features/quiz/HeaderQuiz.js

@@ -26,21 +26,25 @@ export const HeaderQuiz = ({header}) => {
    }, [dispatch])
 
    return (
-     <div className="header-quiz">
+       <div>
-        <div className="header-quiz__container">
+       { userInfo?.status === 500 ? <div className="error-msg">{userInfo.message}</div> :
-           {!userInfo ? <h2>Loading...</h2> :
+         <div className="header-quiz">
-             <>
+            <div className="header-quiz__container">
-                {header && <h2 className={'header-quiz__title-main'}>Добрый день, {userInfo.fio}</h2>}
+               {!userInfo ? <h2>Loading...</h2> :
-                <div className="header-quiz__body header-quiz__body_interjacent">
+                 <>
-                   <div className="header-quiz__avatar">
+                    {header && <h2 className={'header-quiz__title-main'}>Добрый день, {userInfo.fio}</h2>}
-                      <img src={userInfo.photo} alt={userInfo.photo}/>
+                    <div className="header-quiz__body header-quiz__body_interjacent">
-                   </div>
+                       <div className="header-quiz__avatar">
-                   <div className="header-quiz__name-user">{userInfo.fio}</div>
+                          <img src={userInfo.photo} alt={userInfo.photo}/>
-                   <div className="header-quiz__title">{userInfo.position_name}</div>
+                       </div>
-                </div>
+                       <div className="header-quiz__name-user">{userInfo.fio}</div>
-             </>
+                       <div className="header-quiz__title">{userInfo.position_name}</div>
-           }
+                    </div>
-        </div>
+                 </>
-     </div>
+               }
+            </div>
+         </div>
+       }
+       </div>
    )
 }

src/components/features/quiz/quiz.scss

@@ -72,6 +72,14 @@ $maxWidthContainer: 1123;
     line-height: math.div(30, 25);
 }
 //=============================================
+
+.error-msg {
+    text-align: center;
+    font-size: 25px;
+    color: red;
+    font-weight: 500;
+}
+
 .header-quiz{
     @include adaptiv-value("padding-top", 48, 30, 1);
     @include adaptiv-value("padding-bottom", 85, 30, 1);