[start 187584874] seller delete item

Author: solangeihirwe03

package-lock.json

@@ -27,4 +27,5 @@
 @import "./assets/styles/SellerProduct.scss";
 @import "./assets/styles/SellerCollection.scss";
 @import "./assets/styles/SellerLayout.scss";
-@import "./assets/styles/tables.scss";
+@import "./assets/styles/tables.scss";
+@import "./assets/styles/SellerDeleteItem.scss"

src/App.scss

@@ -0,0 +1,67 @@
+@import "./Colors";
+
+.confirm-dialog {
+    margin-left: 27rem;
+    border-radius: 2.2rem;
+    margin-top: 9rem;
+    width: 80%;
+    height: 87vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    font-size: 1.6rem;
+
+    .confirm-dialog-content {
+        background-color: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+
+        .modal-header {
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin-bottom: 1.5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .icon__delete {
+                color: $red-color;
+                font-size: 3rem;
+            }
+        }
+        p{
+            padding: 1rem 0;
+            i{
+                text-transform: uppercase;
+                font-weight: bold;
+            }
+        }
+        .modal-footer{
+            float: right;
+            button {
+            margin: 0 10px;
+            padding: .7rem 3rem; 
+            border: none;
+            border-radius: 1rem;
+            font-family: $text-family;
+        }
+        .delete-btn{
+            background: $red-middle-color;
+            color: $red-color;
+        }
+        .cancel-btn{
+            background: lighten($fifth-color, 19%);
+            color: $fifth-color;
+        }
+    }
+    }
+}

src/assets/styles/SellerDeleteItem.scss

@@ -0,0 +1,32 @@
+/* eslint-disable */
+import React from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+interface ConfirmModalProps {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="confirm-dialog">
+            <div className="confirm-dialog-content">
+                <div className="modal-header">
+                <DeleteIcon className='icon__delete' /> {title}
+                </div>
+                <p dangerouslySetInnerHTML={{ __html: message }} />
+                <div className="modal-footer">
+                    <button onClick={onCancel} className='cancel-btn'>Cancel</button>
+                    <button onClick={onConfirm} className='delete-btn'>Delete</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmModal;

src/components/product/ConfirmModal.tsx

@@ -10,12 +10,16 @@ import { fetchSingleSellerProduct } from '../../store/features/product/sellerPro
 import { Link } from 'react-router-dom';
 import { PuffLoader } from 'react-spinners';
 import { Meta } from '../Meta';
+import { deleteItem } from '../../store/features/product/sellerCollectionProductsSlice';
+import ConfirmModal from './ConfirmModal';
 
 const SellerProduct = ({ productId }: { productId: string }) => {
     const dispatch = useAppDispatch();
     const { product, isError, isSuccess, isLoading, message }: ISingleProductInitialResponse = useAppSelector((state: any) => state.singleSellerProduct);
 
     const [updatedProduct, setUpdatedProduct] = useState<ISingleProduct | null>(null);
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<string | null>(null);
 
     useEffect(() => {
         dispatch(fetchSingleSellerProduct(productId));
@@ -40,6 +44,12 @@ const SellerProduct = ({ productId }: { productId: string }) => {
     const handleSave = () => {
         console.log('Updated product:', updatedProduct);
     };
+    const handleDelete = async () => {
+        if (updatedProduct) {
+            await dispatch(deleteItem(itemToDelete)); 
+            setShowConfirm(false); 
+        }
+    };
 
     return (
         <>
@@ -60,7 +70,7 @@ const SellerProduct = ({ productId }: { productId: string }) => {
                             <h1>Product View</h1>
                             <div className="header-btns">
                                 <button className='edit-btn' onClick={handleSave}><FaPen /> Save</button>
-                                <button className='delete-btn'><FaTrash /> Delete</button>
+                                <button className='delete-btn' onClick={() => { setShowConfirm(true); setItemToDelete(productId); }}><FaTrash /> Delete</button>
                             </div>
                         </div>
 
@@ -151,6 +161,13 @@ const SellerProduct = ({ productId }: { productId: string }) => {
                         <Link to="/seller/products" className="btn-link">View all my products</Link>
                     </div>
             )}
+            <ConfirmModal
+                isOpen={showConfirm}
+                title="Confirm Deletion"
+                message={`Are you sure you want to delete the product <i>${product?.name}</i>? This action cannot be undone.`}
+                onConfirm={handleDelete}
+                onCancel={() => setShowConfirm(false)}
+            />
         </>
     )
 }

src/components/product/SellerProduct.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable */
-import React, { useEffect } from 'react'
+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 { deleteItem, fetchSellerCollectionProduct } from '../../store/features/product/sellerCollectionProductsSlice';
 import Zoom from '@mui/material/Zoom';
 import Tooltip from '@mui/material/Tooltip';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -14,6 +14,8 @@ import LinearProgress from '@mui/material/LinearProgress';
 import { useNavigate } from 'react-router-dom';
 import { Meta } from '../../components/Meta';
 import { FaEye } from 'react-icons/fa';
+import ConfirmModal from '../../components/product/ConfirmModal';
+
 export default function SellerCollection() {
     const navigate = useNavigate()
     const dispatch = useAppDispatch();
@@ -23,7 +25,23 @@ export default function SellerCollection() {
         dispatch(fetchSellerCollectionProduct())
     }, [dispatch]);
 
-    const rows = data.products ? data.products
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<{ id: string; name: string } | null>(null);
+
+
+    const handleDelete = async () => {
+        try {
+            if (itemToDelete !== null) {
+                await dispatch(deleteItem(itemToDelete.id));
+                setShowConfirm(false);
+                setItemToDelete(null)
+            }
+        } catch (error) {
+            console.error('Error deleting item:', error);
+        }
+    };
+
+    const rows = data?.products ? data.products
         .map((product, index) => [
             index + 1,
             <img src={product.images[0]} alt="image" className='product-img' />,
@@ -40,7 +58,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>
@@ -52,6 +70,7 @@ export default function SellerCollection() {
             </div>
         ]) : [];
 
+        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'>
@@ -64,6 +83,16 @@ export default function SellerCollection() {
                 </div>
             )}
             <Table title={'Product List'} headers={headers} rows={rows} />
+
+            {showConfirm && (
+                <ConfirmModal
+                isOpen={showConfirm}
+                title="Are you sure?"
+                message={popupMessage}
+                onConfirm={handleDelete}
+                onCancel={() => setShowConfirm(false)}
+            />
+            )}
         </div>
     )
 }

src/pages/SellerDeleteItem.tsx

@@ -61,13 +61,23 @@ const fetchSellerSingleProduct = async (id: string) => {
   }
 };
 
+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,
     fetchProductReviews,
     fetchShopInfo,
     searchProduct,
     fetchSellerProducts,
-    fetchSellerSingleProduct
+    fetchSellerSingleProduct,
+    SellerDeleteItem
 }
 export default productService;

