feat: adjust flow to display transaction

src/pages/Transaction/Product.js

@@ -0,0 +1,107 @@
+import React, {useEffect, useState} from "react";
+import {useStore} from "../../utils/useStore";
+import {Button, Card, Col, Input, Modal, Row, Select} from "antd";
+import {observer} from "mobx-react-lite";
+
+const {Search} = Input;
+const {Option} = Select;
+
+export const Product = observer(() => {
+    const store = useStore();
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [productData, setProductData] = useState([]);
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                await store.transaction.getDataSubCategories();
+                await store.transaction.getDataCategories();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        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) => {
+        console.log('item', item);
+        store.transaction.filterSubCategory = item;
+        await store.transaction.getData();
+    }
+
+    const success = () => {
+        Modal.success({
+            content: 'some messages...some messages...',
+        });
+    }
+
+    return (
+        <div>
+            <Row>
+                <span style={{fontWeight: "bold", marginBottom: "10px"}}>
+                    Sub-Category
+                </span>
+            </Row>
+            <Row>
+                <Col span={24}>
+                    <Select
+                        placeholder={"Select sub-Category"}
+                        allowClear={true}
+                        onChange={(val) => {
+                            handleChangeSubcategory(val);
+                        }}
+                        style={{marginBottom: "10px", width: "100%"}}>
+                        {store.transaction.dataSubCategories.map((item, index) => (
+                            <Option key={item.id} value={item.id}>
+                                {item.name}
+                            </Option>
+                        ))}
+                    </Select>
+                </Col>
+            </Row>
+            <Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
+                <Col span={12} style={{fontWeight: "bold", display: "flex", alignItems: "center"}}>
+                    Produk & Nominal
+                </Col>
+                <Col span={12} style={{textAlign: "right"}}>
+                    <Search
+                        placeholder="input search text"
+                        style={{width: 200, marginRight: 10}}
+                    />
+                </Col>
+            </Row>
+            {productData.length != 0 && <Row>
+                {productData.map((item, index) => (
+                    <Col key={index} xs={24} md={16} lg={8}>
+                        <Card onClick={success}>
+                            <span style={{color: "black"}}>{item.name}</span>
+                            <br/>
+                            <span style={{color: "grey", fontSize: 10}}>{item.price}</span>
+                        </Card>
+                    </Col>
+                ))}
+            </Row>}
+            {productData.length != 0 && <Col style={{textAlign: "right"}}>
+                <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
+                    Beli Sekarang
+                </Button>
+            </Col>}
+        </div>
+    );
+});

src/pages/Transaction/Pulsa.js

@@ -1,126 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useStore } from "../../utils/useStore";
-import { Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space, } from "antd";
-import { DownOutlined, TabletOutlined, UserOutlined } from "@ant-design/icons";
-
-export const Pulsa = () => {
-
-    const store = useStore();
-
-    const [isLoading, setIsLoading] = useState(false);
-
-    const [productData, setProductData] = useState([])
-    const [productFilter, setProductFilter] = useState("")
-    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 () => {
-            try {
-                setIsLoading(true);
-                await store.transaction.getDataSubCategories();
-                await store.transaction.getData();
-                await store.transaction.getDataCategories();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
-
-        init();
-        setProductFilter("")
-    }, []);
-
-    // 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])
-
-
-    function handleMenuClick(item) {
-        message.info("⚡ Click on menu item.");
-        console.log("⚡ click", item);
-        setProductFilter(item.name)
-    }
-
-    const menu = (
-        <Menu style={{
-            backgroundColor: 'white'
-        }}>
-            {store.transaction.dataSubCategories.map((item, index) => (
-                <Menu.Item key="1" icon={<UserOutlined />} onClick={() => handleMenuClick(item)} >
-                    {item.name}
-                </Menu.Item>
-            ))}
-
-        </Menu>
-    );
-
-    function success() {
-        Modal.success({
-            content: 'some messages...some messages...',
-        });
-    }
-
-    return (
-        <div>
-            <Row>
-                <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
-                    Sub-Category
-                </span>
-            </Row>
-            <Row>
-                <Space wrap>
-                    <Dropdown overlay={menu}>
-                        <Button
-                            style={{
-                                marginBottom: "20px",
-                                color: "grey",
-                            }}
-                        >
-                            <TabletOutlined />
-                            Select sub-Category
-                            <DownOutlined />
-                        </Button>
-                    </Dropdown>
-                </Space>
-            </Row>
-            <Row>
-                <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
-                    Produk & Nominal
-                </span>
-            </Row>
-            <Row>
-                {productData.map((item, index) => (
-                    <Col key={index} xs={24} md={16} lg={8}>
-                        <Card onClick={success}>
-                            <span style={{ color: "black" }}>{item.name}</span>
-                            <br />
-                            <span style={{ color: "grey", fontSize: 10 }}>{item.price}</span>
-                        </Card>
-                    </Col>
-                ))}
-            </Row>
-            <Col style={{ textAlign: "right" }}>
-                <Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
-                    Beli Sekarang
-                </Button>
-            </Col>
-        </div>
-    );
-};

