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 (