From 48a7b82f913e07047fbdfff867b3bf8b0088977f Mon Sep 17 00:00:00 2001 From: Kirra-Potiekhina Date: Thu, 21 Mar 2024 13:21:49 +0200 Subject: [PATCH] fix edit and delete logic --- .../ModalDeleteWater/ModalDeleteWater.jsx | 12 ++++----- .../ModalEditWater/ModalEditWater.jsx | 25 ++++--------------- src/components/TodayElement/TodayElement.jsx | 10 ++------ src/store/water/operations.js | 4 +-- src/store/water/waterSlice.js | 20 ++++++++------- 5 files changed, 26 insertions(+), 45 deletions(-) diff --git a/src/components/ModalDeleteWater/ModalDeleteWater.jsx b/src/components/ModalDeleteWater/ModalDeleteWater.jsx index c560b9a..a200cfb 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,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 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 48ea8d2..f81b120 100644 --- 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 = () => { {item.milliliters} ml - {/* */}
{
{ dispatch(changeModalDeleteForm(true)); + dispatch(changeModalId(item._id)); }} > @@ -91,11 +89,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 ae7875b..54f8160 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,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;