switch report date

src/pages/Summary/Summary.js

@@ -69,7 +69,7 @@ export const Summary = () => {
               <button>Редактировать раздел</button>
             </div>
             <div className='summary__sectionGitItems'>
-              {gitInfo.length && gitInfo.map((itemGit) => {
+              {Boolean(gitInfo.length) && gitInfo.map((itemGit) => {
                 return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
                   <div className='gitItem__info'>
                     <div className='gitItem__info__about'>

src/pages/ViewReport/ViewReport.js

@@ -1,6 +1,9 @@
 import React, {useEffect, useState} from 'react'
 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 {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {Footer} from "../../components/Footer/Footer";
@@ -10,26 +13,33 @@ import arrowSwitchDate from "../../images/arrowViewReport.svg";
 
 import './viewReport.scss'
 
-const getCreatedDate = () => {
-    const date = new Date();
-    const dd = String(date.getDate()).padStart(2, '0');
-    const mm = String(date.getMonth() + 1).padStart(2, '0');
-    const yyyy = date.getFullYear();
-    return `${yyyy}-${mm}-${dd}`
-};
-
 export const ViewReport = () => {
+    const getCreatedDate = (day) => {
+        if (day) {
+            return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
+        } else {
+            const date = new Date();
+            const dd = String(date.getDate()).padStart(2, '0');
+            const mm = String(date.getMonth() + 1).padStart(2, '0');
+            const yyyy = date.getFullYear();
+            return `${yyyy}-${mm}-${dd}`
+        }
+    };
     const {apiRequest} = useRequest();
+    const reportDate = useSelector(getReportDate);
 
     const [taskText, setTaskText] = useState([]);
     const [difficulties, setDifficulties] = useState([])
     const [tomorrowTask, setTomorrowTask] = useState([])
     const [totalHours, setTotalHours] = useState(0);
-    useEffect(() => {
+    const [reportDay, setReportDay] = useState(new Date (getCreatedDate(reportDate)))
+    const [currentDay, setCurrentDay] = useState(new Date ())
+
+    function getReportFromDate(day) {
         setTaskText([])
         setDifficulties([])
         setTomorrowTask([])
-        apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=2023-01-22`)
+        apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`)
             .then(res => {
                 let spendTime = 0
                 for (const item of res) {
@@ -53,6 +63,21 @@ export const ViewReport = () => {
                 }
                 setTotalHours(spendTime)
             })
+    }
+
+    function nextDay() {
+        reportDay.setDate(reportDay.getDate() + 1);
+        getCreatedDate(reportDay)
+        getReportFromDate(getCreatedDate(reportDay))
+    }
+
+    function previousDay() {
+        reportDay.setDate(reportDay.getDate() - 1);
+        getReportFromDate(getCreatedDate(reportDay))
+    }
+
+    useEffect(() => {
+        getReportFromDate(getCreatedDate(reportDate))
     }, []);
     return (
         <div className='viewReport'>
@@ -64,7 +89,7 @@ export const ViewReport = () => {
                         <img src={arrow} alt='arrow'/><p>Вернуться</p>
                     </Link>
                     <div className='viewReport__bar'>
-                        <h3 className='viewReport__bar__date'>{getCreatedDate()}</h3>
+                        <h3 className='viewReport__bar__date'>{getCreatedDate(reportDay)}</h3>
                         <p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} часов</span></p>
                         {/*<div className='viewReport__bar__progressBar'>*/}
                         {/*    <span></span>*/}
@@ -73,11 +98,11 @@ export const ViewReport = () => {
                     </div>
                 </div>
                 <div className='viewReport__switchDate'>
-                    <div className='viewReport__switchDate__prev switchDate'>
+                    <div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
                         <img src={arrowSwitchDate} alt='arrow'/>
                     </div>
-                    <p>{getCreatedDate()}</p>
+                    <p>{getCreatedDate(reportDay)}</p>
-                    <div className='viewReport__switchDate__next switchDate'>
+                    <div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) || getCreatedDate(currentDay) < getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
                         <img src={arrowSwitchDate} alt='arrow'/>
                     </div>
                 </div>
@@ -112,20 +137,24 @@ export const ViewReport = () => {
                                 </tbody>
                             </table>
                         </div>
-                        <div className='viewReport__item'>
+                        {Boolean(difficulties.length) &&
-                            <h3>Какие сложности возникли?</h3>
+                            <div className='viewReport__item'>
-                            {difficulties.length && difficulties.map((item, index) => {
+                                <h3>Какие сложности возникли?</h3>
-                                    return <p key={index}>{item}</p>
+                                {difficulties.map((item, index) => {
-                                }
+                                        return <p key={index}>{item}</p>
-                            )}
+                                    }
-                        </div>
+                                )}
-                        <div className='viewReport__item'>
+                            </div>
-                            <h3>Что планируется сделать завтра?</h3>
+                        }
-                            {tomorrowTask.length && tomorrowTask.map((item, index) => {
+                        {Boolean(tomorrowTask.length) &&
-                                    return <p key={index}>{item}</p>
+                            <div className='viewReport__item'>
-                                }
+                                <h3>Что планируется сделать завтра?</h3>
-                            )}
+                                {tomorrowTask.map((item, index) => {
-                        </div>
+                                        return <p key={index}>{item}</p>
+                                    }
+                                )}
+                            </div>
+                        }
                     </div>
                     :
                     <div className='viewReport__noTask'>

src/pages/ViewReport/viewReport.scss

@@ -122,7 +122,7 @@
 
     p {
       font-weight: 400;
-      font-size: 12px;
+      font-size: 18px;
       line-height: 32px;
       color: #000000;
     }
@@ -143,6 +143,11 @@
     }
   }
 
+  .disable {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   .table__container {
     margin: 0 -28px;
     overflow: hidden;