feat: create component product

src/pages/Product/Product.js

@@ -1,24 +1,38 @@
-import React, {useState} from "react";
-import {Button, Card, Col, Input, message, Row, Tabs} from "antd";
+import React, {useEffect, useState} from "react";
+import {Button, Card, Col, Input, Row, Tabs} from "antd";
 import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {Pulsa} from "./Pulsa";
-import {PulsaModal} from "./PulsaModal";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
+import {ProductComponent} from "../../component/ProductComponent";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
 
 export const Product = observer(() => {
-    const [visibleModal, setVisibleModal] = useState(false)
-    const [initialData, setInitialData] = useState({})
-    const [confirmLoading, setConfirmLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const store = useStore();
-    const callback = (key) => {
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                await store.product.getDataCategories();
+                await store.product.getData();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        init();
+    }, []);
+
+    const handleChangeTabPane = async (key) => {
+        store.product.filterCategory = key;
         console.log(key);
     };
+
     const routeData = [
         {
             route: "/app/home",
@@ -29,32 +43,7 @@ export const Product = observer(() => {
             name: <span style={{fontWeight: 'bold'}}>Product</span>,
         },
     ];
-    const onSubmit = async (data) => {
-        if (initialData.id) {
-            setInitialData({})
-            setConfirmLoading(true);
-            try {
-                await store.product.update(initialData.id, data)
-                message.success("Success Update Data Member")
-            } catch (e) {
-                message.error("Failed Update Data Member")
-            }
-            setConfirmLoading(false);
-            setVisibleModal(false);
-        } else {
-            setInitialData({})
-            setConfirmLoading(true);
-            try {
-                await store.product.create(data)
-                message.success("Success Add New Member")
-            } catch (e) {
-                console.log(e, "apa errornya")
-                message.error("Failed Add Member")
-            }
-            setConfirmLoading(false);
-            setVisibleModal(false);
-        }
-    }
+
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
@@ -71,44 +60,28 @@ export const Product = observer(() => {
                             placeholder="input search text"
                             style={{width: 200, marginRight: 10}}
                         />
-                        <Button onClick={() => setVisibleModal(true)}>
+                        <Button onClick={() => store.product.visibleModal = true}>
                             <PlusSquareOutlined/> New
                         </Button>
                     </Col>
                 </Row>
                 <Tabs
-                    defaultActiveKey="1"
-                    onChange={callback}
+                    onChange={handleChangeTabPane}
                     size="default"
                     tabBarGutter="50"
                 >
-                    <TabPane tab="Pulsa" key="1">
-                        <Pulsa/>
-                    </TabPane>
-                    <TabPane tab="Game Voucher" key="2">
-                        Game Voucher
-                    </TabPane>
-                    <TabPane tab="Product" key="3">
-                        Product
-                    </TabPane>
-                    <TabPane tab="Prduct" key="4">
-                        Prduct
-                    </TabPane>
-                    <TabPane tab="Prdct" key="5">
-                        Prdct
-                    </TabPane>
+                    {store.product.dataCategories.map((item) => (
+                        <TabPane
+                            tab={item.name}
+                            key={item.id}
+                        >
+                            <ProductComponent
+                                data={store.product.data}
+                            />
+                        </TabPane>
+                    ))}
                 </Tabs>
             </Card>
-            <PulsaModal visible={visibleModal}
-                        confirmLoading={confirmLoading}
-                        initialData={initialData}
-                        onCreate={async (data) => {
-                            onSubmit(data)
-                        }}
-                        onCancel={() => {
-                            setInitialData({})
-                            setVisibleModal(false);
-                        }}/>
         </div>
     );
 });