import React, { useState, useEffect } from "react"; import arrow from "../../images/arrowCalendar.png"; import rectangle from "../../images/rectangle__calendar.png"; import calendarIcon from "../../images/calendar_icon.png"; import moment from "moment"; import { calendarHelper, currentMonthAndDay, getReports, hourOfNum, } from "../Calendar/calendarHelper"; import { setReportDate, setRequestDate, setSendRequest, } from "../../redux/reportSlice"; import { useDispatch } from "react-redux"; import { Link } from "react-router-dom"; import ShortReport from "../ShortReport/ShortReport"; import "moment/locale/ru"; import "./../Calendar/calendarComponent.scss"; export const ProfileCalendarComponent = React.memo( ({ value, setValueHandler, reports, totalHours }) => { const dispatch = useDispatch(); const [currentDay] = useState(moment()); const [calendar, setCalendar] = useState([]); const [month, setMonth] = useState(""); const [dayReport, setDayReport] = useState(""); const [shortReport, setShortReport] = useState(false); useEffect(() => { setCalendar(calendarHelper(value)); }, [value]); useEffect(() => { setMonth(value.format("MMMM")); }, [month]); function isToday(day) { return day.isSame(new Date(), "day"); } function correctDay(day) { if (day < 10) { return `0${day}`; } return day; } function dayStyles(day) { 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`; } } if (day.day() === 6 || day.day() === 0) return `selected`; if (isToday(day)) return `today`; return "pass"; } function correctRoute(day) { 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/${day}`; } } return "../../report"; } function prevMonth() { return value.clone().subtract(1, "month"); } function nextMonth() { return value.clone().add(1, "month"); } return (

Мои отчеты:

{month}  {totalHours} {hourOfNum(totalHours)}{" "}

{ setValueHandler(prevMonth()); dispatch(setRequestDate(getReports(prevMonth()))); }} > {prevMonth().format("MMMM")}
{value.format("YYYY")}
{ setValueHandler(nextMonth()); dispatch(setRequestDate(getReports(nextMonth()))); }} > {nextMonth().format("MMMM")}

Пн

Вт

Ср

Чт

Пт

Сб

Вс

{calendar.map((week) => week.map((day) => ( )) )}
{shortReport && ( )} {shortReport && }
); } );