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

Fix bug calendar
Elizabethhub · Mar 25, 2024 · 30811a7 · 30811a7
2 parents ca0fed3 + c45dd7d
commit 30811a7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/components/CalendarElement/CalendarElement.jsx b/src/components/CalendarElement/CalendarElement.jsx
@@ -13,6 +13,7 @@ import DaysGeneralStats from '../DaysGeneralStats/DaysGeneralStats';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   selectMonthWaterData,
+  selectorWaterInfo,
   showDaysGenStats,
 } from '../../store/water/selectors.js';
 import { changeShowDaysStats } from '../../store/water/waterSlice';
@@ -28,6 +29,8 @@ const CalendarElement = () => {
   const [currentDate, setCurrentDate] = useState(new Date());
   const [chosenDay, setChosenDay] = useState(0);
   const hero = useSelector(selectUser);
+  const percentageToday = useSelector(selectorWaterInfo);
+  const thisToday = new Date();
 
   const changeMonth = (direction) => {
     setCurrentDate((prevDate) => {
@@ -137,6 +140,10 @@ const CalendarElement = () => {
     }
   }
 
+  function correctPercentage(percentage) {
+    return percentage >= 100 ? 100 : percentage || 0;
+  }
+
   return (
     <>
       {monthWaterData && (
@@ -174,16 +181,19 @@ const CalendarElement = () => {
                   <DayStyles
                     key={item.day}
                     $percentage={item.waterVolPercentage}
+                    $percentageToday={percentageToday}
                     className={`li-day ${isToday(item.day) ? 'today' : ''}`}
                   >
                     <span className="day">{item.day}</span>
                     <span className="percentage">
-                      {item?.waterVolPercentage >= 100
-                        ? 100
-                        : item?.waterVolPercentage || 0}
+                      {thisToday.getDate() === item.day &&
+                      thisToday.getMonth() + 1 === month
+                        ? correctPercentage(percentageToday)
+                        : correctPercentage(item?.waterVolPercentage) || 0}
                       %
                     </span>
                   </DayStyles>
+
                   {showDaysStats && item.day === chosenDay && (
                     <DaysGeneralStats
                       monthWaterData={monthWaterData}

diff --git a/src/components/CalendarElement/CalendarElement.styled.js b/src/components/CalendarElement/CalendarElement.styled.js
@@ -83,6 +83,12 @@ export const DayStyles = styled.li`
   &.today {
     span.day {
       font-weight: 900;
+      border: ${({ $percentageToday }) =>
+        $percentageToday < 100 || $percentageToday?.length === 0
+          ? '1px solid #FF9D43'
+          : 'none'};
+      border: ${({ $percentageToday }) =>
+        $percentageToday >= 100 ? '1px solid #407bff' : ''};
     }
   }
 
@@ -110,7 +116,7 @@ export const DayStyles = styled.li`
         ? '1px solid #FF9D43'
         : 'none'};
     border: ${({ $percentage }) =>
-      $percentage > 100 ? '1px solid #407bff' : ''};
+      $percentage >= 100 ? '1px solid #407bff' : ''};
 
     font-size: 14px;
     line-height: 1.29;