feat: add modal loader for each API request

src/pages/Payback/Payback.js

@@ -1,4 +1,4 @@
-import React, { useState ,useEffect} from "react";
+import React, {useState, useEffect, useContext} from "react";
 import {
   Button,
   Card,
@@ -12,42 +12,37 @@ import {
   Space,
   Table,
 } from "antd";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
 import {
   CheckCircleOutlined,
   CloseOutlined,
   FilterOutlined,
   PlusSquareOutlined,
 } from "@ant-design/icons";
-import { PaybackModal } from "./PaybackModal";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { LINKS } from "../../routes/app";
+import {PaybackModal} from "./PaybackModal";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {ModalLoaderContext} from "../../utils/modal";
 
-const { Search } = Input;
+const {Search} = Input;
 
 export const Payback = observer(() => {
   const store = useStore();
-  const [visibleModal, setVisibleModal] = useState(false);
-  const [confirmLoading, setConfirmLoading] = useState(false);
-  const [initialData, setInitialData] = useState({});
-  //const [confirmLoading, setConfirmLoading] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
+  const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
-      const init = async () => {
-        try {
-          setIsLoading(true);
-          await store.payback.getDataUser();
-          //await store.role.getData();
-          setIsLoading(false);
-        } catch (e) {
-          setIsLoading(false);
-        }
-      };
-  
-      init();
+    const init = async () => {
+      try {
+        modalLoader.setLoading(true);
+        await store.payback.getDataUser();
+        modalLoader.setLoading(false);
+      } catch (e) {
+        modalLoader.setLoading(false);
+      }
+    };
+
+    init();
   }, []);
 
 
@@ -64,7 +59,7 @@ export const Payback = observer(() => {
       render: (text, record) => (
         <Image
           src={record.picture}
-          style={{ width: 50, height: 50 }}
+          style={{width: 50, height: 50}}
           shape="circle"
           alt="avatar"
         />
@@ -85,7 +80,7 @@ export const Payback = observer(() => {
             onClick={async () => {
               await handleAction(record, "accept");
             }}
-            icon={<CheckCircleOutlined />}
+            icon={<CheckCircleOutlined/>}
             style={{
               backgroundColor: "#1bb91d",
               color: "#fff",
@@ -98,7 +93,7 @@ export const Payback = observer(() => {
             onClick={async () => {
               await handleAction(record, "reject");
             }}
-            icon={<CloseOutlined />}
+            icon={<CloseOutlined/>}
             style={{
               backgroundColor: "#ff1c1c",
               color: "#fff",
@@ -112,7 +107,7 @@ export const Payback = observer(() => {
     },
   ];
 
-  if(store.authentication.userData.role === "Retail") columns.pop();
+  if (store.authentication.userData.role === "Retail") columns.pop();
 
   const routeData = [
     {
@@ -121,12 +116,12 @@ export const Payback = observer(() => {
     },
     {
       route: LINKS.PAYBACK,
-      name: <span style={{ fontWeight: "bold" }}>Payback</span>,
+      name: <span style={{fontWeight: "bold"}}>Payback</span>,
     },
   ];
 
   const onSubmit = async (data) => {
-    setConfirmLoading(true);
+    modalLoader.setLoading(true);
     try {
       // await store.membership.create(data);
       // message.success("Success Add New Member");
@@ -135,25 +130,25 @@ export const Payback = observer(() => {
       console.error(e, "apa errornya");
       message.error("Failed Add Member");
     }
-    setConfirmLoading(false);
-    setVisibleModal(false);
+    modalLoader.setLoading(false);
   };
 
-  const handleAction = async (record, type) => {};
+  const handleAction = async (record, type) => {
+  };
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} />
+      <BreadcumbComponent data={routeData}/>
       <Card>
         <div>
-          <Row style={{ marginBottom: 20 }}>
+          <Row style={{marginBottom: 20}}>
             <Col span={12}>
               <Button>
-                <FilterOutlined />
+                <FilterOutlined/>
                 Filter
               </Button>
             </Col>
-            <Col span={12} style={{ textAlign: "right" }}>
+            <Col span={12} style={{textAlign: "right"}}>
               <Search
                 placeholder="input search text"
                 style={{
@@ -215,7 +210,7 @@ export const Payback = observer(() => {
               //     style: {marginBottom: "1rem", marginRight: "1rem"},
               // }}
               dataSource={store.payback.data}
-              style={{ padding: 0 }}
+              style={{padding: 0}}
               renderItem={(item) => {
                 return (
                   <div>
@@ -236,11 +231,11 @@ export const Payback = observer(() => {
                         title={item.name}
                         description={
                           <div style={{}}>
-                            <Image src={item.picture} preview={false} />
+                            <Image src={item.picture} preview={false}/>
                           </div>
                         }
                       />
-                      <div style={{ marginRight: 16 }}>
+                      <div style={{marginRight: 16}}>
                         <p
                           style={{
                             fontSize: 9,
@@ -251,7 +246,7 @@ export const Payback = observer(() => {
                         </p>
                       </div>
                     </List.Item>
-                    <Divider plain style={{ margin: 0 }} />
+                    <Divider plain style={{margin: 0}}/>
                   </div>
                 );
               }}