From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 13 Jan 2024 10:35:22 +0700
Subject: Refactor src migrate folder

---
 .../modules/product-detail/components/AddToWishlist.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src-migrate/modules/product-detail/components/AddToWishlist.tsx

(limited to 'src-migrate/modules/product-detail/components/AddToWishlist.tsx')

diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
new file mode 100644
index 00000000..eab3c7be
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@chakra-ui/react'
+import { HeartIcon } from 'lucide-react'
+import React from 'react'
+
+const AddToWishlist = () => {
+  return (
+    <Button
+      variant='link'
+      className='!text-gray-500 !font-medium'
+      leftIcon={<HeartIcon size={18} />}
+    >
+      Wishlist
+    </Button>
+  )
+}
+
+export default AddToWishlist
\ No newline at end of file
-- 
cgit v1.2.3


From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 Jan 2024 16:08:43 +0700
Subject: Update improve product detail performance

---
 src-migrate/modules/product-detail/components/AddToWishlist.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/AddToWishlist.tsx')

diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
index eab3c7be..fccbdcf5 100644
--- a/src-migrate/modules/product-detail/components/AddToWishlist.tsx
+++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
@@ -6,7 +6,7 @@ const AddToWishlist = () => {
   return (
     <Button
       variant='link'
-      className='!text-gray-500 !font-medium'
+      colorScheme='gray'
       leftIcon={<HeartIcon size={18} />}
     >
       Wishlist
-- 
cgit v1.2.3


From f02511b103acce8d3fa4bc174a43be15c4cca052 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 18 Jan 2024 12:08:37 +0700
Subject: Update add to wishlist in product detail

---
 .../product-detail/components/AddToWishlist.tsx    | 49 ++++++++++++++++++++--
 1 file changed, 46 insertions(+), 3 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/AddToWishlist.tsx')

diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
index fccbdcf5..cb11e837 100644
--- a/src-migrate/modules/product-detail/components/AddToWishlist.tsx
+++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
@@ -1,13 +1,56 @@
-import { Button } from '@chakra-ui/react'
+import { Button, useToast } from '@chakra-ui/react'
 import { HeartIcon } from 'lucide-react'
 import React from 'react'
+import { useQuery } from 'react-query'
+import { getAuth } from '~/libs/auth'
+import clsxm from '~/libs/clsxm'
+import { getUserWishlist, upsertUserWishlist } from '~/services/wishlist'
+
+type Props = {
+  productId: number
+}
+
+const AddToWishlist = ({ productId }: Props) => {
+  const auth = getAuth()
+  const toast = useToast({
+    position: 'top',
+    isClosable: true
+  })
+
+  const searchParams = { product_id: productId.toString() }
+  const query = useQuery({
+    queryKey: ['wishlist', searchParams, auth],
+    queryFn: () => {
+      if (typeof auth !== 'object') return null;
+      return getUserWishlist(auth.id, searchParams)
+    }
+  })
+
+  const isAdded = query.data?.product_total ? query.data.product_total > 0 : false;
+
+  const toggleWishlist = async () => {
+    if (typeof auth !== 'object') return;
+    await upsertUserWishlist(auth.id, productId)
+    await query.refetch()
+  }
+
+  const handleClick = async () => {
+    toast.promise(toggleWishlist(), {
+      loading: { title: 'Update Wishlist', description: 'Mohon tunggu...' },
+      success: { title: 'Update Wishlist', description: 'Berhasil update wishlist' },
+      error: { title: 'Update Wishlist', description: 'Gagal update wishlist' },
+    })
+  }
 
-const AddToWishlist = () => {
   return (
     <Button
       variant='link'
       colorScheme='gray'
-      leftIcon={<HeartIcon size={18} />}
+      onClick={handleClick}
+      leftIcon={<HeartIcon size={18} className={clsxm('transition-colors', {
+        'text-danger-500 fill-danger-500': isAdded,
+        'fill-transparent': !isAdded
+      })} />}
     >
       Wishlist
     </Button>
-- 
cgit v1.2.3


From 7298d8e811a68cb92c02a7d810f412498d1609d8 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 18 Jan 2024 13:18:04 +0700
Subject: Update product detail performance

---
 src-migrate/modules/product-detail/components/AddToWishlist.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/AddToWishlist.tsx')

diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
index cb11e837..697b2d5c 100644
--- a/src-migrate/modules/product-detail/components/AddToWishlist.tsx
+++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
@@ -23,7 +23,8 @@ const AddToWishlist = ({ productId }: Props) => {
     queryFn: () => {
       if (typeof auth !== 'object') return null;
       return getUserWishlist(auth.id, searchParams)
-    }
+    },
+    refetchOnWindowFocus: false
   })
 
   const isAdded = query.data?.product_total ? query.data.product_total > 0 : false;
-- 
cgit v1.2.3