Merge pull request #93 from Elizabethhub/fix-bug-correct-position-stats

Fix bug correct position stats
Elizabethhub · Mar 24, 2024 · e758d60 · e758d60
2 parents 85ee031 + 3ca48ac
commit e758d60
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 9 deletions.
diff --git a/src/components/CalendarElement/CalendarElement.jsx b/src/components/CalendarElement/CalendarElement.jsx
@@ -12,6 +12,7 @@ import ArrowRightCalendarSvg from '../../images/svg/svgCalendar/ArrowRightCalend
 import DaysGeneralStats from '../DaysGeneralStats/DaysGeneralStats';
 import { useDispatch, useSelector } from 'react-redux';
 import {
+  selectMonthWaterData,
   selectorWaterInfo,
   selectorWaterToday,
   showDaysGenStats,
@@ -22,16 +23,19 @@ import {
 } from '../../store/water/waterSlice';
 import { selectDailyWater, selectUser } from '../../store/auth/selectors.js';
 import { useTranslation } from 'react-i18next';
+import { fetchMonthWaterThunk } from '../../store/water/operations.js';
 
 const CalendarElement = () => {
   const { t } = useTranslation();
   const showDaysStats = useSelector(showDaysGenStats);
   const userDailyWater = useSelector(selectDailyWater);
   const waterTodayList = useSelector(selectorWaterToday);
   const currentDayPercent = useSelector(selectorWaterInfo);
+  const monthWaterData = useSelector(selectMonthWaterData);
   const hero = useSelector(selectUser);
   const dispatch = useDispatch();
   const [currentDate, setCurrentDate] = useState(new Date());
+  const [chosenDay, setChosenDay] = useState(0);
 
   const changeMonth = (direction) => {
     setCurrentDate((prevDate) => {
@@ -65,6 +69,10 @@ const CalendarElement = () => {
     );
   };
 
+  // if (el.date) {
+  // } else {
+  // }
+
   function closeDayStat(event) {
     const element = event.target;
     const parent = element.parentNode;
@@ -110,14 +118,22 @@ const CalendarElement = () => {
   //
   const spans = document.querySelectorAll('li > .day');
 
-  const [chosenDay, setChosenDay] = useState(0);
   for (const span of spans) {
     span.addEventListener('click', function () {
       const value = this.textContent;
       setChosenDay(value);
     });
   }
   //
+  console.log(monthWaterData);
+  useEffect(() => {
+    const date = new Date();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+
+    dispatch(fetchMonthWaterThunk({ year, month }));
+  }, [dispatch]);
+
   return (
     <ContentWrapperCalendar>
       <HeadingWrapper>

diff --git a/src/components/Header/ThemeStyled/Theme.styled.jsx b/src/components/Header/ThemeStyled/Theme.styled.jsx
@@ -30,6 +30,7 @@ export const ThemeStyledButton = styled.button`
   background: ${(props) => props.theme.modalCantainerBackground};
   background: ${(props) => props.theme.dayStylesDayBackground};
   box-shadow: ${(props) => props.theme.modalCantainerBoxShadow};
+  box-shadow: ${(props) => props.theme.backgroundTrackScroll};
 `;
 
 export const darkTheme = {
@@ -64,8 +65,10 @@ export const darkTheme = {
   modalCantainerBoxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.2);',
 
   dayStylesDayBackground: '#1c1d26;',
-  dayStylesDayPercentage: '#2f3875;',
-
+  dayStylesDayPercentage: '#2f3875;;',
+  borderBottomForToday: '1px solid #2A3052',
+  backgroundColorScroll: '#2F3875',
+  backgroundTrackScroll: '#2A3052',
   inputOnlyColor: '--input-dark',
   inputColorText: '--input-color-dark',
   inputTheme: '1px solid #2f3875',
@@ -107,6 +110,10 @@ export const lightTheme = {
   dayStylesDayBackground: '#fff;',
   dayStylesDayPercentage: '#9ebbff;',
 
+  borderBottomForToday: '1px solid #d7e3ff',
+  backgroundColorScroll: '#9ebbff',
+  backgroundTrackScroll: '#d7e3ff',
+
   inputOnlyColor: '--primary-mediumblue',
   inputColorText: '--primary-blue',
   inputTheme: '1px solid var(--primary-mediumblue)',

diff --git a/src/components/TodayElement/TodayElement.jsx b/src/components/TodayElement/TodayElement.jsx
@@ -47,7 +47,7 @@ const TodayElement = () => {
 
   const sortedWaterTodayList = waterTodayList
     .slice()
-    .map((item) => ({ ...item, time: new Date(item.time) })) 
+    .map((item) => ({ ...item, time: new Date(item.time) }))
     .sort((a, b) => a.time - b.time);
 
   return (

diff --git a/src/components/TodayElement/TodayElement.styled.js b/src/components/TodayElement/TodayElement.styled.js
@@ -29,20 +29,21 @@ export const StyledList = styled.ul`
     margin-left: 10px;
   }
   &::-webkit-scrollbar-thumb {
-    background-color: #9ebbff;
+    background-color: ${(props) => props.theme.backgroundColorScroll};
     border-radius: 8px;
   }
 
   &::-webkit-scrollbar-track {
-    background-color: #d7e3ff;
+    background-color: ${(props) => props.theme.backgroundTrackScroll};
   }
 `;
 
 export const ListItem = styled.li`
   display: flex;
   justify-content: space-between;
   padding: 10px 5px 12px 0;
-  border-bottom: 1px solid #d7e3ff;
+  border-bottom: ${(props) => props.theme.borderBottomForToday};
+  /* 2A3052 */
 `;
 
 export const InfoWrapper = styled.div`
@@ -89,7 +90,6 @@ export const AddBtnWrapper = styled.div`
   padding: 12px 0;
   display: flex;
   justify-content: start;
-  border-top: 1px solid #d7e3ff;
 
   button {
     display: flex;

diff --git a/src/store/water/operations.js b/src/store/water/operations.js
@@ -60,3 +60,15 @@ export const editDailyNormaThunk = createAsyncThunk(
     }
   }
 );
+
+export const fetchMonthWaterThunk = createAsyncThunk(
+  'water/getMonthWater',
+  async ({ year, month }, thunkApi) => {
+    try {
+      const { data } = await api.get(`water/month?year=${year}&month=${month}`);
+      return data;
+    } catch (error) {
+      return thunkApi.rejectWithValue(error.message);
+    }
+  }
+);
diff --git a/src/store/water/selectors.js b/src/store/water/selectors.js
@@ -13,3 +13,5 @@ export const selectorWaterToday = (state) => state.waterSlice.waterTodayList;
 
 export const selectorWaterInfo = (state) =>
   state.waterSlice.waterPercentageToday;
+
+export const selectMonthWaterData = (state) => state.waterSlice?.monthWaterData;
diff --git a/src/store/water/waterSlice.js b/src/store/water/waterSlice.js
@@ -1,5 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { editDailyNormaThunk, fetchAllWaterThunk } from './operations';
+import {
+  fetchAllWaterThunk,
+  fetchMonthWaterThunk,
+  editDailyNormaThunk,
+} from './operations';
 
 const waterSlice = createSlice({
   name: 'waterSlice',
@@ -17,6 +21,7 @@ const waterSlice = createSlice({
     isLoading: false,
     waterTodayList: [],
     waterPercentageToday: 0,
+    monthWaterData: [],
   },
   reducers: {
     changeModalClose: (state, { payload }) => {
@@ -76,6 +81,9 @@ const waterSlice = createSlice({
       .addCase(fetchAllWaterThunk.rejected, (state, { payload }) => {
         state.error = payload;
       })
+      .addCase(fetchMonthWaterThunk.fulfilled, (state, { payload }) => {
+        state.monthWaterData = payload;
+      })
       .addCase(editDailyNormaThunk.rejected, (state, { payload }) => {
         state.error = payload;
       });