[finished 187584874] seller delete item

Author: solangeihirwe03

src/components/product/SellerProduct.tsx

@@ -12,6 +12,8 @@ import { PuffLoader } from 'react-spinners';
 import { Meta } from '../Meta';
 import { toast } from 'react-toastify';
 import { getErrorMessage } from '../../utils/axios/axiosInstance';
+import { deleteItem } from '../../store/features/product/sellerCollectionProductsSlice';
+import ConfirmModal from './ConfirmModal';
 
 const initialProductState: ISingleProduct = {
     id: "",
@@ -43,6 +45,8 @@ const SellerProduct = ({ productId }: { productId: string }) => {
     const [isThereAnyUpdate, setIsThereAnyUpdate] = useState<boolean>(false);
 
     const [updateLoading, setUpdateLoading] = useState(false);
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<string | null>(null);
 
     useEffect(() => {
         if (!isAdd) {
@@ -123,6 +127,14 @@ const SellerProduct = ({ productId }: { productId: string }) => {
         }
     };
 
+    const handleDelete = async () => {
+        if (updatedProduct) {
+            await dispatch(deleteItem(itemToDelete)); 
+            setShowConfirm(false);
+            navigate('/seller/products'); 
+        }
+    };
+
     if (isLoading) {
         return (
             <div className="loader">
@@ -150,7 +162,7 @@ const SellerProduct = ({ productId }: { productId: string }) => {
                         <button disabled={(!isThereAnyUpdate && !isImagesUpdated) || updateLoading} className={`edit-btn ${!isThereAnyUpdate && !isImagesUpdated && 'disabled'}`} onClick={handleSaveOrAdd}>
                             <FaSave /> {isAdd ? "ADD" : "UPDATE"}{updateLoading && "ING..."}
                         </button>
-                        {!isAdd && <button className='delete-btn'><FaTrash /> Delete</button>}
+                        {!isAdd && <button className='delete-btn' onClick={() => { setShowConfirm(true); setItemToDelete(productId); }}><FaTrash /> Delete</button>}
                     </div>
                 </div>
 
@@ -233,6 +245,14 @@ const SellerProduct = ({ productId }: { productId: string }) => {
                             </ContentCard>
                         </ContentCard>
                     </div>
+
+                    <ConfirmModal
+                isOpen={showConfirm}
+                title="Are you sure"
+                message={`Deleting this product <i>${product?.name}</i> will be permanently removed from the system. This can't be undone!`}
+                onConfirm={handleDelete}
+                onCancel={() => setShowConfirm(false)}
+            />
                 </div>
             </div>
         </>

src/pages/seller/SellerCollection.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from 'react'
 import Table from '../../components/table/Table';
 import { useAppDispatch, useAppSelector } from '../../store/store';
-import { fetchSellerCollectionProduct } from '../../store/features/product/sellerCollectionProductsSlice';
+import { fetchSellerCollectionProduct, deleteItem, removeItem } from '../../store/features/product/sellerCollectionProductsSlice';
 import Zoom from '@mui/material/Zoom';
 import Tooltip from '@mui/material/Tooltip';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -22,6 +22,13 @@ import { FaEye, FaPlusCircle } from 'react-icons/fa';
 import { ISingleProductInitialResponse } from '../../utils/types/store';
 import { resetUpdateState, updateSellerProductStatus } from '../../store/features/product/sellerProductSlice';
 import { toast } from 'react-toastify';
+import ConfirmModal from '../../components/product/ConfirmModal';
+
+interface DeleteItemState {
+    id: any;
+    name: string;
+}
+
 export default function SellerCollection() {
     const navigate = useNavigate()
     const dispatch = useAppDispatch();
@@ -33,6 +40,26 @@ export default function SellerCollection() {
         dispatch(fetchSellerCollectionProduct())
     }, [dispatch]);
 
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<DeleteItemState | null>(null);
+
+
+    const handleDelete = async () => {
+        try {
+            setShowConfirm(false)
+            dispatch(removeItem(itemToDelete.id))
+            await dispatch(deleteItem(itemToDelete.id)).unwrap();
+            dispatch(fetchSellerCollectionProduct());
+            setItemToDelete(null)
+        } catch (error) {
+            console.error('Error deleting item:', error);
+        }finally{
+            if(isSuccess)
+            toast.success(message)
+        }
+    };
+
+
     useEffect(() => {
         if (isUpdate && isUpdateSuccess) {
             toast.success(updateMessage);
@@ -69,7 +96,7 @@ export default function SellerCollection() {
                     </IconButton>
                 </Tooltip>
                 <Tooltip TransitionComponent={Zoom} title="Delete" arrow>
-                    <IconButton>
+                    <IconButton onClick={() => { setShowConfirm(true); setItemToDelete({ id: product.id, name: product.name }); }}>
                         <DeleteIcon className='icon__delete' />
                     </IconButton>
                 </Tooltip>
@@ -102,6 +129,8 @@ export default function SellerCollection() {
         setOpen(false);
     };
 
+    const popupMessage = `Deleting this product <i>${itemToDelete?.name}</i> will be permanently removed from the system. This can't be undone!`;
+
     return (
         <div className='seller__main__container'>
             <Meta title={`Seller Products`} />
@@ -162,6 +191,16 @@ export default function SellerCollection() {
                     </Button>
                 </DialogActions>
             </Dialog>
+
+            {showConfirm && (
+                <ConfirmModal
+                    isOpen={showConfirm}
+                    title="Are you sure?"
+                    message={popupMessage}
+                    onConfirm={handleDelete}
+                    onCancel={() => setShowConfirm(false)}
+                />
+            )}
         </div>
     )
 }

src/store/features/product/productService.tsx

@@ -97,6 +97,15 @@ const sellerGetOrderHistory = async () => {
   return response.data;
 }
 
+const SellerDeleteItem = async(id: string)=>{
+  try{
+    const response = await axiosInstance.delete(`api/shop/seller-delete-product/${id}`);
+    return response.data
+  }catch(error){
+    throw new Error("failed to delete product")
+  }
+}
+
 const productService = {
   fetchProducts,
   fetchSingleProduct,
@@ -109,6 +118,7 @@ const productService = {
   addSellerProduct,
   updateSellerProductStatus,
   sellerGetAllProducts,
- sellerGetOrderHistory
+ sellerGetOrderHistory,
+ SellerDeleteItem
 }
 export default productService;

src/store/features/product/sellerCollectionProductsSlice.tsx

@@ -43,10 +43,24 @@ export const sellerGetOrderHistory = createAsyncThunk('seller/seller-get-orderHi
     }
 })
 
+export const deleteItem = createAsyncThunk<ISellerCollectionProductInitialResponse, string>("product/deleteProduct", async (id, thunkApi) => {
+    try {
+        const response = await productService.SellerDeleteItem(id)
+        return response
+    } catch (error) {
+        return thunkApi.rejectWithValue(error)
+    }
+})
+
 const sellerCollectionProductsSlice = createSlice({
     name: "sellerCollectionProducts",
     initialState,
-    reducers: {},
+    reducers: {
+        removeItem: (state, action: any) => {
+            const itemId = action.payload
+            state.data.products = state.data?.products.filter((item) =>item.id !== itemId)
+        }
+    },
     extraReducers: (builder) => {
         builder
             .addCase(fetchSellerCollectionProduct.pending, (state) => {
@@ -96,8 +110,24 @@ const sellerCollectionProductsSlice = createSlice({
                 state.isError = false;
                 state.isSuccess = false;
                 state.message = action.payload.message || null
-            });
+            })
+            .addCase(deleteItem.pending, (state) => {
+                state.isError = false,
+                    state.isSuccess = false
+            })
+            .addCase(deleteItem.fulfilled, (state, action: PayloadAction<any>) => {
+                state.isLoading = false,
+                state.isError = false,
+                state.isSuccess = true
+                state.message = action.payload.message
+            })
+            .addCase(deleteItem.rejected, (state, action: PayloadAction<any>) => {
+                state.isLoading = false,
+                    state.isError = true,
+                    state.message = action.payload,
+                    state.isSuccess = false
+            });;
     }
 })
-
+export const {removeItem} = sellerCollectionProductsSlice.actions
 export default sellerCollectionProductsSlice.reducer;

webpack.dev.config.ts

@@ -97,7 +97,7 @@ const config: Configuration = {
     historyApiFallback: {
       disableDotRule: true,
     },
-    port: 5000,
+    port: 9000,
     open: true,
     hot: true,
   },