fix hour calculation and report form

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -41,18 +41,6 @@ export const ProfileCalendar = () => {
   const [startRangeDays, setStartRangeDays] = useState(false);
   const [startDate, setStartDate] = useState(null);
 
-  function setValueHandler(value) {
-    setValue(value);
-  }
-
-  function setStartDateRange(date) {
-    setStartDate(date);
-  }
-
-  function toggleStartRangeDays() {
-    setStartRangeDays(!startRangeDays);
-  }
-
   useEffect(() => {
     dispatch(setRequestDate(getReports(moment())));
   }, []);
@@ -68,14 +56,19 @@ export const ProfileCalendar = () => {
       )}`
     ).then((reports) => {
       let spendTime = 0;
-      for (const report of reports) {
-        report.task.map((task) => {
-          if (task.hours_spent) {
-            spendTime += Number(task.hours_spent);
-          }
+      
+      reports
+        .filter(
+          (item) => new Date(item.created_at).getMonth() === value.month()
+        )
+        .map((report) => {
+          spendTime += report.task.reduce(
+            (acc, task) => acc + task.hours_spent,
+            0
+          );
         });
-      }
-      setTotalHours(spendTime);
+
+      setTotalHours(Math.floor(spendTime));
       setReports(reports);
       setLoader(false);
     });
@@ -124,14 +117,14 @@ export const ProfileCalendar = () => {
           <div className="row calendar__wrapper">
             <div className="col-12 col-xl-12">
               <ProfileCalendarComponent
-                setValueHandler={setValueHandler}
+                setValueHandler={(value) => setValue(value)}
                 value={value}
                 reports={reports}
                 totalHours={totalHours}
                 startRangeDays={startRangeDays}
-                toggleRangeDays={toggleStartRangeDays}
+                toggleRangeDays={() => setStartRangeDays(!startRangeDays)}
                 startDate={startDate}
-                setStartDateRange={setStartDateRange}
+                setStartDateRange={(date) => setStartDate(date)}
               />
             </div>
           </div>

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -20,7 +20,8 @@ import {
   currentMonthAndDay,
   getCorrectDate,
   getReports,
-  hourOfNum
+  hourOfNum,
+  correctDay
 } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import ShortReport from "@components/ShortReport/ShortReport";
@@ -30,7 +31,6 @@ import calendarIcon from "assets/icons/calendar.svg";
 // 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(
   ({
     value,
@@ -44,7 +44,6 @@ export const ProfileCalendarComponent = React.memo(
   }) => {
     const dispatch = useDispatch();
 
-    const [currentDay] = useState(moment());
     const [calendar, setCalendar] = useState([]);
     const [month, setMonth] = useState("");
     const [shortReport, setShortReport] = useState(false);
@@ -74,15 +73,8 @@ export const ProfileCalendarComponent = React.memo(
       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`;
+      if (moment() < day) return `block`;
       for (const date of reports) {
         if (
           `${new Date(day).getFullYear()}-${correctDay(
@@ -110,13 +102,9 @@ export const ProfileCalendarComponent = React.memo(
       return "../../report";
     }
 
-    function prevMonth() {
-      return value.clone().subtract(1, "month");
-    }
+    const prevMonth = () => value.clone().subtract(1, "month");
 
-    function nextMonth() {
-      return value.clone().add(1, "month");
-    }
+    const nextMonth = () => value.clone().add(1, "month");
 
     function reportsByDate(endDay) {
       const requestDates =
@@ -133,25 +121,16 @@ export const ProfileCalendarComponent = React.memo(
         )}`
       ).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);
+        reports.map((report) => {
+          spendTime += report.task.reduce(
+            (acc, task) => acc + task.hours_spent,
+            0
+          );
+        });
+        setTotalRangeHours(Math.floor(spendTime));
       });
     }
 
-    function toggleActivePeriod() {
-      if (!activePeriod) {
-        setActivePeriod(true);
-      } else {
-        setActivePeriod(false);
-      }
-    }
-
     function rangeDays(day) {
       if (!startDate) {
         setStartDateRange(day);
@@ -308,7 +287,7 @@ export const ProfileCalendarComponent = React.memo(
             onClick={() => {
               if (startRangeDays) resetRangeDays();
               toggleRangeDays();
-              toggleActivePeriod();
+              setActivePeriod(!activePeriod);
             }}
           >
             {endDate
@@ -331,7 +310,7 @@ export const ProfileCalendarComponent = React.memo(
               styles={"clear-days"}
               onClick={() => {
                 resetRangeDays();
-                toggleActivePeriod();
+                setActivePeriod(false);
                 toggleRangeDays();
               }}
             >