feat: add modal loader for each API request

src/component/SupplierComponent.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useContext, useState} from "react";
 import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
@@ -6,12 +6,14 @@ import {useHistory} from "react-router-dom";
 import {useStore} from "../utils/useStore";
 import {LINKS} from "../routes/app";
 import {TopupsaldoModal} from "./TopupsaldoModal";
+import {ModalLoaderContext} from "../utils/modal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
   const history = useHistory();
   const [idData, setIdData] = useState("");
+  const modalLoader = useContext(ModalLoaderContext);
 
   const handleEditButton = (data) => {
     console.log(data, "isi data");
@@ -37,12 +39,14 @@ export const SupplierComponent = observer((props) => {
     const status = isActive ? "inactive" : "active";
     const status2 = isActive ? "Inactivating" : "Activating";
     try {
+      modalLoader.setLoading(true);
       const response = await store.supplier.changeStatus(id, status);
-
+      modalLoader.setLoading(false);
       response?.body?.statusCode === 201
         ? message.success(`Success ${status2} Supplier`)
         : message.error(`Failed ${status2} Supplier`);
     } catch (err) {
+      modalLoader.setLoading(false);
       console.log("error", err);
       message.error(`Failed ${status2} Supplier`);
     }
@@ -66,10 +70,10 @@ export const SupplierComponent = observer((props) => {
       key: ["coa", "amount"],
       width: "20%",
       render: (text, record) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text)
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text)
     },
     {
       title: "Status",
@@ -79,7 +83,7 @@ export const SupplierComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
+          style={{color: "#4F566B"}}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
@@ -107,10 +111,13 @@ export const SupplierComponent = observer((props) => {
   const deleteData = async (id) => {
     try {
       console.log(id);
+      modalLoader.setLoading(true);
       await store.supplier.delete(id);
+      modalLoader.setLoading(false);
       message.success("Data Berhasil Dihapus");
       history.push(LINKS.PRODUCT);
     } catch (err) {
+      modalLoader.setLoading(false);
       console.log("error", err);
       message.error("Gagal menghapus");
     }
@@ -119,7 +126,7 @@ export const SupplierComponent = observer((props) => {
   const handleDelete = (id) => {
     Modal.confirm({
       title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined />,
+      icon: <ExclamationCircleOutlined/>,
       okText: "Yes",
       okType: "primary",
       cancelText: "Cancel",
@@ -141,18 +148,21 @@ export const SupplierComponent = observer((props) => {
     console.log(data, "isi data2");
     if (idData !== "") {
       try {
+        modalLoader.setLoading(true);
         await store.supplier.update(idData, data);
         message.success("Success Update Data Member");
-        await store.supplier.getData();
       } catch (e) {
+        modalLoader.setLoading(false);
         message.error("Failed Update Data Member");
       }
 
+      modalLoader.setLoading(false);
       store.supplier.visibleModalSupplier = false;
       setIdData("");
       form.resetFields();
     } else {
       try {
+        modalLoader.setLoading(true);
         await store.supplier.create(data);
         message.success("Success Add New Member");
       } catch (e) {
@@ -160,6 +170,7 @@ export const SupplierComponent = observer((props) => {
         message.error("Failed Add Member");
       }
 
+      modalLoader.setLoading(false);
       store.supplier.visibleModalSupplier = false;
       setIdData("");
       form.resetFields();
@@ -169,7 +180,7 @@ export const SupplierComponent = observer((props) => {
   return (
     <div>
       <Table
-        style={{ textAlign: "center" }}
+        style={{textAlign: "center"}}
         columns={columns}
         dataSource={store.supplier.data}
         bordered
@@ -184,7 +195,9 @@ export const SupplierComponent = observer((props) => {
           let pageNumber = page.current;
           store.supplier.pageSize = page.pageSize;
           store.supplier.page = pageNumber - 1;
+          modalLoader.setLoading(true);
           await store.supplier.getData();
+          modalLoader.setLoading(false);
         }}
       />
       <Modal
@@ -213,22 +226,22 @@ export const SupplierComponent = observer((props) => {
           <Form.Item
             name="name"
             label="Name"
-            rules={[{ required: true, message: "Please input name!" }]}
+            rules={[{required: true, message: "Please input name!"}]}
           >
-            <Input />
+            <Input/>
           </Form.Item>
           {!idData && (
             <Form.Item
               name="code"
               label="Kode"
-              rules={[{ required: true, message: "Please input kode!" }]}
+              rules={[{required: true, message: "Please input kode!"}]}
             >
-              <Input />
+              <Input/>
             </Form.Item>
           )}
         </Form>
       </Modal>
-      <TopupsaldoModal code={store.supplier.code} />
+      <TopupsaldoModal code={store.supplier.code}/>
     </div>
   );
 });