Pages Membership

:exit

:q

src/pages/App/App.js

@@ -1,12 +1,11 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {DesktopLayout} from "./DesktopLayout";
 import {useMediaQuery} from 'react-responsive';
 import {useStore} from "../../utils/useStore";
-import {useHistory} from "react-router-dom";
-
+import {ModalLoader} from "../../component/Modal/ModalLoader";
+import {ModalLoaderContext} from "../../utils/modal";
 
 export const App = () => {
-  // TODO: add mobile layout
   const store = useStore();
   const mediaQuery = {
     isDesktop: useMediaQuery({minWidth: 1024}),
@@ -15,11 +14,23 @@ export const App = () => {
     isNotMobile: useMediaQuery({minWidth: 768}),
   };
 
+  const [modalLoading, setModalLoading] = useState(false);
+  const [modalText, setModalText] = useState(undefined);
+  const modalContextValue = {
+    setLoading: setModalLoading,
+    setText: setModalText,
+  };
+
   useEffect(() => {
     store.ui.setMediaQuery(mediaQuery);
   });
-//   const isMobileDevice = useMediaQuery({
-//     query: "(min-device-width: 480px)",
-//   });
-  return <DesktopLayout/>;
+
+  return (
+      <>
+        <ModalLoader isOpen={modalLoading} text={modalText}/>
+        <ModalLoaderContext.Provider value={modalContextValue}>
+          <DesktopLayout/>
+        </ModalLoaderContext.Provider>
+      </>
+  );
 };

src/pages/Membership/Membership.js

@@ -117,16 +117,16 @@ export const Membership = observer(() => {
       key: "name",
       render: (text, record) => record?.name ?? record?.username,
     },
-    {
-      title: "Username",
-      dataIndex: "username",
-      key: "username",
-    },
     {
       title: "Role",
       dataIndex: "roleName",
       key: "role",
     },
+    {
+      title: "Saldo",
+      dataIndex: ["coa","amount"],
+      key: ["coa","amount"],
+    },
     {
       title: "Status",
       dataIndex: "isActive",

src/pages/Product/Product.js

@@ -1,33 +1,32 @@
-import React, {useEffect, useState} from "react";
-import {Button, Card, Col, Input, Row, Select, Tabs, Upload} from "antd";
+import React, {useContext, useEffect} from "react";
+import {Button, Card, Col, Input, Row, Upload} from "antd";
 import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ProductComponent} from "../../component/ProductComponent";
 import {LINKS} from "../../routes/app";
+import {ModalLoaderContext} from "../../utils/modal";
 
-const {TabPane} = Tabs;
 const {Search} = Input;
-const {Option} = Select;
 
 export const Product = observer(() => {
-  const [isLoading, setIsLoading] = useState(false);
   const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
     const init = async () => {
       try {
-        setIsLoading(true);
+        modalLoader.setLoading(true);
         await Promise.allSettled([
           store.supplier.getData(),
           store.product.getDataCategories(),
           store.category.getData(),
         ]);
         await store.product.getData();
-        setIsLoading(false);
+        modalLoader.setLoading(false);
       } catch (e) {
-        setIsLoading(false);
+        modalLoader.setLoading(false);
       }
     };