Merge pull request #99 from Elizabethhub/fix-bug-calendar

Fix bug calendar
Elizabethhub · Mar 25, 2024 · 5e3e6ef · 5e3e6ef
2 parents e5f2978 + adab055
commit 5e3e6ef
Showing 1 changed file with 31 additions and 5 deletions.
diff --git a/src/components/CalendarElement/CalendarElement.jsx b/src/components/CalendarElement/CalendarElement.jsx
@@ -88,7 +88,6 @@ const CalendarElement = () => {
     closeDayStat(event);
   });
 
-  //
   const spans = document.querySelectorAll('li > .day');
 
   for (const span of spans) {
@@ -97,8 +96,8 @@ const CalendarElement = () => {
       setChosenDay(Number(value));
     });
   }
-  //
-  console.log(monthWaterData);
+
+  // console.log(monthWaterData);
   useEffect(() => {
     const date = new Date();
     const month = date.getMonth() + 1;
@@ -107,14 +106,41 @@ const CalendarElement = () => {
     dispatch(fetchMonthWaterThunk({ year, month }));
   }, [dispatch]);
 
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
+  const [year, setYear] = useState(new Date().getFullYear());
+
+  useEffect(() => {
+    dispatch(fetchMonthWaterThunk({ year, month }));
+  }, [dispatch, month, year]);
+
+  function changeMonthQuery(direction) {
+    changeMonth(direction);
+
+    if (direction === 'forward') {
+      if (month >= 12) {
+        setMonth(1);
+        setYear(year + 1);
+      } else {
+        setMonth(month + 1);
+      }
+    } else {
+      if (month <= 1) {
+        setMonth(12);
+        setYear(year - 1);
+      } else {
+        setMonth(month - 1);
+      }
+    }
+  }
+
   return (
     <ContentWrapperCalendar>
       <HeadingWrapper>
         <MonthHeading>{t('month')}</MonthHeading>
         <MonthSwitcher>
           <button
             className="arrow"
-            onClick={() => changeMonth('back')}
+            onClick={() => changeMonthQuery('back')}
             type="button"
           >
             <ArrowLeftCalendarSvg />
@@ -125,7 +151,7 @@ const CalendarElement = () => {
           </p>
           <button
             className="arrow"
-            onClick={() => changeMonth('forward')}
+            onClick={() => changeMonthQuery('forward')}
             type="button"
           >
             <ArrowRightCalendarSvg />