guild_front/src/components/ProfileCalendar/ProfileCalendarComponent.js

131 lines
4.5 KiB
JavaScript
Raw Normal View History

2022-12-26 15:12:01 +03:00
import React, { useState, useEffect } from 'react'
2023-02-09 20:46:02 +03:00
import ellipse from '../../images/ellipse.png'
2022-12-26 15:12:01 +03:00
import rectangle from '../../images/rectangle__calendar.png'
import calendarIcon from '../../images/calendar_icon.png'
import moment from 'moment'
2023-02-09 20:46:02 +03:00
import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import {setReportDate, setRequestDate} from '../../redux/reportSlice';
2022-12-26 15:12:01 +03:00
import {useDispatch} from "react-redux";
import {Link} from "react-router-dom";
2023-02-09 20:46:02 +03:00
import 'moment/locale/ru'
2022-12-26 15:12:01 +03:00
import './../Calendar/calendarComponent.scss'
2023-02-09 20:46:02 +03:00
export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => {
2022-12-26 15:12:01 +03:00
const dispatch = useDispatch();
2023-02-09 20:46:02 +03:00
const [currentDay] = useState(moment())
2022-12-26 15:12:01 +03:00
const [calendar, setCalendar] = useState([])
useEffect(() => {
setCalendar(calendarHelper(value))
}, [value])
// function beforeToday(day) {
// return day.isBefore(new Date(), 'day')
// }
function isToday(day) {
return day.isSame(new Date(), 'day')
}
2023-01-16 16:28:56 +03:00
function correctDay(day) {
if (day < 10) {
return `0${day}`
} return day
}
2022-12-26 15:12:01 +03:00
function dayStyles(day) {
2023-02-09 20:46:02 +03:00
if (currentDay < day) return `block`
for (const date of reports) {
2023-01-23 14:59:57 +03:00
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
2022-12-26 15:12:01 +03:00
return `before`
}
}
2023-01-16 16:28:56 +03:00
if (day.day() === 6 || day.day() === 0) return `selected`
2022-12-26 15:12:01 +03:00
if (isToday(day)) return `today`
return 'pass'
}
2023-01-16 16:28:56 +03:00
function correctRoute(day) {
2023-02-09 20:46:02 +03:00
for (const date of reports) {
2023-01-23 14:59:57 +03:00
if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
return `../view`
2023-01-16 16:28:56 +03:00
}
}
2023-01-16 20:38:33 +03:00
return '../../report'
2023-01-16 16:28:56 +03:00
}
2023-02-09 20:46:02 +03:00
function prevMonth() {
return value.clone().subtract(1, 'month')
}
function nextMonth() {
return value.clone().add(1, 'month');
}
2022-12-26 15:12:01 +03:00
return (
<div className='calendar-component'>
<div className='calendar-component__header'>
<h3>Мои отчеты</h3>
2023-02-09 20:46:02 +03:00
<div className='calendar-component__header-box'>
<img src={ellipse} alt='' />
<span onClick={() => {
setValueHandler(prevMonth())
dispatch(setRequestDate(getReports(prevMonth())))
}}>
{prevMonth().format('MMMM')}
</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>
2022-12-26 15:12:01 +03:00
</div>
<div className='calendar-component__rectangle'>
<img src={rectangle} alt='' />
</div>
<div className='calendar-component__body'>
<div>
<p>Пн</p>
<p>Вт</p>
<p>Ср</p>
<p>Чт</p>
<p>Пт</p>
<p>Сб</p>
<p>Вс</p>
</div>
<div className='calendar-component__form'>
{calendar.map((week) =>
week.map((day) => (
<button
onClick={() => {
dispatch(setReportDate(day))
}}
key={day}
className={dayStyles(day)}
name={day.format('dddd')}
id='btn'
>
2023-01-16 20:38:33 +03:00
<Link to={correctRoute(day)}>
2023-01-16 16:28:56 +03:00
<img className={'calendar__icon'} src={calendarIcon} alt='' />
{currentMonthAndDay(day)}
</Link>
2022-12-26 15:12:01 +03:00
</button>
))
)}
</div>
</div>
</div>
)
2023-02-09 20:46:02 +03:00
})
2022-12-26 15:12:01 +03:00