Merge pull request #66 from Elizabethhub/feature-todayList

feature fetchAllWaterThunk in TodayElement

src/components/ModalAddWater/ModalAddWater.jsx

@@ -16,7 +16,10 @@ import 'react-datepicker/dist/react-datepicker.css';
 import useCounter from '../../hooks/modalHandleUpdate.js';
 import { useDispatch } from 'react-redux';
 import { addWaterThunk } from '../../store/water/operations.js';
-import { changeModalClose } from '../../store/water/waterSlice.js';
+import {
+  changeModalClose,
+  changeTodayList,
+} from '../../store/water/waterSlice.js';
 import { toast } from 'react-toastify';
 
 const ModalAddWater = () => {
@@ -27,14 +30,23 @@ const ModalAddWater = () => {
 
   const onSubmit = (e) => {
     e.preventDefault();
+
+    // const currentTime = new Date();
+
     const water = {
       milliliters: e.target.elements.value.value,
-      time,
+      time: time,
     };
+
+    // const water = {
+    //   milliliters: e.target.elements.value.value,
+    //   time,
+    // };
     dispatch(addWaterThunk(water))
       .unwrap()
       .then(() => {
         dispatch(changeModalClose(false));
+        dispatch(changeTodayList({ ...water, _id: crypto.randomUUID() }));
         toast.success('Water note was successfuly added');
       })
       .catch((error) => {

src/components/TodayElement/TodayElement.jsx

@@ -18,33 +18,51 @@ import {
   changeModalDeleteForm,
   changeModalEditForm,
 } from '../../store/water/waterSlice';
-import { modalDeleteOpen } from '../../store/water/selectors';
+import {
+  modalDeleteOpen,
+  selectorWaterToday,
+} from '../../store/water/selectors.js';
 import ModalDeleteWater from '../ModalDeleteWater/ModalDeleteWater.jsx';
+import { useEffect } from 'react';
+import { fetchAllWaterThunk } from '../../store/water/operations.js';
+import { selectUser } from '../../store/auth/selectors.js';
 
 const TodayElement = () => {
   const isModalOpen = useSelector(modalDeleteOpen);
+  const isUser = useSelector(selectUser);
+
+  const waterTodayList = useSelector(selectorWaterToday);
 
   const dispatch = useDispatch();
 
-  let waterArr = [
-    { id: 1, amount: 250, hours: '11:00' },
-    { id: 2, amount: 350, hours: '10:00' },
-    { id: 3, amount: 200, hours: '11:00' },
-    { id: 4, amount: 150, hours: '10:00' },
-  ];
+  useEffect(() => {
+    if (isUser) {
+      dispatch(fetchAllWaterThunk());
+    }
+  }, [dispatch, isUser]);
+
+  function formatDate(date) {
+    if (date) {
+      const newDate = new Date(date);
+      const hour = newDate.getHours();
+      const minute = newDate.getMinutes();
+      return `${hour}:${minute}`;
+    }
+  }
 
   return (
     <>
       <ListWrapper>
         <h2>Today</h2>
         <StyledList>
-          {waterArr.map((item) => {
+          {waterTodayList.map((item) => {
             return (
-              <ListItem key={item.id}>
+              <ListItem id={item._id} key={item._id}>
                 <InfoWrapper>
                   <SvgGlass />
-                  <Amount>{item.amount} ml</Amount>
-                  <Time>{item.hours} PM</Time>
+                  <Amount>{item.milliliters} ml</Amount>
+                  <Time>{formatDate(item.time)} PM</Time>
+                  {/* <Time>{console.log(item.time)} PM</Time> */}
                 </InfoWrapper>
                 <BtnWrapper>
                   <div

src/store/store.js

@@ -31,7 +31,20 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: {
-        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+        ignoredActions: [
+          FLUSH,
+          REHYDRATE,
+          PAUSE,
+          PERSIST,
+          PURGE,
+          REGISTER,
+          'waterSlice/changeTodayList',
+        ],
+
+        // Ignore these field paths in all actions
+        ignoredActionPaths: ['meta.arg', 'payload.time'],
+        // Ignore these paths in the state
+        ignoredPaths: ['waterSlice.waterTodayList'],
       },
     }),
 });

src/store/water/operations.js

@@ -18,7 +18,6 @@ export const fetchAllWaterThunk = createAsyncThunk(
   async (_, thunkApi) => {
     try {
       const { data } = await api.get('water/');
-      console.log(data);
       return data;
     } catch (error) {
       return thunkApi.rejectWithValue(error.message);

src/store/water/selectors.js

@@ -9,3 +9,5 @@ export const modalIsDelete = (state) => state.waterSlice.modal?.modalDeleteForm;
 
 export const showDaysGenStats = (state) => state.waterSlice.daysGenStats;
 export const dayNorma = (state) => state.waterSlice.dayNorma;
+
+export const selectorWaterToday = (state) => state.waterSlice.waterTodayList;

src/store/water/waterSlice.js

@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { fetchAllWaterThunk } from './operations';
 
 const waterSlice = createSlice({
   name: 'waterSlice',
@@ -15,6 +16,7 @@ const waterSlice = createSlice({
     daysGenStats: false,
     dayNorma: 1.5,
     isLoading: false,
+    waterTodayList: [],
   },
   reducers: {
     changeModalClose: (state, { payload }) => {
@@ -48,9 +50,18 @@ const waterSlice = createSlice({
     changeDayNorma: (state, { payload }) => {
       state.dayNorma = payload;
     },
-    // extraReducers: (builder) => {
-    //   // builder.addCase();
-    // },
+    changeTodayList: (state, { payload }) => {
+      state.waterTodayList.push(payload);
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchAllWaterThunk.fulfilled, (state, { payload }) => {
+        state.waterTodayList.push(...payload);
+      })
+      .addCase(fetchAllWaterThunk.rejected, (state, { payload }) => {
+        state.error = payload;
+      });
   },
 });
 export const waterReducer = waterSlice.reducer;
@@ -62,4 +73,5 @@ export const {
   changeModalDeleteForm,
   changeShowDaysStats,
   changeDayNorma,
+  changeTodayList,
 } = waterSlice.actions;