src/pages/seller/SellerCollection.tsx

@@ -31,15 +31,6 @@ export const searchProduct = createAsyncThunk<IProduct, SearchCriteria>("product
   }
 );
 
-export const deleteItem = createAsyncThunk<ISingleProduct, string>("product/deleteProduct", async(id, thunkApi)=>{
-   try{
-     const response = await productService.deleteItem(id)
-    return response
-   } catch(error){
-    return thunkApi.rejectWithValue(error)
-   }
-})
-
 const productSlice = createSlice({
     name: "products",
     initialState,
@@ -78,23 +69,7 @@ const productSlice = createSlice({
                 state.message = action.payload;
                 state.isSuccess = false;
             })
-            .addCase(deleteItem.pending, (state)=>{
-                state.isLoading = true,
-                state.isError = false,
-                state.isSuccess = false
-            })
-            .addCase(deleteItem.fulfilled, (state, action: PayloadAction<ISingleProduct>)=>{
-                state.isLoading = false,
-                state.isError = false,
-                state.products = state.products.filter(product => product.id !== action.payload.id),
-                state.isSuccess = true
-            })
-            .addCase(deleteItem.rejected, (state, action: PayloadAction<any>)=>{
-                state.isLoading = false,
-                state.isError = true,
-                state.products = action.payload,
-                state.isSuccess = false
-            });
+            ;
     }
 })
 

src/store/features/product/productService.tsx

@@ -20,12 +20,21 @@ const initialState: ISellerCollectionProductInitialResponse = {
 export const fetchSellerCollectionProduct = createAsyncThunk<ISellerCollectionProductResponse>("products/fetchSellerCollectionProducts", async () => {
     try {
         const response = await productService.fetchSellerProducts();
+        console.log(response)
         return response;
     } catch (error) {
         throw new error;
     }
 });
 
+export const deleteItem = createAsyncThunk<ISellerCollectionProductResponse, 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",
@@ -48,6 +57,23 @@ const sellerCollectionProductsSlice = createSlice({
                 state.isError = action.payload.error || null;
                 state.isSuccess = false;
                 state.message = action.payload.message || null
+            })
+            .addCase(deleteItem.pending, (state)=>{
+                state.isLoading = true,
+                state.isError = false,
+                state.isSuccess = false
+            })
+            .addCase(deleteItem.fulfilled, (state, action: PayloadAction<ISellerCollectionProductResponse>)=>{
+                state.isLoading = false,
+                state.isError = false,
+                state.data= action.payload.data,
+                state.isSuccess = true
+            })
+            .addCase(deleteItem.rejected, (state, action: PayloadAction<any>)=>{
+                state.isLoading = false,
+                state.isError = true,
+                state.message = action.payload,
+                state.isSuccess = false
             });
     }
 })