Add Wishlist on front and isLiked on Product modal

.gitignore

@@ -5,6 +5,8 @@
 /.pnp
 .pnp.js
 
+shop-client/node_modules
+
 # testing
 /coverage
 

shop-client/src/components/Layout.tsx

@@ -11,6 +11,7 @@ const navItems = [
     { label: 'Boutiques', path: '/' },
     { label: 'Produits', path: '/product' },
     { label: 'Catégories', path: '/category' },
+    { label: 'Wishlist', path: '/wishlist' },
 ];
 
 const Layout = ({ children }: Props) => {

shop-client/src/components/ProductCard.tsx

@@ -6,7 +6,10 @@ import { useNavigate } from 'react-router-dom';
 import { useAppContext } from '../context';
 import { FormattedProduct, Product } from '../types';
 import { formatterLocalizedProduct, priceFormatter } from '../utils';
-
+import { IconButton } from '@mui/material';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import { editProduct } from '../services/ProductService';
 type Props = {
     product: Product;
     displayShop?: boolean;
@@ -18,9 +21,17 @@ const ProductCard = ({ product, displayShop = false }: Props) => {
     const [formattedProduct, setFormattedProduct] = useState<FormattedProduct>(
         formatterLocalizedProduct(product, locale),
     );
-
+    const [isRed, setIsRed] = useState(product.isLiked);
     useEffect(() => setFormattedProduct(formatterLocalizedProduct(product, locale)), [locale]);
 
+    const editData = {
+        id: product.id,
+        price: product.price,
+        shop: product.shop,
+        categories: product.categories,
+        isLiked: isRed,
+        localizedProducts: product.localizedProducts,
+    };
     return (
         <Card
             sx={{ minWidth: 275, height: displayShop ? 270 : 230, cursor: 'pointer' }}
@@ -50,6 +61,21 @@ const ProductCard = ({ product, displayShop = false }: Props) => {
                               </span>
                           ))}
                 </Typography>
+                {/* Heart icon clickable*/}
+                <IconButton
+                    onClick={(e) => {
+                        e.stopPropagation();
+
+                        setIsRed(!isRed);
+
+                        editProduct(editData).then((res) => {
+                            console.log(res.data);
+                        });
+                    }}
+                    color={isRed ? 'error' : 'default'}
+                >
+                    {isRed ? <FavoriteIcon /> : <FavoriteBorderIcon />}
+                </IconButton>
             </CardContent>
         </Card>
     );

shop-client/src/pages/ProductForm.tsx

@@ -29,6 +29,7 @@ const ProductForm = () => {
         price: 0,
         shop: null,
         categories: [],
+        isLiked: false,
         localizedProducts: [
             {
                 locale: Locale.FR,

shop-client/src/pages/Wishlist.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Box, Grid, Pagination, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { ProductCard } from '../components';
+import { useAppContext } from '../context';
+import { ProductService } from '../services';
+import { Product } from '../types';
+export default function Wishlist() {
+    const { setLoading } = useAppContext();
+    const [products, setProducts] = useState<Product[] | null>(null);
+    const [count, setCount] = useState<number>(0);
+    const [page, setPage] = useState<number>(0);
+    const [pageSelected, setPageSelected] = useState<number>(0);
+
+    const getProducts = () => {
+        setLoading(true);
+        ProductService.getProducts(pageSelected, 9)
+            .then((res) => {
+                setProducts(res.data.content);
+                setCount(res.data.totalPages);
+                setPage(res.data.pageable.pageNumber + 1);
+            })
+            .finally(() => setLoading(false));
+    };
+
+    useEffect(() => {
+        getProducts();
+    }, [pageSelected]);
+
+    const handleChangePagination = (event: React.ChangeEvent<unknown>, value: number) => {
+        setPageSelected(value - 1);
+    };
+
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
+            <Typography variant="h2">Les produits likés</Typography>
+            <Grid container alignItems="center" rowSpacing={3} columnSpacing={3}>
+                {products
+                    ?.filter((product) => product.isLiked === true)
+                    .map((product) => (
+                        <Grid item key={product.id} xs={4}>
+                            <ProductCard product={product} displayShop={true} />
+                        </Grid>
+                    ))}
+            </Grid>
+            {/* Pagination */}
+            {products?.length !== 0 ? (
+                <Pagination count={count} page={page} siblingCount={1} onChange={handleChangePagination} />
+            ) : (
+                <Typography variant="h5" sx={{ mt: -1 }}>
+                    Aucun produit correspondant
+                </Typography>
+            )}
+        </Box>
+    );
+}

shop-client/src/pages/index.ts

@@ -6,5 +6,5 @@ import ProductForm from './ProductForm';
 import Products from './Products';
 import ShopDetails from './ShopDetails';
 import ShopForm from './ShopForm';
-
-export { Categories, CategoryDetails, Home, ProductDetails, ProductForm, Products, ShopDetails, ShopForm };
+import Wishlist from './Wishlist';
+export { Categories, CategoryDetails, Home, ProductDetails, ProductForm, Products, ShopDetails, ShopForm, Wishlist };

shop-client/src/routes/routes.ts

@@ -7,6 +7,7 @@ import {
     Products,
     ShopDetails,
     ShopForm,
+    Wishlist,
 } from '../pages';
 import CategoryForm from '../pages/CategoryForm';
 
@@ -77,6 +78,11 @@ const routes: Routes = [
         path: '/category/edit/:id',
         element: CategoryForm,
     },
+    {
+        name: 'Wishlist',
+        path: '/wishlist',
+        element: Wishlist,
+    },
 ];
 
 export default routes;

shop-client/src/types/product.ts

@@ -5,6 +5,7 @@ type LocalizedProductBase = {
     locale: string;
     name: string;
     description: string;
+    isLiked?: boolean;
 };
 
 export type LocalizedProduct = {
@@ -19,15 +20,17 @@ type ProductBase = {
     price: number;
     shop: Shop | null;
     categories: Category[];
+    isLiked?: boolean;
 };
 
 export type Product = {
     id: number;
     localizedProducts: LocalizedProduct[];
+    isLiked?: boolean;
 } & ProductBase;
 
 export type MinimalProduct = {
-    id?: string;
+    id?: any;
     localizedProducts: MinimalLocalizedProduct[];
 } & ProductBase;
 

shop-client/src/utils/productUtils.ts

@@ -28,7 +28,11 @@ export const getLocalizedProduct = (
  */
 export const formatterLocalizedProduct = (product: Product, locale: Language) => {
     const localizedProduct = getLocalizedProduct(product.localizedProducts, locale);
-    return { ...product, name: localizedProduct.name, description: localizedProduct.description };
+    return {
+        ...product,
+        name: localizedProduct.name,
+        description: localizedProduct.description,
+    };
 };
 
 /**

shop-server/pom.xml

@@ -76,6 +76,7 @@
 				<groupId>org.springframework.boot</groupId>
 				<artifactId>spring-boot-maven-plugin</artifactId>
 			</plugin>
+
 		</plugins>
 	</build>
 

shop-server/src/main/java/fr/fullstack/shopapp/model/Product.java

@@ -42,9 +42,16 @@ public class Product {
     @NotNull(message = "Price may not be null")
     private float price;
 
+    private boolean isLiked;
     @ManyToOne
     private Shop shop;
 
+    public boolean isLiked(){
+        return  isLiked;
+    }
+
+
+
     public List<Category> getCategories() {
         return categories;
     }
@@ -84,4 +91,7 @@ public void setPrice(float price) {
     public void setShop(Shop shop) {
         this.shop = shop;
     }
+    public void setLiked(boolean liked) {
+        this.isLiked = liked;
+    }
 }