buyer view and clear wishlist

src/App.scss

@@ -43,4 +43,5 @@
 @import "./assets/styles/liveChat.scss";
 @import "./assets//styles/UserProfile.scss";
 @import "./assets/styles/SellerSideProduct.scss";
-@import "./assets/styles/SellerDeleteItem.scss"
+@import "./assets/styles/SellerDeleteItem.scss";
+@import "./assets/styles/wishList.scss";

src/assets/styles/wishList.scss

@@ -0,0 +1,34 @@
+
+.wishListPage{
+    margin-top: 10px;
+     display: flex;
+     flex-direction: column;
+
+    .top{
+        display: flex;
+        flex-direction: row;
+        margin-left: 2%;
+        gap: 75%;
+        .delete{
+            display: flex;
+            gap: 5px;
+            border: none;
+            font-family: $text-family;
+            background-color: $primary-color;
+            color: $white;
+            font-size: 1.5rem;
+            padding: 0.4rem;
+            width: 110%;
+            border-radius: 10px;
+            cursor: pointer;
+        }
+
+    }
+    .wishlistProducts {
+        display: grid;
+        justify-items: center;
+        grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
+        gap: 1.7rem;
+      }
+
+}

src/components/product/Product.tsx

@@ -16,7 +16,7 @@ interface ProductProps {
   price: string;
   stock: number;
   description: string;
-  discount: number;
+  discount?: number;
 }
 
 const Product: React.FC<ProductProps> = ({
@@ -66,7 +66,7 @@ const Product: React.FC<ProductProps> = ({
   };
 
   const truncateDescription = (desc: string, length: number) => {
-    return desc.length > length ? `${desc.substring(0, length)}...` : desc;
+    return desc?.length > length ? `${desc.substring(0, length)}...` : desc;
   };
 
   const handleAddProductToCart = async (productId: string, quantity = 1) => {

src/pages/LandingPage.tsx

@@ -93,16 +93,9 @@ const LandingPage: React.FC = () => {
                 products
                 .slice(0,visibleProducts)
                 .map((product: any) => (
-                  <Product
-                    key={product.id}
-                    id={product.id}
-                    images={product.images}
-                    name={product.name}
-                    price={product.price}
-                    stock={Number(product.quantity)}
-                    description={product.description}
-                    discount={Number(product.discount.replace("%", ""))}
-                  />
+                  <div>
+
+                  </div>
                 ))}
             </div>
             {visibleProducts < products.length && ( <div className="load-more">

src/pages/wishList.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable */
+import React, { useEffect, useState } from "react";
+import { GiBroom } from "react-icons/gi";
+import { useAppDispatch, useAppSelector } from '../store/store';
+import Product from "../components/product/Product";
+import { addProductToWishlist, removeProductFromWishlist, fetchWishlistProducts } from '../store/features/wishlist/wishlistSlice';
+
+const WishList: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { items, isError, isSuccess, isLoading, message } = useAppSelector((state) => state.wishlist);
+
+    useEffect(() => {
+        dispatch(fetchWishlistProducts());
+        }, [dispatch]);
+  if(isSuccess){
+    console.log(items);
+  }
+  return (
+    <>
+      <div className="wishListPage">
+        <div className="top">
+          <div>
+            <h1>My Wishlist</h1>
+          </div>
+          <div>
+            <button className="delete">
+              <GiBroom className="deleteIcon" />
+              Clear WishList
+            </button>
+          </div>
+        </div>
+        <div className="wishlistProducts">
+          <div>
+          {isSuccess &&
+                Array.isArray(items) &&
+                items
+               .map((product: any) => (
+               <Product
+                    key={product.id}
+                    id={product.id}
+                    images={product.images}
+                    name={product.name}
+                    price={product.price}
+                    stock={Number(product.quantity)}
+                    description={product.description} 
+                  /> 
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WishList;
+
+

src/router.tsx

@@ -28,6 +28,7 @@ import UserProfile from './pages/UserEditProfile';
 import ProductsPage from './pages/Products';
 import TrackOrder from './pages/trackOrder';
 import UserVIewOrders from './pages/UserViewOrders';
+import WishList  from './pages/wishList';
 const AppRouter: React.FC = () => {
   return (
     <div>
@@ -58,6 +59,7 @@ const AppRouter: React.FC = () => {
           <Route path="logout" element={<Logout />} />
           <Route path="shopping-cart" element={<UserViewCart />} />
           <Route path="my-orders" element={<UserVIewOrders />} />
+
           <Route
             path="trackOrder/:orderId/:productId"
             element={<TrackOrder />}
@@ -70,6 +72,7 @@ const AppRouter: React.FC = () => {
               </ProtectedRoute>
             }
           />
+          <Route path="wishList" element={<WishList />}/>
           <Route path="*" element={<NotFound />} />
         </Route>
         <Route path="/seller" element={<SellerLayout />}>
@@ -98,6 +101,7 @@ const AppRouter: React.FC = () => {
             <Route path="users" element={<Users />} />
           </Route>
         </Route>
+
       </Routes>
     </div>
   );

src/store/features/carts/cartSlice.tsx

@@ -243,7 +243,7 @@ const cartSlice = createSlice({
         state.isError = false;
         state.isSuccess = true;
         state.carts = action.payload.data.carts;
-        console.log(state.carts);
+        // console.log(state.carts);
         let cartProductsTotal = 0;
         let cartTotalAmount = 0;
         let cartsProductsList = [];

src/store/features/wishlist/wishlistService.tsx

@@ -15,3 +15,4 @@ export const fetchWishlist = async () => {
   const response = await axiosInstance.get('/api/shop/buyer-view-wishlist-products');
   return response.data.data.WishList.wishListProducts.map((item: any) => item.products);
 };
+

src/store/features/wishlist/wishlistSlice.tsx

@@ -9,6 +9,7 @@ interface WishlistState {
   isSuccess: boolean;
   isError: boolean;
   message: string;
+
 }
 
 const initialState: WishlistState = {
@@ -60,9 +61,12 @@ const wishlistSlice = createSlice({
     builder
       .addCase(fetchWishlistProducts.pending, (state) => {
         state.isLoading = true;
+        state.isError = null;
+        state.isSuccess = false;
       })
       .addCase(fetchWishlistProducts.fulfilled, (state, action) => {
         state.isLoading = false;
+        state.isError = false;
         state.isSuccess = true;
         state.items = action.payload;
       })
@@ -92,7 +96,6 @@ const wishlistSlice = createSlice({
         state.isLoading = false;
         state.isSuccess = true;
         state.items = state.items.filter(item => item.id !== action.meta.arg);
-        state.message = action.payload.message;
       })
       .addCase(removeProductFromWishlist.rejected, (state, action) => {
         state.isLoading = false;