[finished 187584874] seller delete item

Author: solangeihirwe03

Diff for: 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>
         </>

Diff for: 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';
@@ -47,8 +47,8 @@ export default function SellerCollection() {
     const handleDelete = async () => {
         try {
             setShowConfirm(false)
-            // dispatch(removeItem(itemToDelete.id))
-            // await dispatch(deleteItem(itemToDelete.id)).unwrap();
+            dispatch(removeItem(itemToDelete.id))
+            await dispatch(deleteItem(itemToDelete.id)).unwrap();
             dispatch(fetchSellerCollectionProduct());
             setItemToDelete(null)
         } catch (error) {

Diff for: 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;

Diff for: 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;