calendar range days

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -36,11 +36,16 @@ export const ProfileCalendar = () => {
   const [reports, setReports] = useState([]);
   const [totalHours, setTotalHours] = useState(0);
   const [loader, setLoader] = useState(true);
+  const [startRangeDays, setStartRangeDays] = useState(false);
 
   function setValueHandler(value) {
     setValue(value);
   }
 
+  function toggleStartRangeDays () {
+    setStartRangeDays(!startRangeDays)
+  }
+
   useEffect(() => {
     dispatch(setRequestDate(getReports(moment())));
   }, []);
@@ -115,6 +120,8 @@ export const ProfileCalendar = () => {
                 value={value}
                 reports={reports}
                 totalHours={totalHours}
+                startRangeDays={startRangeDays}
+                toggleRangeDays={toggleStartRangeDays}
               />
             </div>
           </div>

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -31,7 +31,7 @@ import rectangle from "assets/images/rectangle__calendar.png";
 
 // eslint-disable-next-line react/display-name
 export const ProfileCalendarComponent = React.memo(
-  ({ value, setValueHandler, reports, totalHours }) => {
+  ({ value, setValueHandler, reports, totalHours, startRangeDays, toggleRangeDays }) => {
     const dispatch = useDispatch();
 
     const [currentDay] = useState(moment());
@@ -40,7 +40,6 @@ 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 [totalRangeHours, setTotalRangeHours] = useState(0);
     const [selectedRangeDays, setSelectedRangeDays] = useState({});
 
@@ -269,7 +268,7 @@ export const ProfileCalendarComponent = React.memo(
             className="select"
             onClick={() => {
               if (startRangeDays) resetRangeDays();
-              setStartRangeDays(!startRangeDays);
+                toggleRangeDays();
             }}
           >
             {endDate