ft-mark-all-notification-as-read (#34)

* [#187584881] ft-mark-all-notification-as-read

* [#187584881] ft-mark-all-notification-as-read

* Requested changes notifications

Author: SaddockAime

package-lock.json

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react'
+import { ISingleProduct } from '../utils/types/product';
+import { useAppDispatch, useAppSelector } from '../store/store';
+import { deleteItem } from '../store/features/product/productSlice';
+
+interface ProductProps {
+  id: string;
+  images: string[];
+  name: string;
+  price: string;
+  stock: number;
+  description: string;
+  discount: number;
+}
+
+const SellerDeleteItem:React.FC<ProductProps>= ({id, images, name, price}) => {
+    const dispatch = useAppDispatch();
+    // const { product, isError, isSuccess, isLoading, message }: ISingleProduct = useAppSelector((state: any) => state.products);
+
+    useEffect(()=>{
+        dispatch(deleteItem(id))
+    },[dispatch])
+    
+
+  return (
+    <div>
+        <p>{name}</p>
+        <p>{price}</p>
+        <img src={images[0]} alt="" />
+    </div>
+  )
+}
+
+export default SellerDeleteItem

src/pages/SellerDeleteItem.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
 import productService from "./productService";
-import { IProduct, SearchCriteria } from "../../../utils/types/product";
+import { IProduct, ISingleProduct, SearchCriteria } from "../../../utils/types/product";
 import { getErrorMessage } from "../../../utils/axios/axiosInstance";
 
 const initialState: { products: IProduct[] | null; isLoading: boolean; isError: boolean | null; isSuccess: boolean; message: string } = {
@@ -31,6 +31,15 @@ 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,
@@ -68,6 +77,23 @@ const productSlice = createSlice({
                 state.isError = true;
                 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
             });
     }
 })