From 93d5fc02205989a7dfdaaef80f2a9f4369bf9057 Mon Sep 17 00:00:00 2001
From: Alessandro Casazza <alessandro@commercelayer.io>
Date: Thu, 14 Oct 2021 18:27:35 +0200
Subject: [PATCH] feat: Add wishlist

---
 .../WishlistButton/WishlistButton.tsx         |  1 -
 .../wishlist/WishlistCard/WishlistCard.tsx    |  1 +
 .../commercelayer/product/use-search.tsx      |  3 +--
 .../commercelayer/wishlist/use-add-item.tsx   | 19 ++++++++++++++-----
 .../wishlist/use-remove-item.tsx              | 13 ++++++++-----
 .../commercelayer/wishlist/use-wishlist.tsx   | 18 ++++++++++++++++++
 6 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx
index 7b1801e83..7de2e7980 100644
--- a/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/components/wishlist/WishlistButton/WishlistButton.tsx
@@ -34,7 +34,6 @@ const WishlistButton: FC<Props> = ({
       item.product_id === productId &&
       item.variant_id === variant.id
   )
-
   const handleWishlistChange = async (e: any) => {
     e.preventDefault()
 
diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
index ee1403bf4..6ba274e00 100644
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -53,6 +53,7 @@ const WishlistCard: FC<Props> = ({ item }) => {
       await addItem({
         productId: String(product.id),
         variantId: String(product.variants[0].id),
+        sizeId: String(product.variants[0].options[0].id),
       })
       openSidebar()
       setLoading(false)
diff --git a/framework/commercelayer/product/use-search.tsx b/framework/commercelayer/product/use-search.tsx
index e1018b8c1..941c2eeb3 100644
--- a/framework/commercelayer/product/use-search.tsx
+++ b/framework/commercelayer/product/use-search.tsx
@@ -1,7 +1,6 @@
 import { SWRHook } from '@commerce/utils/types'
 import useSearch, { UseSearch } from '@commerce/product/use-search'
 import data from '../data.json'
-import useCallback from 'react'
 export default useSearch as UseSearch<typeof handler>
 
 const productsFinder = (s: string) => {
@@ -31,7 +30,7 @@ export const handler: SWRHook<any> = {
                 products,
                 found: true,
               }
-            : null,
+            : data,
       }
     },
 }
diff --git a/framework/commercelayer/wishlist/use-add-item.tsx b/framework/commercelayer/wishlist/use-add-item.tsx
index 75f067c3a..1d4ee532e 100644
--- a/framework/commercelayer/wishlist/use-add-item.tsx
+++ b/framework/commercelayer/wishlist/use-add-item.tsx
@@ -1,10 +1,19 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
 export function emptyHook() {
-  const useEmptyHook = async (options = {}) => {
-    return useCallback(async function () {
-      return Promise.resolve()
-    }, [])
+  const useEmptyHook = async (options: any = {}) => {
+    let wishlist = []
+    const localWishlist = localStorage.getItem('wishlist')
+    if (localWishlist) {
+      wishlist = JSON.parse(localWishlist)
+      if (!wishlist.includes(options.variantId)) {
+        wishlist.push(options.variantId)
+      }
+    } else {
+      wishlist.push(options.variantId)
+    }
+    localStorage.setItem('wishlist', JSON.stringify(wishlist))
+    return wishlist
   }
 
   return useEmptyHook
diff --git a/framework/commercelayer/wishlist/use-remove-item.tsx b/framework/commercelayer/wishlist/use-remove-item.tsx
index a2d3a8a05..4d3de01ce 100644
--- a/framework/commercelayer/wishlist/use-remove-item.tsx
+++ b/framework/commercelayer/wishlist/use-remove-item.tsx
@@ -1,14 +1,17 @@
-import { useCallback } from 'react'
-
 type Options = {
   includeProducts?: boolean
 }
 
 export function emptyHook(options?: Options) {
   const useEmptyHook = async ({ id }: { id: string | number }) => {
-    return useCallback(async function () {
-      return Promise.resolve()
-    }, [])
+    let wishlist = []
+    const localWishlist = localStorage.getItem('wishlist')
+    if (localWishlist) {
+      wishlist = JSON.parse(localWishlist)
+      wishlist = wishlist.filter((p: string) => p !== id)
+    }
+    localStorage.setItem('wishlist', JSON.stringify(wishlist))
+    return Promise.resolve()
   }
 
   return useEmptyHook
diff --git a/framework/commercelayer/wishlist/use-wishlist.tsx b/framework/commercelayer/wishlist/use-wishlist.tsx
index 9fe0e758f..0c9cdc4c4 100644
--- a/framework/commercelayer/wishlist/use-wishlist.tsx
+++ b/framework/commercelayer/wishlist/use-wishlist.tsx
@@ -1,5 +1,7 @@
 import { HookFetcher } from '@commerce/utils/types'
 import type { Product } from '@commerce/types/product'
+import { products } from '../data.json'
+import { useCustomer } from '@framework/customer'
 
 const defaultOpts = {}
 
@@ -32,6 +34,22 @@ export function extendHook(
   swrOptions?: any
 ) {
   const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
+    const { data: customer } = useCustomer()
+    const getWishlist =
+      typeof localStorage !== 'undefined' && localStorage.getItem('wishlist')
+    if (getWishlist && customer?.email) {
+      const wishlist = JSON.parse(getWishlist)
+      const items = wishlist.map((wishlist: string) => {
+        const [product] = products.filter((p) => p.id === wishlist) as any
+        return {
+          variant_id: wishlist,
+          product_id: wishlist,
+          id: wishlist,
+          product,
+        }
+      })
+      return { data: { items } }
+    }
     return { data: null }
   }