diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index dd40b413..1c7d6968 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/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(false) + const [loader, setLoader] = useState(true) + function setValueHandler (value) { + setValue(value) + } useEffect(() => { - setRequestDates(getReports(moment())) + dispatch(setRequestDate(getReports(moment()))) },[]); useEffect( () => { @@ -79,7 +84,7 @@ export const ProfileCalendar = () => { :
- +

{month} : {totalHours} часов

diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js index 2c574863..92584f90 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.js +++ b/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} from '../Calendar/calendarHelper' -import { setReportDate } from '../../redux/reportSlice'; +import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper' +import {setReportDate, setRequestDate} 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` - for (const date of reportsDates) { + if (currentDay < day) return `block` + 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() { - // return value.clone().subtract(1, 'month') - // } - // - // function nextMonth() { - // return value.clone().add(1, 'month'); - // } + function prevMonth() { + return value.clone().subtract(1, 'month') + } + + function nextMonth() { + return value.clone().add(1, 'month'); + } return (

Мои отчеты

- {/*
*/} - {/* */} - {/* setValue(prevMonth())}>{prevMonth().format('MMMM')}*/} - {/*
*/} - {/*
*/} - {/* */} - {/* setValue(nextMonth())}>{nextMonth().format('MMMM')}*/} - {/*
*/} +
+ + { + setValueHandler(prevMonth()) + dispatch(setRequestDate(getReports(prevMonth()))) + }}> + {prevMonth().format('MMMM')} + +
+
+ + { + setValueHandler(nextMonth()) + dispatch(setRequestDate(getReports(nextMonth()))) + + }}> + {nextMonth().format('MMMM')} + +
@@ -115,5 +126,5 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
) -} +}) diff --git a/src/redux/reportSlice.js b/src/redux/reportSlice.js index 840001f6..15036e0d 100644 --- a/src/redux/reportSlice.js +++ b/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;