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,22 +104,24 @@ export const ProfileCalendarComponent = React.memo(
     }
 
     function reportsByDate(start, end) {
-        const requestDates = `fromDate=${getCorrectYYMMDD(start)}&toDate=${getCorrectYYMMDD(end)}`
-        apiRequest(
-            `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
-                "cardId"
-            )}`
-        ).then((reports) => {
-            let spendTime = 0;
-            for (const report of reports) {
-                report.task.map((task) => {
-                    if (task.hours_spent) {
-                        spendTime += Number(task.hours_spent);
-                    }
-                });
+      const requestDates = `fromDate=${getCorrectYYMMDD(
+        start
+      )}&toDate=${getCorrectYYMMDD(end)}`;
+      apiRequest(
+        `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
+          "cardId"
+        )}`
+      ).then((reports) => {
+        let spendTime = 0;
+        for (const report of reports) {
+          report.task.map((task) => {
+            if (task.hours_spent) {
+              spendTime += Number(task.hours_spent);
             }
-            setTotalRangeHours(spendTime)
-        })
+          });
+        }
+        setTotalRangeHours(spendTime);
+      });
     }
 
     return (
@@ -201,27 +205,38 @@ export const ProfileCalendarComponent = React.memo(
             )}
           </div>
         </div>
-        <div className='selectDateRange'>
-            <span className='select' onClick={() => {setDatePickerOpen(!datePickerOpen)}}>
-                {endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : 'Выбрать диапазон'}
-            </span>
-            <DatePicker
-                selected={startDate}
-                open={datePickerOpen}
-                startDate={startDate}
-                endDate={endDate}
-                onChange={(dates) => {
-                    const [start, end] = dates;
-                    setStartDate(start);
-                    setEndDate(end);
-                    if (end) {
-                        setDatePickerOpen(false)
-                        reportsByDate(start, end)
-                    }
-                }}
-                selectsRange
-            />
-            <span>{totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : '0 часов'}</span>
+        <div className="selectDateRange">
+          <span
+            className="select"
+            onClick={() => {
+              setDatePickerOpen(!datePickerOpen);
+            }}
+          >
+            {endDate
+              ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
+              : "Выбрать диапазон"}
+          </span>
+          <DatePicker
+            selected={startDate}
+            open={datePickerOpen}
+            startDate={startDate}
+            endDate={endDate}
+            onChange={(dates) => {
+              const [start, end] = dates;
+              setStartDate(start);
+              setEndDate(end);
+              if (end) {
+                setDatePickerOpen(false);
+                reportsByDate(start, end);
+              }
+            }}
+            selectsRange
+          />
+          <span>
+            {totalRangeHours
+              ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
+              : "0 часов"}
+          </span>
         </div>
         {shortReport && <ShortReport />}
       </div>