change calendar month

src/components/ProfileCalendar/ProfileCalendar.js

@@ -14,23 +14,28 @@ import {urlForLocal} from "../../helper";
 
 import {apiRequest} from "../../api/request";
 import { getProfileInfo } from '../../redux/outstaffingSlice'
-import {setReportDate} from "../../redux/reportSlice";
+import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice";
 
+import 'moment/locale/ru'
 import './profileCalendar.scss'
 
 
 export const ProfileCalendar = () => {
     const dispatch = useDispatch();
-    const profileInfo = useSelector(getProfileInfo);
+    const profileInfo = useSelector(getProfileInfo)
+    const requestDates = useSelector(getRequestDates)
     const [month, setMonth] = useState('');
+    const [value, setValue] = useState(moment())
     const [reports, setReports] = useState([]);
     const [totalHours, setTotalHours] = useState(0);
-    const [requestDates, setRequestDates] = useState('');
+    const [loader, setLoader] = useState(true)
-    const [loader, setLoader] = useState(false)
 
+    function setValueHandler (value) {
+        setValue(value)
+    }
 
     useEffect(() => {
-        setRequestDates(getReports(moment()))
+        dispatch(setRequestDate(getReports(moment())))
     },[]);
 
     useEffect( () => {
@@ -79,7 +84,7 @@ export const ProfileCalendar = () => {
                     :
                     <div className='row'>
                         <div className='col-12 col-xl-12'>
-                            <ProfileCalendarComponent reportsDates={reports} />
+                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} />
                             <p className='calendar__hours'>
                                 {month} : <span> {totalHours} часов </span>
                             </p>

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react'
-// import ellipse from '../../images/ellipse.png'
+import ellipse from '../../images/ellipse.png'
 import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
-import 'moment/locale/ru'
+import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
-import { calendarHelper, currentMonthAndDay} from '../Calendar/calendarHelper'
+import {setReportDate, setRequestDate} from '../../redux/reportSlice';
-import { setReportDate } from '../../redux/reportSlice';
 import {useDispatch} from "react-redux";
 import {Link} from "react-router-dom";
 
+import 'moment/locale/ru'
 import './../Calendar/calendarComponent.scss'
 
-export const ProfileCalendarComponent = ({reportsDates}) => {
+export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => {
     const dispatch = useDispatch();
-    const [value, setValue] = useState(moment())
+    const [currentDay] = useState(moment())
     const [calendar, setCalendar] = useState([])
 
     useEffect(() => {
@@ -35,8 +35,8 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
     }
 
     function dayStyles(day) {
-        if (value < day) return `block`
+        if (currentDay < day) return `block`
-        for (const date of reportsDates) {
+        for (const date of reports) {
             if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
                 return `before`
             }
@@ -47,7 +47,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
     }
 
     function correctRoute(day) {
-        for (const date of reportsDates) {
+        for (const date of reports) {
             if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
                 return `../view`
             }
@@ -55,26 +55,37 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
         return '../../report'
     }
 
-    // function prevMonth() {
+    function prevMonth() {
-    //     return value.clone().subtract(1, 'month')
+        return value.clone().subtract(1, 'month')
-    // }
+    }
-    //
+
-    // function nextMonth() {
+    function nextMonth() {
-    //     return value.clone().add(1, 'month');
+        return value.clone().add(1, 'month');
-    // }
+    }
 
     return (
         <div className='calendar-component'>
             <div className='calendar-component__header'>
                 <h3>Мои отчеты</h3>
-                {/*<div className='calendar-component__header-box'>*/}
+                <div className='calendar-component__header-box'>
-                {/*    <img src={ellipse} alt='' />*/}
+                    <img src={ellipse} alt='' />
-                {/*    <span onClick={() => setValue(prevMonth())}>{prevMonth().format('MMMM')}</span>*/}
+                    <span onClick={() => {
-                {/*</div>*/}
+                        setValueHandler(prevMonth())
-                {/*<div className='calendar-component__header-box'>*/}
+                        dispatch(setRequestDate(getReports(prevMonth())))
-                {/*    <img src={ellipse} alt='' />*/}
+                    }}>
-                {/*    <span onClick={() => setValue(nextMonth())}>{nextMonth().format('MMMM')}</span>*/}
+                        {prevMonth().format('MMMM')}
-                {/*</div>*/}
+                    </span>
+                </div>
+                <div className='calendar-component__header-box'>
+                    <img src={ellipse} alt='' />
+                    <span onClick={() => {
+                        setValueHandler(nextMonth())
+                        dispatch(setRequestDate(getReports(nextMonth())))
+
+                    }}>
+                        {nextMonth().format('MMMM')}
+                    </span>
+                </div>
             </div>
 
             <div className='calendar-component__rectangle'>
@@ -115,5 +126,5 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
             </div>
         </div>
     )
-}
+})
 

src/redux/reportSlice.js

@@ -2,7 +2,8 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
     dateSelected: '',
-    reportDate: ''
+    reportDate: '',
+    requestDates: ''
 };
 
 export const reportSlice = createSlice({
@@ -15,13 +16,18 @@ export const reportSlice = createSlice({
     setReportDate: (state, action) => {
       state.reportDate = action.payload;
     },
+    setRequestDate: (state, action) => {
+      state.requestDates = action.payload
+    }
   },
 });
 
-export const { dateSelected, setReportDate} = reportSlice.actions;
+export const { dateSelected, setReportDate, setRequestDate} = reportSlice.actions;
 
 export const selectDate = (state) => state.report.dateSelected;
 
 export const getReportDate = (state) => state.report.reportDate;
 
+export const getRequestDates = (state) => state.report.requestDates
+
 export default reportSlice.reducer;