wishlist view + remove product from wihlist

api/src/router/wishsRouter.js

@@ -11,6 +11,6 @@ const router = express.Router();
 
 router.get("/:id", getUserWish);
 router.post("/:userId", addProductToWish);
-router.delete("/:userId", deleteProductFromWish);
+router.delete("/:userId/:productId", deleteProductFromWish);
 
 export default router;

api/src/routes/wishsRoutes.js

@@ -60,8 +60,7 @@ export default (Wish, Product) => ({
 
 	deleteProductFromWish: async (req, res) => {
 		try {
-			const { userId } = req.params;
-			const { productId } = req.body;
+			const { userId, productId} = req.params;
 
 			if(!userId){
 				return res.status(400).json({ message: "userId parameter is missing" });

client/src/layout/NavBar.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import {ref} from 'vue'
+import {onMounted, ref, watch} from 'vue'
 import {Dialog, DialogPanel} from '@headlessui/vue'
 import {Bars3Icon, XMarkIcon, UserIcon, ShoppingBagIcon, HeartIcon} from '@heroicons/vue/24/outline'
 import {useRouter} from "vue-router";
+import axiosInstance from "@/utils/axiosInstance";
 const router = useRouter()
 const navigation = [
   {name: 'Nouveautés', href: '/products?new=true'},
@@ -15,6 +16,21 @@ const mobileMenuOpen = ref(false)
 
 const token = window.localStorage.getItem('token')
 const isAuthenticated = !!token
+
+const getWishes = async () => {
+  if (isAuthenticated) {
+    const payload = JSON.parse(atob(token.split('.')[1]))
+    const userId = payload.userId
+    const wishes = await axiosInstance.get(`/wishes/${userId}`).then((res) => res.data);
+
+    return wishes.products.length
+  }
+}
+const wishList = ref(0);
+onMounted(async () => {
+  wishList.value = await getWishes()
+})
+
 </script>
 <template>
   <header :class="router.currentRoute.value.path === '/' ? '' : 'bg-white border-b-2 border-b-gray-200' " >
@@ -45,7 +61,7 @@ const isAuthenticated = !!token
       <div class="ml-4 flow-root lg:ml-6" v-if="isAuthenticated">
         <a href="/wishlist" class="group -m-2 flex items-center p-2">
           <HeartIcon class="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500" aria-hidden="true"/>
-          <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
+          <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{{ wishList }}</span>
           <span class="sr-only">produits dans les favoris, voir les favoris</span>
         </a>
       </div>

client/src/views/ProductView.vue

@@ -237,7 +237,7 @@ const addProductToWishlist = async (userId: string, productId: string) => {
   try {
     await axiosInstance.post(`/wishes/${userId}`, {
       productId: productId
-    });
+    }); 
     console.log('Produit ajouté à la liste de souhaits avec succès.');
   } catch (error) {
     console.error('Erreur lors de l\'ajout du produit à la liste de souhaits :', error);
@@ -333,7 +333,7 @@ const addProductToWishlist = async (userId: string, productId: string) => {
             </div>
 
             <button type="submit" class="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-primary-600 px-8 py-3 text-base font-medium text-white hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">Add to bag</button>
-            <a v-on:click="addProductToWishlist(userId,router.currentRoute.value.params.id)" class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white px-8 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+            <a v-on:click="addProductToWishlist(userId,router.currentRoute.value.params.id.toString())" class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white px-8 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
               Add to wishlist
             </a>  
           </form>

client/src/views/WichlistView.vue

@@ -1,28 +1,56 @@
 <script setup lang="ts">
 import LayoutComponent from "@/layout/LayoutComponent.vue";
+import axiosInstance from "@/utils/axiosInstance";
+import { onMounted, ref } from "vue";
 
-const products = [
-  {
-    id: 1,
-    name: 'Machined Brass Puzzle',
-    href: '#',
-    price: '$95.00',
-    color: 'Brass',
-    size: '3" x 3" x 3"',
-    imageSrc: '/images/hero-1.jpeg',
-    imageAlt: 'Brass puzzle in the shape of a jack with overlapping rounded posts.',
-  },
-  {
-    id: 1,
-    name: 'Machined Brass Puzzle',
-    href: '#',
-    price: '$95.00',
-    color: 'Brass',
-    size: '3" x 3" x 3"',
-    imageSrc: '/images/hero-2.jpg',
-    imageAlt: 'Brass puzzle in the shape of a jack with overlapping rounded posts.',
-  },
-]
+const token = localStorage.getItem("token");
+const isAuthenticated = !!token
+let userId = ''
+if (isAuthenticated) {
+  const payload = JSON.parse(atob(token.split('.')[1]))
+  userId = payload.userId
+}
+
+const getUserWishes = async (userId: string) => {
+  try {
+    const wishes = await axiosInstance.get(`/wishes/${userId}`).then((res) => res.data);
+    const products =
+      await Promise.all(
+        wishes.products.map(async (product: any) => {
+          const { imageSrc } = await axiosInstance.get(`/products/${product.id}`).then((res) => res.data.productImages[0].url);
+          return {
+            id: product.id,
+            name: product.name,
+            color: product.color,
+            size: product.size,
+            price: product.price / 100,
+            imageSrc,
+            imageAlt: product.name,
+            href: `/products/${product.id}`,
+          };
+        })
+      );
+    return products;
+  } catch (error) {
+    console.error("Erreur lors de la récupération de la liste de souhait :", error);
+  }
+};
+
+const removeFromWishlist = async (productId: string) => {
+  try {
+    await axiosInstance.delete(`/wishes/${userId}/${productId}`);
+    products.value = products.value.filter((product: any) => product.id !== productId);
+    console.log("Produit supprimé de la liste de souhait");
+  } catch (error) {
+    console.error("Erreur lors de la suppression du produit de la liste de souhait :", error);
+  }
+};
+
+const products = ref([]);
+
+onMounted(async () => {
+  products.value = await getUserWishes(userId);
+});
 
 </script>
 <template>
@@ -49,7 +77,7 @@ const products = [
                 {{ ' ' }}
                 <span>{{ product.size }}</span>
               </p>
-              <p class="mt-1 font-medium text-gray-900">{{ product.price }}</p>
+              <p class="mt-1 font-medium text-gray-900">{{ product.price }} €</p>
             </div>
           </div>
           <div class="mt-6 space-y-4 sm:ml-6 sm:mt-0 sm:w-40 sm:flex-none">
@@ -58,8 +86,9 @@ const products = [
               Ajouter au panier
             </button>
             <button type="button"
-                    class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white px-2.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 sm:w-full sm:flex-grow-0">
-              Retirer des favoris
+                    class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white px-2.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 sm:w-full sm:flex-grow-0"
+                    v-on:click="removeFromWishlist(product.id)">
+                    Retirer des favoris
             </button>
           </div>
         </div>