reports date range

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -1,6 +1,9 @@
+import ru from "date-fns/locale/ru";
 import moment from "moment";
 import "moment/locale/ru";
 import React, { useEffect, useState } from "react";
+import DatePicker, { registerLocale } from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 
@@ -9,25 +12,25 @@ import {
   setRequestDate,
   setSendRequest,
 } from "@redux/reportSlice";
-import DatePicker, { registerLocale } from "react-datepicker";
-import ru from "date-fns/locale/ru";
-import "react-datepicker/dist/react-datepicker.css";
+
+import { getCorrectYYMMDD } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
 
 import "@components/Calendar/calendarComponent.scss";
 import {
-  getCorrectDate,
   calendarHelper,
   currentMonthAndDay,
+  getCorrectDate,
   getReports,
   hourOfNum,
 } from "@components/Calendar/calendarHelper";
-import { getCorrectYYMMDD } from "@utils/helper";
 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 { apiRequest } from "@api/request";
+
 registerLocale("ru", ru);
 
 // eslint-disable-next-line react/display-name
@@ -42,8 +45,7 @@ export const ProfileCalendarComponent = React.memo(
     const [startDate, setStartDate] = useState(new Date());
     const [endDate, setEndDate] = useState(null);
     const [datePickerOpen, setDatePickerOpen] = useState(false);
-    const [totalRangeHours, setTotalRangeHours] = useState(0)
-
+    const [totalRangeHours, setTotalRangeHours] = useState(0);
 
     useEffect(() => {
       setCalendar(calendarHelper(value));
@@ -102,7 +104,9 @@ export const ProfileCalendarComponent = React.memo(
     }
 
     function reportsByDate(start, end) {
-        const requestDates = `fromDate=${getCorrectYYMMDD(start)}&toDate=${getCorrectYYMMDD(end)}`
+      const requestDates = `fromDate=${getCorrectYYMMDD(
+        start
+      )}&toDate=${getCorrectYYMMDD(end)}`;
       apiRequest(
         `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
           "cardId"
@@ -116,8 +120,8 @@ export const ProfileCalendarComponent = React.memo(
             }
           });
         }
-            setTotalRangeHours(spendTime)
-        })
+        setTotalRangeHours(spendTime);
+      });
     }
 
     return (
@@ -201,9 +205,16 @@ export const ProfileCalendarComponent = React.memo(
             )}
           </div>
         </div>
-        <div className='selectDateRange'>
-            <span className='select' onClick={() => {setDatePickerOpen(!datePickerOpen)}}>
-                {endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : 'Выбрать диапазон'}
+        <div className="selectDateRange">
+          <span
+            className="select"
+            onClick={() => {
+              setDatePickerOpen(!datePickerOpen);
+            }}
+          >
+            {endDate
+              ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
+              : "Выбрать диапазон"}
           </span>
           <DatePicker
             selected={startDate}
@@ -215,13 +226,17 @@ export const ProfileCalendarComponent = React.memo(
               setStartDate(start);
               setEndDate(end);
               if (end) {
-                        setDatePickerOpen(false)
-                        reportsByDate(start, end)
+                setDatePickerOpen(false);
+                reportsByDate(start, end);
               }
             }}
             selectsRange
           />
-            <span>{totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : '0 часов'}</span>
+          <span>
+            {totalRangeHours
+              ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
+              : "0 часов"}
+          </span>
         </div>
         {shortReport && <ShortReport />}
       </div>