feat: rewrite modal logic product

src/component/ProductComponent.js

@@ -1,17 +1,47 @@
-import React, {useState} from "react";
-import {Button, message, Modal, Space, Table, Tag} from "antd";
+import React, {useEffect, useState} from "react";
+import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
 import {capitalize} from "lodash";
-import {store} from "../utils/useStore";
-import {PulsaModal} from "../pages/Product/PulsaModal";
+import {useStore} from "../utils/useStore";
 
 export const ProductComponent = observer((props) => {
+    const store = useStore();
+    const [form] = Form.useForm();
+    const {Option} = Select;
     const history = useHistory();
-    const [initialData, setInitialData] = useState({});
+    const [idData, setIdData] = useState('');
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
+    const [visibleModal, setVisibleModal] = useState(false);
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                await store.product.getDataSubCategories();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        init();
+    }, []);
+
+    const handleEditButton = (data) => {
+        console.log(data, "isi data")
+        form.setFieldsValue({
+            name: data.name,
+            price: data.price,
+            base_price: data.base_price,
+            code: data.code,
+            status: data.status,
+        });
+        setVisibleModal(true);
+        setIdData(data.id);
+    }
 
     const columns = [
         {
@@ -67,15 +97,10 @@ export const ProductComponent = observer((props) => {
             render: (text, record) => (
                 <Space size="middle">
                     <Button
-                        onClick={() => {
-                            setInitialData(record);
-                            store.product.visibleModal = true;
-                        }}
+                        onClick={() => handleEditButton(record)}
                     >Edit</Button>
                     <Button
-                        onClick={async () => {
-                            handleDelete(record.id);
-                        }}
+                        onClick={() => handleDelete(record.id)}
                     >
                         Delete
                     </Button>
@@ -112,20 +137,23 @@ export const ProductComponent = observer((props) => {
         });
     };
 
-    const onSubmit = async (data) => {
-        if (initialData.id) {
-            setInitialData({})
+    const handleCancel = () => {
+        setIdData('')
+        setVisibleModal(false);
+    }
+
+    const handleSubmit = async (data) => {
+        if (idData != '') {
             setConfirmLoading(true);
             try {
-                await store.product.update(initialData.id, data)
+                await store.product.update(idData, data)
                 message.success("Success Update Data Member")
             } catch (e) {
                 message.error("Failed Update Data Member")
             }
             setConfirmLoading(false);
-            store.product.visibleModal = false;
+            setVisibleModal(false);
         } else {
-            setInitialData({})
             setConfirmLoading(true);
             try {
                 await store.product.create(data)
@@ -135,7 +163,7 @@ export const ProductComponent = observer((props) => {
                 message.error("Failed Add Member")
             }
             setConfirmLoading(false);
-            store.product.visibleModal = false;
+            setVisibleModal(false);
         }
     }
 
@@ -147,16 +175,84 @@ export const ProductComponent = observer((props) => {
                 dataSource={props.data}
                 bordered
             />
-            <PulsaModal visible={store.product.visibleModal}
-                        confirmLoading={confirmLoading}
-                        initialData={initialData}
-                        onCreate={async (data) => {
-                            await onSubmit(data)
-                        }}
+            <Modal
+                visible={visibleModal}
+                title={idData ? "Edit Product" : "Create a new Product"}
+                okText={idData ? "Edit" : "Create"}
+                cancelText="Cancel"
                 onCancel={() => {
-                            setInitialData({})
-                            store.product.visibleModal = false;
-                        }}/>
+                    form.resetFields();
+                    handleCancel();
+                }}
+                onOk={() => {
+                    form
+                        .validateFields()
+                        .then((values) => {
+                            handleSubmit(values);
+                            form.resetFields();
+                        })
+                        .catch((info) => {
+                            console.error("Validate Failed:", info);
+                        });
+                }}
+            >
+                <Form
+                    form={form}
+                    layout="vertical"
+                >
+                    <Form.Item
+                        name="name"
+                        label="Name"
+                        rules={[{required: true, message: "Please input name!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item
+                        name="price"
+                        label="Price"
+                        rules={[{required: true, message: "Please input price!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item
+                        name="base_price"
+                        label="Mark Up Price"
+                        rules={[{required: true, message: "Please input mark up price!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item
+                        name="code"
+                        label="Code"
+                        rules={[{required: true, message: "Please input code!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item
+                        name="status"
+                        label="Status"
+                        rules={[{required: true, message: "Please select Status!"}]}
+                    >
+                        <Select placeholder="Select Sub Category" allowClear>
+                            <Option value="ACTIVE">ACTIVE</Option>
+                            <Option value="INACTIVE">INACTIVE</Option>
+                        </Select>
+                    </Form.Item>
+                    <Form.Item
+                        name="sub_category"
+                        label="Sub categories"
+                        rules={[{required: true, message: "Please select sub categories!"}]}
+                    >
+                        <Select placeholder="Select Sub Category" allowClear>
+                            {store.product.dataSubCategories.map((item) => (
+                                <Option value={item.id} key={item.id}>
+                                    {item.name}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                </Form>
+            </Modal>
         </div>
     );
 });

src/pages/Product/PulsaModal.js

@@ -1,108 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {Form, Input, Modal, Select} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-
-export const PulsaModal = observer(({visible, onCreate, onCancel, initialData, confirmLoading}) => {
-  const [form] = Form.useForm();
-  const {Option} = Select;
-  const store = useStore();
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    const init = async () => {
-      try {
-        setIsLoading(true);
-        await store.product.getDataSubCategories();
-        setIsLoading(false);
-      } catch (e) {
-        setIsLoading(false);
-      }
-    };
-
-    init();
-  }, []);
-
-  return (
-      <Modal
-          visible={visible}
-          title={initialData.id ? "Edit Product" : "Create a new Product"}
-          okText={initialData.id ? "Edit" : "Create"}
-          cancelText="Cancel"
-          onCancel={() => {
-            form.resetFields();
-            onCancel();
-          }}
-          onOk={() => {
-            form
-                .validateFields()
-                .then((values) => {
-                  onCreate(values);
-                  form.resetFields();
-                })
-                .catch((info) => {
-                  console.error("Validate Failed:", info);
-                });
-          }}
-      >
-        <Form
-            form={form}
-            layout="vertical"
-            name="form_in_modal"
-            initialValues={initialData}
-        >
-          <Form.Item
-              name="name"
-              label="Name"
-              rules={[{required: true, message: "Please input name!"}]}
-          >
-            <Input/>
-          </Form.Item>
-          <Form.Item
-              name="price"
-              label="Price"
-              rules={[{required: true, message: "Please input price!"}]}
-          >
-            <Input/>
-          </Form.Item>
-          <Form.Item
-              name="base_price"
-              label="Mark Up Price"
-              rules={[{required: true, message: "Please input mark up price!"}]}
-          >
-            <Input/>
-          </Form.Item>
-          <Form.Item
-              name="code"
-              label="Code"
-              rules={[{required: true, message: "Please input code!"}]}
-          >
-            <Input/>
-          </Form.Item>
-          <Form.Item
-              name="status"
-              label="Status"
-              rules={[{required: true, message: "Please select Status!"}]}
-          >
-            <Select placeholder="Select Sub Category" allowClear>
-              <Option value="ACTIVE">ACTIVE</Option>
-              <Option value="INACTIVE">INACTIVE</Option>
-            </Select>
-          </Form.Item>
-          <Form.Item
-              name="sub_category"
-              label="Sub categories"
-              rules={[{required: true, message: "Please select sub categories!"}]}
-          >
-            <Select placeholder="Select Sub Category" allowClear>
-              {store.product.dataSubCategories.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
-              ))}
-            </Select>
-          </Form.Item>
-        </Form>
-      </Modal>
-  );
-});

src/store/product.js

@@ -18,8 +18,6 @@ export class Product {
     dataSubCategories = [];
     total_dataSubCategories = 0;
 
-    visibleModal = false;
-
     constructor(ctx) {
         this.ctx = ctx;
         makeAutoObservable(this);