fix: responsive tabs by data T[Transaction page]

src/pages/Transaction/Pulsa.js

@@ -11,11 +11,17 @@ export const Pulsa = () => {
 
     const [productData, setProductData] = useState([])
     const [productFilter, setProductFilter] = useState("")
-    // useEffect(()=>{
+    useEffect(() => {
-    //     if(!productFilter){
+        if (!productFilter) {
-    //         setProductData(store.transaction.data)
+            console.log('⚡ filter is null', productFilter)
-    //     }
+            setProductData(store.transaction.data)
-    // },[productFilter])
+        } else {
+            console.log('⚡ filter is not null', productFilter)
+            setProductData(store.transaction.data.filter(function (product) {
+                return product.sub_categories.name === productFilter
+            }))
+        }
+    }, [productFilter])
 
     useEffect(() => {
         const init = async () => {
@@ -23,6 +29,7 @@ export const Pulsa = () => {
                 setIsLoading(true);
                 await store.transaction.getDataSubCategories();
                 await store.transaction.getData();
+                await store.transaction.getDataCategories();
                 setIsLoading(false);
             } catch (e) {
                 setIsLoading(false);
@@ -30,6 +37,7 @@ export const Pulsa = () => {
         };
 
         init();
+        setProductFilter("")
     }, []);
 
     // data

src/pages/Transaction/Transaction.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../utils/useStore";
 import { Button, Card, Col, Input, Row, Tabs } from "antd";
 import { FilterOutlined, } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -9,6 +10,31 @@ const {TabPane} = Tabs;
 const { Search } = Input;
 
 export const Transaction = () => {
+
+  const store = useStore();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Init
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        await store.transaction.getDataCategories();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
+    init();
+  }, []);
+
+  // Category
+  useEffect(() => {
+    console.log('⚡ transaction category store', store.transaction.dataCategories)
+  }, [store.transaction.dataCategories])
+
   const callback = (key) => {
     console.log(key);
   };
@@ -46,21 +72,12 @@ export const Transaction = () => {
           size="default"
           tabBarGutter="50"
         >
-            <TabPane tab="Pulsa" key="1">
+          {store.transaction.dataCategories.map((item, index) => (
+            <TabPane tab={item.name} key={index}>
               <Pulsa />
             </TabPane>
-            <TabPane tab="Game Voucher" key="2">
+          ))}
-              Game Voucher
+
-            </TabPane>
-            <TabPane tab="Product" key="3">
-              Product
-            </TabPane>
-            <TabPane tab="Prduct" key="4">
-              Product
-            </TabPane>
-            <TabPane tab="Prdct" key="5">
-              Product
-            </TabPane>
         </Tabs>
       </Card>
     </div>