diff --git a/src/components/ModalDeleteWater/ModalDeleteWater.jsx b/src/components/ModalDeleteWater/ModalDeleteWater.jsx index fcb7e90..7ce5557 100644 --- 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,19 +17,20 @@ 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); diff --git a/src/components/ModalEditWater/ModalEditWater.jsx b/src/components/ModalEditWater/ModalEditWater.jsx index 3da290a..553e02b 100644 --- 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 index a852ba1..0297e39 100644 --- a/src/components/TodayElement/TodayElement.jsx +++ b/src/components/TodayElement/TodayElement.jsx @@ -20,7 +20,6 @@ import { } from '../../store/water/waterSlice'; import { modalDeleteOpen, - modalId, selectorWaterToday, } from '../../store/water/selectors.js'; import ModalDeleteWater from '../ModalDeleteWater/ModalDeleteWater.jsx'; @@ -30,7 +29,6 @@ import { format } from 'date-fns'; const TodayElement = () => { const isModalOpen = useSelector(modalDeleteOpen); - const id = useSelector(modalId); const waterTodayList = useSelector(selectorWaterToday); const dispatch = useDispatch(); @@ -50,7 +48,6 @@ const TodayElement = () => { {item.milliliters} ml - {/* */}
{ onClick={() => { dispatch(changeModalId(item._id)); dispatch(changeModalDeleteForm(true)); + dispatch(changeModalId(item._id)); }} > @@ -85,11 +83,7 @@ const TodayElement = () => { Add water - {isModalOpen && ( - item._id === id)} - /> - )} + {isModalOpen && } ); diff --git a/src/store/water/operations.js b/src/store/water/operations.js index 8871138..9e131dd 100644 --- 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 index ec591d5..b0affac 100644 --- 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,6 +55,14 @@ const waterSlice = createSlice({ (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 @@ -64,12 +71,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'); }); }, }); @@ -84,4 +85,5 @@ export const { changeTodayList, changeModalId, deleteWater, + editWater, } = waterSlice.actions;