diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 52e6a4a9..abdf03f2 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -26,8 +26,8 @@ import ShortReport from "@components/ShortReport/ShortReport"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import calendarIcon from "assets/icons/calendar.svg"; -import rectangle from "assets/images/rectangle__calendar.png"; import close from "assets/icons/closeProjectPersons.svg"; +import rectangle from "assets/images/rectangle__calendar.png"; // eslint-disable-next-line react/display-name export const ProfileCalendarComponent = React.memo( @@ -40,15 +40,18 @@ export const ProfileCalendarComponent = React.memo( const [shortReport, setShortReport] = useState(false); const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); - const [startRangeDays, setStartRangeDays] = useState(false) + const [startRangeDays, setStartRangeDays] = useState(false); const [totalRangeHours, setTotalRangeHours] = useState(0); - const [selectedRangeDays, setSelectedRangeDays] = useState({}) + const [selectedRangeDays, setSelectedRangeDays] = useState({}); useEffect(() => { setCalendar(calendarHelper(value)); calendarHelper(value).map((array) => { - setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false})) - }) + setSelectedRangeDays((prevState) => ({ + ...prevState, + [array[0]]: false, + })); + }); }, [value]); useEffect(() => { @@ -104,7 +107,9 @@ export const ProfileCalendarComponent = React.memo( } function reportsByDate(endDay) { - const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`; + const requestDates = `fromDate=${getCorrectYYMMDD( + startDate._d + )}&toDate=${getCorrectYYMMDD(endDay._d)}`; apiRequest( `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem( "cardId" @@ -122,34 +127,41 @@ export const ProfileCalendarComponent = React.memo( }); } - function rangeDays (day) { - if (!startDate) { - setStartDate(day) + function rangeDays(day) { + if (!startDate) { + setStartDate(day); + } else { + setEndDate(day); + reportsByDate(day); + } + } + + function onMouseRangeDays(day) { + let selectRange = {}; + for (let curDay in selectedRangeDays) { + if ( + day > startDate && + new Date(curDay) > startDate && + new Date(curDay) < day + ) { + selectRange[curDay] = true; } else { - setEndDate(day) - reportsByDate(day) + selectRange[curDay] = false; } + } + setSelectedRangeDays(selectRange); } - function onMouseRangeDays (day) { - let selectRange = {} - for (let curDay in selectedRangeDays) { - if (day > startDate && new Date(curDay) > startDate && new Date(curDay) < day) { - selectRange[curDay] = true - } else { - selectRange[curDay] = false - } - } - setSelectedRangeDays(selectRange) - } - - function resetRangeDays () { - setStartDate(null) - setEndDate(null) - setTotalRangeHours(0) - calendarHelper(value).map((array) => { - setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false})) - }) + function resetRangeDays() { + setStartDate(null); + setEndDate(null); + setTotalRangeHours(0); + calendarHelper(value).map((array) => { + setSelectedRangeDays((prevState) => ({ + ...prevState, + [array[0]]: false, + })); + }); } return ( @@ -211,27 +223,35 @@ export const ProfileCalendarComponent = React.memo( week.map((day) => (