diff --git a/src/components/CalendarElement/CalendarElement.jsx b/src/components/CalendarElement/CalendarElement.jsx index 8799cf4..a8f5a20 100644 --- 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 = () => { {item.day} - {item?.waterVolPercentage >= 100 - ? 100 - : item?.waterVolPercentage || 0} + {thisToday.getDate() === item.day && + thisToday.getMonth() + 1 === month + ? correctPercentage(percentageToday) + : correctPercentage(item?.waterVolPercentage) || 0} % + {showDaysStats && item.day === chosenDay && ( + $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;