src/pages/Transaction/Transaction.js

@@ -1,16 +1,14 @@
-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";
+import React, {useEffect, useState} from "react";
+import {useStore} from "../../utils/useStore";
+import {Card, Tabs} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {Product} from "./Product";
+import {LINKS} from "../../routes/app";
+import {observer} from "mobx-react-lite";
 
-const { TabPane } = Tabs;
-const { Search } = Input;
-
-export const Transaction = () => {
+const {TabPane} = Tabs;
 
+export const Transaction = observer(() => {
   const store = useStore();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -35,9 +33,10 @@ export const Transaction = () => {
     console.log('⚡ transaction category store', store.transaction.dataCategories)
   }, [store.transaction.dataCategories])
 
-  const callback = (key) => {
-    console.log(key);
+  const handleChangeTabs = async (key) => {
+    store.transaction.filterCategory = key;
   };
+
   const routeData = [
     {
       route: LINKS.HOME,
@@ -45,36 +44,22 @@ 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="" />
+        <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}
+              onChange={handleChangeTabs}
               size="default"
               tabBarGutter="50"
           >
             {store.transaction.dataCategories.map((item, index) => (
-            <TabPane tab={item.name} key={index}>
-              <Pulsa />
+                <TabPane tab={item.name} key={item.id}>
+                  <Product/>
                 </TabPane>
             ))}
 
@@ -82,4 +67,4 @@ export const Transaction = () => {
         </Card>
       </div>
   );
-};
+});

src/store/transaction.js

@@ -6,7 +6,7 @@ export class Transaction {
     pageSize = 10
     data = [];
     total_data = 0;
-    filterCategory = null;
+    filterSubCategory = null;
     visibleModalProduct = false;
 
     pageCategories = 0;
@@ -18,6 +18,7 @@ export class Transaction {
     pageSizeSubCategories = 10
     dataSubCategories = [];
     total_dataSubCategories = 0;
+    filterSubCategory = null;
 
     pageHistoryTransaction = 0;
     // pageSizeHistoryTransaction = 10
@@ -31,7 +32,7 @@ export class Transaction {
 
     async getData() {
         try {
-            const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
+            const response = await http.get(`/product/by-categories-all?subCategories=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
             this.data = response.body.data ?? []
             this.total_data = response.body.total_data ?? 0
         } catch (e) {
@@ -41,7 +42,7 @@ export class Transaction {
 
     async getDataSubCategories() {
         try {
-            const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+            const response = await http.get(`/product/sub-categories?categories=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
             this.dataSubCategories = response.body.data ?? []
             this.total_dataSubCategories = response.body.count ?? 0
         } catch (e) {