Pages Membership

src/pages/Transaction/Product.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useStore } from "../../utils/useStore";
-import { Button, Card, Col, Input, Row, Select ,message} from "antd";
+import { Button, Card, Col, Input, Row, Select, message } from "antd";
 import { observer } from "mobx-react-lite";
 import { BuyProductModal } from "../../component/BuyProductModal";
 
@@ -14,6 +14,7 @@ export const Product = observer(() => {
   const [productData, setProductData] = useState([]);
   const [data, setData] = useState({});
   const [kode, setKode] = useState({});
+  const [cardIndex, setCardIndex] = useState({});
 
   useEffect(() => {
     const init = async () => {
@@ -50,14 +51,10 @@ export const Product = observer(() => {
     await store.transaction.getData();
   };
 
-  const handleBuy = async (data) => {
-    setKode(data.code);
-    //console.log(data.code)
-  };
-  const handleBuyProduct = async (kode)=>{
-    console.log(kode)
+  const handleBuyProduct = async (kode) => {
+    console.log(kode);
     try {
-      await store.product.buyProduct({productCode:kode});
+      await store.product.buyProduct({ productCode: kode });
       message.success("Success Buy Product");
     } catch (e) {
       message.error("Failed Buy Product");
@@ -110,8 +107,16 @@ export const Product = observer(() => {
           {productData.map((item, index) => (
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
-                onClick={() => handleBuy(item)} 
-                style={{ cursor: "pointer",backgroundColor:"#2D9CDB" }}
+                onClick={() => {
+                  setKode(item.code);
+                  setCardIndex(index);
+                }}
+                hoverable
+                style={{
+                  cursor: "pointer",
+                  borderColor: cardIndex === index ? "#2D9CDB" : "",
+                  marginLeft: "10px",
+                }}
               >
                 <span style={{ color: "black" }}>{item.name}</span>
                 <br />
@@ -128,8 +133,9 @@ export const Product = observer(() => {
       )}
       {productData.length !== 0 && (
         <Col style={{ textAlign: "right" }}>
-          <Button style={{ backgroundColor: "#2D9CDB", color: "white" }}
-          onClick={() => handleBuyProduct(kode)} 
+          <Button
+            style={{ backgroundColor: "#2D9CDB", color: "white" }}
+            onClick={() => handleBuyProduct(kode)}
           >
             Beli Sekarang
           </Button>