Add or remove wishlist

1 files changed, 50 insertions, 5 deletions

diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index fe467439..dd097bbe 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -12,6 +12,9 @@ import toast from "react-hot-toast";
 import Footer from "@/components/layouts/Footer";
 import Image from "@/components/elements/Image";
 import LineDivider from "@/components/elements/LineDivider";
+import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
+import { useAuth } from "@/core/utils/auth";
+import { HeartIcon } from "@heroicons/react/24/outline";
 
 export async function getServerSideProps( context ) {
   const { slug } = context.query;
@@ -29,6 +32,7 @@ export async function getServerSideProps( context ) {
 }
 
 export default function ProductDetail({ product }) {
+  const [ auth ] = useAuth();
   const router = useRouter();
   const { slug } = router.query;
   const [selectedVariant, setSelectedVariant] = useState("");
@@ -42,12 +46,41 @@ export default function ProductDetail({ product }) {
     weight: product.weight,
     attributes: '',
   });
+
+  const [ isAddedToWishlist, setAddedToWishlist ] = useState(false);
+  
+  const addOrDeleteWishlist = async () => {
+    if (auth) {
+      await apiOdoo('POST', `/api/v1/user/${auth.id}/wishlist/create-or-delete`, {
+        product_id: product.id
+      });
+      if (isAddedToWishlist) {
+        toast.success('Berhasil menghapus dari wishlist');
+      } else {
+        toast.success('Berhasil menambahkan ke wishlist');
+      }
+      setAddedToWishlist(!isAddedToWishlist);
+    } else {
+      toast.error('Login terlebih dahulu untuk melanjutkan');
+      router.push('/login');
+    }
+  };
+
+  useEffect(() => {
+    if (auth) {
+      const checkWishlist = async () => {
+        const wishlist = await apiOdoo('GET', `/api/v1/user/${auth.id}/wishlist?product_id=${product.id}`);
+        setAddedToWishlist(wishlist.product_total > 0 ? true : false);
+      }
+      checkWishlist();
+    }
+  }, [ auth, product ]);
   
   useEffect(() => {
     if (product.variants.length == 1) {
       setSelectedVariant(product.variants[0].id);
     }
-  }, [product]);
+  }, [ product ]);
 
   useEffect(() => {
     setSimilarProducts(null);
@@ -116,10 +149,22 @@ export default function ProductDetail({ product }) {
         />
 
         <div className="p-4">
-          <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
-            {product.manufacture.name ?? '-'}
-          </Link>
-          <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
+        <div className="flex justify-between">
+          <div>
+            <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
+              {product.manufacture.name ?? '-'}
+            </Link>
+            <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
+          </div>
+          <button className="h-fit" onClick={addOrDeleteWishlist}>
+            { isAddedToWishlist && (
+              <HeartIconSolid className="w-6 text-red_r-10" />
+            ) }
+            { !isAddedToWishlist && (
+              <HeartIcon className="w-6" />
+            ) }
+          </button>
+        </div>
 
           {product.variant_total > 1 && !selectedVariant && product.lowest_price.price > 0 ? (
             <p className="text-caption-2 text-gray-800 mb-1">Harga mulai dari:</p>