Skip to content

Commit 2a65f58

Browse files
solangeihirwe03solangeihirwe03
committed
[finished 187584874] seller delete item
1 parent 8bd264f commit 2a65f58

File tree

5 files changed

+99
-24
lines changed

5 files changed

+99
-24
lines changed

‎src/components/product/SellerProduct.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { PuffLoader } from 'react-spinners';
1212
import { Meta } from '../Meta';
1313
import { toast } from 'react-toastify';
1414
import { getErrorMessage } from '../../utils/axios/axiosInstance';
15+
import { deleteItem } from '../../store/features/product/sellerCollectionProductsSlice';
16+
import ConfirmModal from './ConfirmModal';
1517

1618
const initialProductState: ISingleProduct = {
1719
id: "",
@@ -42,6 +44,10 @@ const SellerProduct = ({ productId }: { productId: string }) => {
4244
const [isImagesUpdated, setIsImagesUpdated] = useState<boolean>(false);
4345
const [isThereAnyUpdate, setIsThereAnyUpdate] = useState<boolean>(false);
4446

47+
const [showConfirm, setShowConfirm] = useState(false);
48+
const [itemToDelete, setItemToDelete] = useState<string | null>(null);
49+
50+
4551
useEffect(() => {
4652
if (isUpdate && isUpdateSuccess && !updateError) {
4753
toast.success(`Product ${isAdd ? "added" : "updated"}`)
@@ -118,6 +124,14 @@ const SellerProduct = ({ productId }: { productId: string }) => {
118124
}
119125
};
120126

127+
const handleDelete = async () => {
128+
if (updatedProduct) {
129+
await dispatch(deleteItem(itemToDelete));
130+
setShowConfirm(false);
131+
navigate('/seller/products');
132+
}
133+
};
134+
121135
if (isLoading) {
122136
return (
123137
<div className="loader">
@@ -145,7 +159,7 @@ const SellerProduct = ({ productId }: { productId: string }) => {
145159
<button disabled={!isThereAnyUpdate && !isImagesUpdated} className={`edit-btn ${!isThereAnyUpdate && !isImagesUpdated && 'disabled'}`} onClick={handleSaveOrAdd}>
146160
<FaSave /> {isAdd ? "ADD" : "UPDATE"}
147161
</button>
148-
{!isAdd && <button className='delete-btn'><FaTrash /> Delete</button>}
162+
{!isAdd && <button className='delete-btn' onClick={() => { setShowConfirm(true); setItemToDelete(productId); }}><FaTrash /> Delete</button>}
149163
</div>
150164
</div>
151165

@@ -228,6 +242,14 @@ const SellerProduct = ({ productId }: { productId: string }) => {
228242
</ContentCard>
229243
</ContentCard>
230244
</div>
245+
246+
<ConfirmModal
247+
isOpen={showConfirm}
248+
title="Are you sure"
249+
message={`Deleting this product <i>${product?.name}</i> will be permanently removed from the system. This can't be undone!`}
250+
onConfirm={handleDelete}
251+
onCancel={() => setShowConfirm(false)}
252+
/>
231253
</div>
232254
</div>
233255
</>

‎src/pages/seller/SellerCollection.tsx‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { useEffect, useState } from 'react'
33
import Table from '../../components/table/Table';
44
import { useAppDispatch, useAppSelector } from '../../store/store';
5-
import { fetchSellerCollectionProduct } from '../../store/features/product/sellerCollectionProductsSlice';
5+
import { fetchSellerCollectionProduct, deleteItem, removeItem } from '../../store/features/product/sellerCollectionProductsSlice';
66
import Zoom from '@mui/material/Zoom';
77
import Tooltip from '@mui/material/Tooltip';
88
import DeleteIcon from '@mui/icons-material/Delete';
@@ -22,6 +22,13 @@ import { FaEye, FaPlusCircle } from 'react-icons/fa';
2222
import { ISingleProductInitialResponse } from '../../utils/types/store';
2323
import { resetUpdateState, updateSellerProductStatus } from '../../store/features/product/sellerProductSlice';
2424
import { toast } from 'react-toastify';
25+
import ConfirmModal from '../../components/product/ConfirmModal';
26+
27+
interface DeleteItemState {
28+
id: any;
29+
name: string;
30+
}
31+
2532
export default function SellerCollection() {
2633
const navigate = useNavigate()
2734
const dispatch = useAppDispatch();
@@ -33,6 +40,26 @@ export default function SellerCollection() {
3340
dispatch(fetchSellerCollectionProduct())
3441
}, [dispatch]);
3542

43+
const [showConfirm, setShowConfirm] = useState(false);
44+
const [itemToDelete, setItemToDelete] = useState<DeleteItemState | null>(null);
45+
46+
47+
const handleDelete = async () => {
48+
try {
49+
setShowConfirm(false)
50+
dispatch(removeItem(itemToDelete.id))
51+
await dispatch(deleteItem(itemToDelete.id)).unwrap();
52+
dispatch(fetchSellerCollectionProduct());
53+
setItemToDelete(null)
54+
} catch (error) {
55+
console.error('Error deleting item:', error);
56+
}finally{
57+
if(isSuccess)
58+
toast.success(message)
59+
}
60+
};
61+
62+
3663
useEffect(() => {
3764
if (isUpdate && isUpdateSuccess) {
3865
toast.success(updateMessage);
@@ -69,7 +96,7 @@ export default function SellerCollection() {
6996
</IconButton>
7097
</Tooltip>
7198
<Tooltip TransitionComponent={Zoom} title="Delete" arrow>
72-
<IconButton>
99+
<IconButton onClick={() => { setShowConfirm(true); setItemToDelete({ id: product.id, name: product.name }); }}>
73100
<DeleteIcon className='icon__delete' />
74101
</IconButton>
75102
</Tooltip>
@@ -102,6 +129,8 @@ export default function SellerCollection() {
102129
setOpen(false);
103130
};
104131

132+
const popupMessage = `Deleting this product <i>${itemToDelete?.name}</i> will be permanently removed from the system. This can't be undone!`;
133+
105134
return (
106135
<div className='seller__main__container'>
107136
<Meta title={`Seller Products`} />
@@ -162,6 +191,16 @@ export default function SellerCollection() {
162191
</Button>
163192
</DialogActions>
164193
</Dialog>
194+
195+
{showConfirm && (
196+
<ConfirmModal
197+
isOpen={showConfirm}
198+
title="Are you sure?"
199+
message={popupMessage}
200+
onConfirm={handleDelete}
201+
onCancel={() => setShowConfirm(false)}
202+
/>
203+
)}
165204
</div>
166205
)
167206
}

‎src/store/features/product/productService.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,15 @@ const addSellerProduct = async (newProductData: FormData) => {
9999
}
100100
}
101101

102+
const SellerDeleteItem = async(id: string)=>{
103+
try{
104+
const response = await axiosInstance.delete(`api/shop/seller-delete-product/${id}`);
105+
return response.data
106+
}catch(error){
107+
throw new Error("failed to delete product")
108+
}
109+
}
110+
102111
const productService = {
103112
fetchProducts,
104113
fetchSingleProduct,
@@ -109,6 +118,7 @@ const productService = {
109118
fetchSellerSingleProduct,
110119
updateSellerProduct,
111120
addSellerProduct,
112-
updateSellerProductStatus
121+
updateSellerProductStatus,
122+
SellerDeleteItem
113123
}
114124
export default productService;

‎src/store/features/product/sellerCollectionProductsSlice.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,33 @@ const initialState: ISellerCollectionProductInitialResponse = {
1818
message: ''
1919
}
2020

21-
export const fetchSellerCollectionProduct = createAsyncThunk<ISellerCollectionProductResponse>("products/fetchSellerCollectionProducts", async (_,thunkApi) => {
21+
export const fetchSellerCollectionProduct = createAsyncThunk<ISellerCollectionProductResponse>("products/fetchSellerCollectionProducts", async (_, thunkApi) => {
2222
try {
2323
const response = await productService.fetchSellerProducts();
24-
console.log(response)
2524
return response;
2625
} catch (error) {
2726
return thunkApi.rejectWithValue(getErrorMessage(error));
2827
}
2928
});
3029

31-
export const deleteItem = createAsyncThunk<ISellerCollectionProductResponse, string>("product/deleteProduct", async(id, thunkApi)=>{
32-
try{
33-
const response = await productService.SellerDeleteItem(id)
34-
return response
35-
} catch(error){
36-
return thunkApi.rejectWithValue(error)
30+
export const deleteItem = createAsyncThunk<ISellerCollectionProductInitialResponse, string>("product/deleteProduct", async (id, thunkApi) => {
31+
try {
32+
const response = await productService.SellerDeleteItem(id)
33+
return response
34+
} catch (error) {
35+
return thunkApi.rejectWithValue(error)
3736
}
38-
})
37+
})
3938

4039
const sellerCollectionProductsSlice = createSlice({
4140
name: "sellerCollectionProducts",
4241
initialState,
43-
reducers: {},
42+
reducers: {
43+
removeItem: (state, action: any) => {
44+
const itemId = action.payload
45+
state.data.products = state.data?.products.filter((item) =>item.id !== itemId)
46+
}
47+
},
4448
extraReducers: (builder) => {
4549
builder
4650
.addCase(fetchSellerCollectionProduct.pending, (state) => {
@@ -59,24 +63,24 @@ const sellerCollectionProductsSlice = createSlice({
5963
state.isSuccess = false;
6064
state.message = action.payload.message || null
6165
})
62-
.addCase(deleteItem.pending, (state)=>{
63-
state.isLoading = true,
66+
.addCase(deleteItem.pending, (state) => {
6467
state.isError = false,
65-
state.isSuccess = false
68+
state.isSuccess = false
6669
})
67-
.addCase(deleteItem.fulfilled, (state, action: PayloadAction<ISellerCollectionProductResponse>)=>{
70+
.addCase(deleteItem.fulfilled, (state, action: PayloadAction<any>) => {
6871
state.isLoading = false,
6972
state.isError = false,
70-
state.data= action.payload.data,
7173
state.isSuccess = true
74+
state.message = action.payload.message
7275
})
73-
.addCase(deleteItem.rejected, (state, action: PayloadAction<any>)=>{
76+
.addCase(deleteItem.rejected, (state, action: PayloadAction<any>) => {
7477
state.isLoading = false,
75-
state.isError = true,
76-
state.message = action.payload,
77-
state.isSuccess = false
78+
state.isError = true,
79+
state.message = action.payload,
80+
state.isSuccess = false
7881
});
7982
}
8083
})
8184

85+
export const {removeItem} = sellerCollectionProductsSlice.actions
8286
export default sellerCollectionProductsSlice.reducer;

‎webpack.dev.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const config: Configuration = {
9797
historyApiFallback: {
9898
disableDotRule: true,
9999
},
100-
port: 5000,
100+
port: 9000,
101101
open: true,
102102
hot: true,
103103
},

0 commit comments

Comments
 (0)