fix edit and delete logic

Elizabethhub · Mar 21, 2024 · 48a7b82 · 48a7b82
1 parent 330faa0
commit 48a7b82
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 45 deletions.
diff --git a/src/components/ModalDeleteWater/ModalDeleteWater.jsx b/src/components/ModalDeleteWater/ModalDeleteWater.jsx
@@ -1,6 +1,6 @@
 import SvgCross from '../../images/svg/svgModal/SvgCross.jsx';
 import { useDispatch, useSelector } from 'react-redux';
-import { modalDeleteOpen } from '../../store/water/selectors.js';
+import { modalDeleteOpen, modalId } from '../../store/water/selectors.js';
 import { changeModalClose, deleteWater } from '../../store/water/waterSlice.js';
 import { useEffect } from 'react';
 import {
@@ -17,26 +17,26 @@ import useKeyDown from '../../hooks/modalCloseEsc.js';
 import { deleteWaterThunk } from '../../store/water/operations.js';
 import { toast } from 'react-toastify';
 
-const ModalDeleteWater = ({waterItem}) => {
+const ModalDeleteWater = () => {
   const isModalOpen = useSelector(modalDeleteOpen);
+  const id = useSelector(modalId);
 
   const dispatch = useDispatch();
 
   const onSubmit = (e) => {
     e.preventDefault();
 
-    dispatch(deleteWaterThunk(waterItem?._id))
+    dispatch(deleteWaterThunk(id))
       .unwrap()
       .then(() => {
-        // dispatch(deleteWater(waterItem._id))
+        dispatch(deleteWater(id));
         dispatch(changeModalClose(false));
-        // toast.success('Water note was successfully deleted');
+        toast.success('Water note was successfully deleted');
       })
       .catch((error) => {
         toast.error(error);
       });
   };
-  // console.log(waterItem);
 
   const clickBackdrop = useClickBackdrop();
 

diff --git a/src/components/ModalEditWater/ModalEditWater.jsx b/src/components/ModalEditWater/ModalEditWater.jsx
@@ -21,7 +21,7 @@ import useCounter from '../../hooks/modalHandleUpdate.js';
 import { format } from 'date-fns';
 import { useDispatch } from 'react-redux';
 import { editWaterThunk } from '../../store/water/operations.js';
-import { changeModalClose } from '../../store/water/waterSlice.js';
+import { changeModalClose, editWater } from '../../store/water/waterSlice.js';
 import { toast } from 'react-toastify';
 
 const ModalEditWater = ({ waterItem }) => {
@@ -38,13 +38,16 @@ const ModalEditWater = ({ waterItem }) => {
     e.preventDefault();
 
     const updatedWater = {
+      ...waterItem,
       milliliters: parseInt(manualValue),
       time,
     };
+    console.log(waterItem);
 
-    dispatch(editWaterThunk({ id: waterItem?._id, water: updatedWater }))
+    dispatch(editWaterThunk({ id: waterItem?._id, ...updatedWater }))
       .unwrap()
       .then(() => {
+        dispatch(editWater({ id: waterItem?._id, ...updatedWater }));
         dispatch(changeModalClose(false));
         toast.success('Water note was successfully edited');
       })
@@ -65,24 +68,6 @@ const ModalEditWater = ({ waterItem }) => {
     setManualValue(value);
   };
 
-  // const getDisplayValue = () => {
-  //   if (waterItem) {
-  //     switch (valueSource) {
-  //       case 'manual':
-  //         return manualValue
-  //           ? `${manualValue}ml`
-  //           : `${waterItem?.milliliters}ml`;
-  //       case 'counter':
-  //         return `${counter}ml`;
-  //       default:
-  //         return `${waterItem?.milliliters}ml`;
-  //     }
-  //   } else {
-  //     toast.error('This record does not exist');
-  //     return `${counter}ml`;
-  //   }
-  // };
-
   const handleInputBlur = () => {
     setInputFocused(false);
   };

diff --git a/src/components/TodayElement/TodayElement.jsx b/src/components/TodayElement/TodayElement.jsx
@@ -21,7 +21,6 @@ import {
 } from '../../store/water/waterSlice';
 import {
   modalDeleteOpen,
-  modalId,
   selectorWaterToday,
 } from '../../store/water/selectors.js';
 import ModalDeleteWater from '../ModalDeleteWater/ModalDeleteWater.jsx';
@@ -33,7 +32,6 @@ import { format } from 'date-fns';
 const TodayElement = () => {
   const isModalOpen = useSelector(modalDeleteOpen);
   const isUser = useSelector(selectUser);
-  const id = useSelector(modalId);
 
   const waterTodayList = useSelector(selectorWaterToday);
 
@@ -57,7 +55,6 @@ const TodayElement = () => {
                   <SvgGlass />
                   <Amount>{item.milliliters} ml</Amount>
                   <Time>{format(item.time, 'hh:mm a')}</Time>
-                  {/* <Time>{console.log(item.time)} PM</Time> */}
                 </InfoWrapper>
                 <BtnWrapper>
                   <div
@@ -71,6 +68,7 @@ const TodayElement = () => {
                   <div
                     onClick={() => {
                       dispatch(changeModalDeleteForm(true));
+                      dispatch(changeModalId(item._id));
                     }}
                   >
                     <DeleteSvg />
@@ -91,11 +89,7 @@ const TodayElement = () => {
             <span>Add water</span>
           </button>
         </AddBtnWrapper>
-        {isModalOpen && (
-          <ModalDeleteWater
-            waterItem={waterTodayList.find((item) => item._id !== id)}
-          />
-        )}
+        {isModalOpen && <ModalDeleteWater />}
       </ListWrapper>
     </>
   );

diff --git a/src/store/water/operations.js b/src/store/water/operations.js
@@ -27,9 +27,9 @@ export const fetchAllWaterThunk = createAsyncThunk(
 
 export const editWaterThunk = createAsyncThunk(
   'water/editWater',
-  async ({ id, water }, thunkApi) => {
+  async ({ id, milliliters, time }, thunkApi) => {
     try {
-      const { data } = await api.put(`water/${id}`, water);
+      const { data } = await api.put(`water/${id}`, { milliliters, time });
       return data;
     } catch (error) {
       return thunkApi.rejectWithValue(error.message);

diff --git a/src/store/water/waterSlice.js b/src/store/water/waterSlice.js
@@ -1,6 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { deleteWaterThunk, fetchAllWaterThunk } from './operations';
-import { toast } from 'react-toastify';
+import { fetchAllWaterThunk } from './operations';
 
 const waterSlice = createSlice({
   name: 'waterSlice',
@@ -56,9 +55,17 @@ const waterSlice = createSlice({
     },
     deleteWater: (state, action) => {
       state.waterTodayList = state.waterTodayList.filter(
-        (waterItem) => waterItem.id !== action.payload
+        (waterItem) => waterItem._id !== action.payload
       );
     },
+    editWater: (state, action) => {
+      const index = state.waterTodayList.findIndex(
+        (el) => el._id === action.payload.id
+      );
+      if (index !== -1) {
+        state.waterTodayList[index] = action.payload;
+      }
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -67,12 +74,6 @@ const waterSlice = createSlice({
       })
       .addCase(fetchAllWaterThunk.rejected, (state, { payload }) => {
         state.error = payload;
-      })
-      .addCase(deleteWaterThunk.fulfilled, (state, { payload }) => {
-        state.waterTodayList = state.waterTodayList.filter(
-          (waterItem) => waterItem._id !== payload.id
-        );
-        toast.success('Water note was successfully deleted');
       });
   },
 });
@@ -87,4 +88,5 @@ export const {
   changeTodayList,
   changeModalId,
   deleteWater,
+  editWater,
 } = waterSlice.actions;