From 9208bd5dd82655f8455c785bc896fe07167ff48b Mon Sep 17 00:00:00 2001
From: buckyhelmsmash <buckyhelmsmash@gmail.com>
Date: Fri, 10 Dec 2021 17:59:41 +0700
Subject: [PATCH] fix: responsive tabs by data T[Transaction page]

---
 src/pages/Transaction/Pulsa.js       |  18 +++--
 src/pages/Transaction/Transaction.js | 115 +++++++++++++++------------
 2 files changed, 79 insertions(+), 54 deletions(-)

diff --git a/src/pages/Transaction/Pulsa.js b/src/pages/Transaction/Pulsa.js
index 9397be8..bb7195d 100644
--- a/src/pages/Transaction/Pulsa.js
+++ b/src/pages/Transaction/Pulsa.js
@@ -11,11 +11,17 @@ export const Pulsa = () => {
 
     const [productData, setProductData] = useState([])
     const [productFilter, setProductFilter] = useState("")
-    // useEffect(()=>{
-    //     if(!productFilter){
-    //         setProductData(store.transaction.data)
-    //     }
-    // },[productFilter])
+    useEffect(() => {
+        if (!productFilter) {
+            console.log('⚡ filter is null', productFilter)
+            setProductData(store.transaction.data)
+        } 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
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index 5d5e506..33cf846 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -1,14 +1,40 @@
-import React from "react";
-import {Button, Card, Col, Input, Row, Tabs} from "antd";
-import {FilterOutlined,} from "@ant-design/icons";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {Pulsa} from "./Pulsa";
-import {LINKS} from "../../routes/app";
+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";
+import { Pulsa } from "./Pulsa";
+import { LINKS } from "../../routes/app";
 
-const {TabPane} = Tabs;
-const {Search} = Input;
+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);
   };
@@ -19,50 +45,41 @@ export const Transaction = () => {
     },
     {
       route: LINKS.TRANSACTION,
-      name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
+      name: <span style={{ fontWeight: 'bold' }}>Transaction</span>,
     },
   ];
   return (
-      <div className={["ppob-container"].join(" ")}>
-        <BreadcumbComponent data={routeData} text=""/>
-        <Card>
-          <Row style={{marginBottom: 20}}>
-            <Col span={12}>
-              <Button>
-                <FilterOutlined/>
-                Filter
-              </Button>
-            </Col>
-            <Col span={12} style={{textAlign: "right"}}>
-              <Search
-                  placeholder="input search text"
-                  style={{width: 200, marginRight: 10}}
-              />
-            </Col>
-          </Row>
-          <Tabs
-              defaultActiveKey="1"
-              onChange={callback}
-              size="default"
-              tabBarGutter="50"
-          >
-            <TabPane tab="Pulsa" key="1">
-              <Pulsa/>
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData} text="" />
+      <Card>
+        <Row style={{ marginBottom: 20 }}>
+          <Col span={12}>
+            <Button>
+              <FilterOutlined />
+              Filter
+            </Button>
+          </Col>
+          <Col span={12} style={{ textAlign: "right" }}>
+            <Search
+              placeholder="input search text"
+              style={{ width: 200, marginRight: 10 }}
+            />
+          </Col>
+        </Row>
+        <Tabs
+          defaultActiveKey="1"
+          onChange={callback}
+          size="default"
+          tabBarGutter="50"
+        >
+          {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>
+          ))}
+
+        </Tabs>
+      </Card>
+    </div>
   );
 };