Update add to wishlist in product detail

1 files changed, 46 insertions, 3 deletions

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>