fix: product page

src/pages/Transaction/Product.js

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
@@ -10,8 +10,6 @@ const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
-
-  const [productData, setProductData] = useState([]);
   const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
@@ -36,20 +34,6 @@ export const Product = observer(() => {
     init();
   }, []);
 
-  // data
-  useEffect(() => {
-    console.log("⚡ transaction data store", store.transaction.data);
-    setProductData(store.transaction.data);
-  }, [store.transaction.data]);
-
-  // Subcategory
-  useEffect(() => {
-    console.log(
-      "⚡ transaction subcategory store",
-      store.transaction.dataSubCategories
-    );
-  }, [store.transaction.dataSubCategories]);
-
   const handleChangeSubcategory = async (item) => {
     store.transaction.filterSubCategory = item;
     modalLoader.setLoading(true);
@@ -116,9 +100,9 @@ export const Product = observer(() => {
           />
         </Col>
       </Row>
-      {productData.length != 0 && (
+      {store.transaction.data.length != 0 && (
           <Row>
-          {productData.map((item, index) => (
+            {store.transaction.data.map((item, index) => (
                 <Col key={index} xs={24} md={16} lg={8}>
                   <Card
                       onClick={() => {
@@ -151,7 +135,7 @@ export const Product = observer(() => {
             ))}
           </Row>
       )}
-      {productData.length !== 0 && (
+      {store.transaction.data.length !== 0 && (
           <Col style={{textAlign: "right", marginTop: "1em"}}>
             <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
               Beli Sekarang

src/pages/Transaction/Transaction.js

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState,message} from "react";
+import React, {message, useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Card, Tabs} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@@ -14,7 +14,6 @@ export const Transaction = observer(() => {
 
   const modalLoader = useContext(ModalLoaderContext);
 
-  // Init
   useEffect(() => {
     const init = async () => {
       try {
@@ -34,14 +33,11 @@ export const Transaction = observer(() => {
     init();
   }, []);
 
-  // Category
-  useEffect(() => {
-    console.log('⚡ transaction category store', store.transaction.dataCategories)
-  }, [store.transaction.dataCategories])
-
   const handleChangeTabs = async (key) => {
-    store.transaction.filterCategory = key;
+    store.transaction.dataSubCategories = [];
+    store.transaction.data = [];
     modalLoader.setLoading(true);
+    store.transaction.filterCategory = key;
     await store.transaction.getDataSubCategories();
     modalLoader.setLoading(false);
   };