From a10bb5a51cdb978fdfb6b34d3c28243396677f41 Mon Sep 17 00:00:00 2001 From: Olegopolonets <54370738+Olegopolonets@users.noreply.github.com> Date: Sun, 24 Mar 2024 12:36:32 +0200 Subject: [PATCH 1/3] change baseURL --- src/api/api.js | 3 ++- .../CalendarElement/CalendarElement.jsx | 18 +++++++++++++++++- src/components/TodayElement/TodayElement.jsx | 2 +- src/store/water/operations.js | 12 ++++++++++++ src/store/water/selectors.js | 2 ++ src/store/water/waterSlice.js | 6 +++++- 6 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index e6bd99d..8cfea44 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -1,5 +1,6 @@ import axios from 'axios'; export const api = axios.create({ - baseURL: 'https://byte-water-back.onrender.com/api', + // baseURL: 'https://byte-water-back.onrender.com/api', + baseURL: 'http://localhost:4000/api', }); diff --git a/src/components/CalendarElement/CalendarElement.jsx b/src/components/CalendarElement/CalendarElement.jsx index 12c4cc4..b471560 100644 --- 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,6 +23,7 @@ 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(); @@ -29,9 +31,11 @@ const CalendarElement = () => { 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,7 +118,6 @@ 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; @@ -118,6 +125,15 @@ const CalendarElement = () => { }); } // + console.log(monthWaterData); + useEffect(() => { + const date = new Date(); + const month = date.getMonth() + 1; + const year = date.getFullYear(); + + dispatch(fetchMonthWaterThunk({ year, month })); + }, [dispatch]); + return ( diff --git a/src/components/TodayElement/TodayElement.jsx b/src/components/TodayElement/TodayElement.jsx index 521d4fb..f6fb5eb 100644 --- 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/store/water/operations.js b/src/store/water/operations.js index 9e131dd..891518c 100644 --- 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 index 474e4ee..6629c72 100644 --- 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 index 302b984..feed685 100644 --- a/src/store/water/waterSlice.js +++ b/src/store/water/waterSlice.js @@ -1,5 +1,5 @@ import { createSlice } from '@reduxjs/toolkit'; -import { fetchAllWaterThunk } from './operations'; +import { fetchAllWaterThunk, fetchMonthWaterThunk } from './operations'; const waterSlice = createSlice({ name: 'waterSlice', @@ -17,6 +17,7 @@ const waterSlice = createSlice({ isLoading: false, waterTodayList: [], waterPercentageToday: 0, + monthWaterData: [], }, reducers: { changeModalClose: (state, { payload }) => { @@ -75,6 +76,9 @@ const waterSlice = createSlice({ }) .addCase(fetchAllWaterThunk.rejected, (state, { payload }) => { state.error = payload; + }) + .addCase(fetchMonthWaterThunk.fulfilled, (state, { payload }) => { + state.monthWaterData = payload; }); }, }); From f51147d6fba428843b48c1bd0b73ad0aac5bdbe5 Mon Sep 17 00:00:00 2001 From: Olegopolonets <54370738+Olegopolonets@users.noreply.github.com> Date: Sun, 24 Mar 2024 13:09:34 +0200 Subject: [PATCH 2/3] add styles for darkTheme --- src/api/api.js | 4 ++-- src/components/Header/ThemeStyled/Theme.styled.jsx | 7 +++++++ src/components/TodayElement/TodayElement.styled.js | 8 ++++---- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index 8cfea44..d7458f0 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -1,6 +1,6 @@ import axios from 'axios'; export const api = axios.create({ - // baseURL: 'https://byte-water-back.onrender.com/api', - baseURL: 'http://localhost:4000/api', + baseURL: 'https://byte-water-back.onrender.com/api', + // baseURL: 'http://localhost:4000/api', }); diff --git a/src/components/Header/ThemeStyled/Theme.styled.jsx b/src/components/Header/ThemeStyled/Theme.styled.jsx index 9b4e875..88c6799 100644 --- 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 = { @@ -65,6 +66,9 @@ export const darkTheme = { dayStylesDayBackground: '#1c1d26;', dayStylesDayPercentage: '#2f3875;;', + borderBottomForToday: '1px solid #2A3052', + backgroundColorScroll: '#2F3875', + backgroundTrackScroll: '#2A3052', }; export const lightTheme = { @@ -102,4 +106,7 @@ export const lightTheme = { dayStylesDayBackground: '#fff;', dayStylesDayPercentage: '#9ebbff;', + borderBottomForToday: '1px solid #d7e3ff', + backgroundColorScroll: '#9ebbff', + backgroundTrackScroll: '#d7e3ff', }; diff --git a/src/components/TodayElement/TodayElement.styled.js b/src/components/TodayElement/TodayElement.styled.js index 3c85141..4bd9b58 100644 --- a/src/components/TodayElement/TodayElement.styled.js +++ b/src/components/TodayElement/TodayElement.styled.js @@ -29,12 +29,12 @@ 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}; } `; @@ -42,7 +42,8 @@ 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; From 263a0a569f2f77d05127ebc5d985af3b2087b016 Mon Sep 17 00:00:00 2001 From: Olegopolonets <54370738+Olegopolonets@users.noreply.github.com> Date: Sun, 24 Mar 2024 15:00:53 +0200 Subject: [PATCH 3/3] add corect baseURL --- src/api/api.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/api/api.js b/src/api/api.js index d7458f0..e6bd99d 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -2,5 +2,4 @@ import axios from 'axios'; export const api = axios.create({ baseURL: 'https://byte-water-back.onrender.com/api', - // baseURL: 'http://localhost:4000/api', });