From c7900da6d05d1c0197642a3b98df99fa3d4cc6fe Mon Sep 17 00:00:00 2001 From: Niyonshuti Jean De Dieu <152473876+Jadowacu1@users.noreply.github.com> Date: Mon, 19 Aug 2024 10:33:42 +0200 Subject: [PATCH] buyer view and clear wishlist --- src/App.scss | 3 +- src/assets/styles/wishList.scss | 34 +++++++++++ src/components/product/Product.tsx | 4 +- src/pages/LandingPage.tsx | 13 +---- src/pages/wishList.tsx | 57 +++++++++++++++++++ src/router.tsx | 4 ++ src/store/features/carts/cartSlice.tsx | 2 +- .../features/wishlist/wishlistService.tsx | 1 + src/store/features/wishlist/wishlistSlice.tsx | 5 +- 9 files changed, 108 insertions(+), 15 deletions(-) create mode 100644 src/assets/styles/wishList.scss create mode 100644 src/pages/wishList.tsx diff --git a/src/App.scss b/src/App.scss index fbf0a796..4a20cac0 100644 --- a/src/App.scss +++ b/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"; \ No newline at end of file diff --git a/src/assets/styles/wishList.scss b/src/assets/styles/wishList.scss new file mode 100644 index 00000000..c1707e53 --- /dev/null +++ b/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; + } + +} diff --git a/src/components/product/Product.tsx b/src/components/product/Product.tsx index 3359a6ff..160dc20b 100644 --- a/src/components/product/Product.tsx +++ b/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 = ({ @@ -66,7 +66,7 @@ const Product: React.FC = ({ }; 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) => { diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index f2d4f12b..55b350ef 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -93,16 +93,9 @@ const LandingPage: React.FC = () => { products .slice(0,visibleProducts) .map((product: any) => ( - +
+ +
))} {visibleProducts < products.length && (
diff --git a/src/pages/wishList.tsx b/src/pages/wishList.tsx new file mode 100644 index 00000000..ce02f95e --- /dev/null +++ b/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 ( + <> +
+
+
+

My Wishlist

+
+
+ +
+
+
+
+ {isSuccess && + Array.isArray(items) && + items + .map((product: any) => ( + + ))} +
+
+
+ + ); +}; + +export default WishList; + + diff --git a/src/router.tsx b/src/router.tsx index 15c1e80d..7c6312ac 100644 --- a/src/router.tsx +++ b/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 (
@@ -58,6 +59,7 @@ const AppRouter: React.FC = () => { } /> } /> } /> + } @@ -70,6 +72,7 @@ const AppRouter: React.FC = () => { } /> + }/> } /> }> @@ -98,6 +101,7 @@ const AppRouter: React.FC = () => { } /> +
); diff --git a/src/store/features/carts/cartSlice.tsx b/src/store/features/carts/cartSlice.tsx index dc85dcf8..d054ad7b 100644 --- a/src/store/features/carts/cartSlice.tsx +++ b/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 = []; diff --git a/src/store/features/wishlist/wishlistService.tsx b/src/store/features/wishlist/wishlistService.tsx index ca7e156e..c10aad2b 100644 --- a/src/store/features/wishlist/wishlistService.tsx +++ b/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); }; + diff --git a/src/store/features/wishlist/wishlistSlice.tsx b/src/store/features/wishlist/wishlistSlice.tsx index 1e73385d..8cb2251f 100644 --- a/src/store/features/wishlist/wishlistSlice.tsx +++ b/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;