PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add modal loader for each API request

Browse Source
This commit is contained in:
Hasta Ragil Saputra 2021-12-21 09:00:31 +07:00
parent 178d52f5cc
commit 47578366a8
21 changed files with 1094 additions and 1110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/component/CategoryComponent.js
View File

@ -1,18 +1,17 @@
import React, {useState} from "react";
import React, {useContext, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
export const CategoryComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
const handleEditButton = (data) => {
console.log(data, "isi data");
@ -75,7 +74,9 @@ export const CategoryComponent = observer((props) => {
const deleteData = async (id) => {
try {
console.log(id);
modalLoader.setLoading(true);
await store.category.delete(id);
modalLoader.setLoading(true);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
@ -92,19 +93,19 @@ export const CategoryComponent = observer((props) => {
const handleSubmit = async (data) => {
console.log(data, "isi data2");
if (idData !== "") {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.category.update(idData, data);
message.success("Success Update Data Category");
} catch (e) {
message.error("Failed Update Data Category");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.category.visibleModalCategory = false;
setIdData("");
form.resetFields();
} else {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.category.create(data);
message.success("Success Add New Category");
@ -112,7 +113,7 @@ export const CategoryComponent = observer((props) => {
console.log(e, "apa errornya");
message.error("Failed Add Category");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.category.visibleModalCategory = false;
setIdData("");
form.resetFields();
@ -137,9 +138,9 @@ export const CategoryComponent = observer((props) => {
let pageNumber = page.current;
store.category.pageSize = page.pageSize;
store.category.page = pageNumber - 1;
// store.membership.isLoading = true;
modalLoader.setLoading(true);
await store.category.getData();
// store.membership.isLoading = false;
modalLoader.setLoading(false);
}}
/>

41
src/component/CommissionComponent.js
View File

@ -1,32 +1,17 @@
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
export const CommissionComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.product.getDataSubCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const modalLoader = useContext(ModalLoaderContext);
const handleEditButton = (data) => {
console.log(data, "isi data");
@ -59,32 +44,20 @@ export const CommissionComponent = observer((props) => {
},
];
const deleteData = async (id) => {
try {
console.log(id);
await store.commission.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
};
const handleCancel = () => {
setIdData("");
store.commission.visibleModalCommission = false;
};
const handleSubmit = async (data) => {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.commission.update(idData, data);
message.success("Success Update Data Member");
} catch (e) {
message.error("Failed Update Data Member");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.commission.visibleModalCommission = false;
setIdData("");
form.resetFields();
@ -108,9 +81,9 @@ export const CommissionComponent = observer((props) => {
let pageNumber = page.current;
store.commission.pageSize = page.pageSize;
store.commission.page = pageNumber - 1;
// store.membership.isLoading = true;
modalLoader.setLoading(true);
await store.commission.getData();
// store.membership.isLoading = false;
modalLoader.setLoading(false);
}}
/>

42
src/component/PartnerComponent.js
View File

@ -1,41 +1,27 @@
import React, {useEffect, useState} from "react";
import React, {useContext, 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 {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
export const PartnerComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [isChangePassword, setIsChangePassword] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.partner.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const modalLoader = useContext(ModalLoaderContext);
const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating";
modalLoader.setLoading(true);
try {
const response = await store.partner.changeStatus(id, status);
modalLoader.setLoading(false);
response?.body?.statusCode === 201
? message.success(`Success ${status2} Partner`)
: message.error(`Failed ${status2} Partner`);
@ -121,8 +107,9 @@ export const PartnerComponent = observer((props) => {
const deleteData = async (id) => {
try {
console.log(id);
modalLoader.setLoading(true);
await store.partner.delete(id);
modalLoader.setLoading(false);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PARTNER);
} catch (err) {
@ -155,9 +142,10 @@ export const PartnerComponent = observer((props) => {
const handleSubmit = async (data) => {
console.log(data, "isi data2");
if (idData !== "") {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.partner.update(idData, data);
modalLoader.setLoading(false);
message.success(
isChangePassword
? "Failed Change Partner Password"
@ -165,27 +153,27 @@ export const PartnerComponent = observer((props) => {
);
//await store.partner.getData()
} catch (e) {
modalLoader.setLoading(true);
message.error(
isChangePassword
? "Failed Change Partner Password"
: "Failed Update Data Partner"
);
}
setConfirmLoading(false);
store.partner.visibleModalPartner = false;
setIdData("");
form.resetFields();
} else {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.partner.create(data);
message.success("Success Add New Partner");
//await store.partner.getData()
modalLoader.setLoading(false);
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Add Partner");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.partner.visibleModalPartner = false;
setIdData("");
form.resetFields();
@ -209,9 +197,9 @@ export const PartnerComponent = observer((props) => {
let pageNumber = page.current;
store.partner.pageSize = page.pageSize;
store.partner.page = pageNumber - 1;
//store.membership.isLoading = true;
modalLoader.setLoading(true);
await store.partner.getData();
// store.membership.isLoading = false;
modalLoader.setLoading(false);
}}
/>

20
src/component/ProductComponent.js
View File

@ -1,4 +1,4 @@
import React, {useState} from "react";
import React, {useContext, useState} from "react";
import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
@ -6,6 +6,7 @@ import {useHistory} from "react-router-dom";
import {capitalize} from "lodash";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
const {Title, Text} = Typography;
@ -15,11 +16,10 @@ export const ProductComponent = observer((props) => {
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState('');
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [filterSupplier, setFilterSupplier] = useState(null);
const [filterCategories, setFilterCategories] = useState(null);
const [filterSubCategories, setFilterSubCategories] = useState(null);
const modalLoader = useContext(ModalLoaderContext);
const handleEditButton = (data) => {
console.log(data, "isi data")
@ -120,19 +120,19 @@ export const ProductComponent = observer((props) => {
const handleSubmit = async (data) => {
console.log(data, "isi data2")
if (idData !== '') {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.product.update(idData, data)
message.success("Success Update Data Member")
} catch (e) {
message.error("Failed Update Data Member")
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
} else {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.product.create(data)
message.success("Success Add New Member")
@ -140,7 +140,7 @@ export const ProductComponent = observer((props) => {
console.log(e, "apa errornya")
message.error("Failed Add Member")
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
@ -167,7 +167,9 @@ export const ProductComponent = observer((props) => {
const handleSubmitFilter = async () => {
store.product.filterSupplier = filterSupplier;
store.product.filterSubCategory = filterSubCategories;
modalLoader.setLoading(true);
await store.product.getData();
modalLoader.setLoading(false);
store.product.visibleModalFilterProduct = false;
};
@ -199,9 +201,9 @@ export const ProductComponent = observer((props) => {
let pageNumber = page.current;
store.product.pageSize = page.pageSize;
store.product.page = pageNumber - 1;
// store.membership.isLoading = true;
modalLoader.setLoading(true);
await store.product.getData();
// store.membership.isLoading = false;
modalLoader.setLoading(false);
}}
/>

23
src/component/Subcategory.js
View File

@ -1,17 +1,16 @@
import React, {useState} from "react";
import React, {useContext, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore";
import {ModalLoaderContext} from "../utils/modal";
export const SubcategoryComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
const getData = async () => {
await store.category.getData();
@ -64,7 +63,7 @@ export const SubcategoryComponent = observer((props) => {
const handleSubmit = async (data) => {
console.log(data, "isi data2");
if (idData !== "") {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.subcategory.update(idData, data);
await getData();
@ -72,12 +71,12 @@ export const SubcategoryComponent = observer((props) => {
} catch (e) {
message.error("Failed Update Data Category");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.subcategory.visibleModalSubcategory = false;
setIdData("");
form.resetFields();
} else {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.subcategory.create(data);
await getData();
@ -86,7 +85,7 @@ export const SubcategoryComponent = observer((props) => {
console.log(e, "apa errornya");
message.error("Failed Add Category");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
store.subcategory.visibleModalSubcategory = false;
setIdData("");
form.resetFields();
@ -107,13 +106,13 @@ export const SubcategoryComponent = observer((props) => {
showSizeChanger: true,
simple: false,
}}
onChange={(page) => {
onChange={async (page) => {
let pageNumber = page.current;
store.subcategory.pageSize = page.pageSize;
store.subcategory.page = pageNumber - 1;
// store.membership.isLoading = true;
getData();
// store.membership.isLoading = false;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>

19
src/component/SupplierComponent.js
View File

@ -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`);
}
@ -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");
}
@ -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();
@ -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

9
src/component/TopupsaldoModal.js
View File

@ -1,20 +1,21 @@
import React from "react";
import React, {useContext} from "react";
import {Form, Input, message, Modal} from "antd";
import {observer} from "mobx-react-lite";
import {useStore} from "../utils/useStore";
import {ModalLoaderContext} from "../utils/modal";
export const TopupsaldoModal = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext);
const handleCancelTransaction = () => {
store.supplier.visibleModalTransaction = false;
};
const handleSubmitTransaction = async (data) => {
console.log(data, "isi data2");
try {
modalLoader.setLoading(true);
await store.supplier.createTransaction(data);
message.success("Success Top Up");
} catch (e) {
@ -22,9 +23,11 @@ export const TopupsaldoModal = observer((props) => {
message.error("Failed Top Up");
}
modalLoader.setLoading(false);
store.supplier.visibleModalTransaction = false;
form.resetFields();
};
return (
<div>
<Modal

11
src/pages/Config/Commission.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, {useContext, 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";
@ -6,23 +6,24 @@ import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { CommissionComponent } from "../../component/CommissionComponent";
import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { TabPane } = Tabs;
const { Search } = Input;
export const Commission = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
//await store.commission.getDataCategories();
await store.commission.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};

18
src/pages/Config/Partner.js
View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, {useContext, 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";
@ -6,34 +6,28 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {PartnerComponent} from "../../component/PartnerComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
const {Search} = Input;
export const Partner = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.partner.getDataCategories();
modalLoader.setLoading(true);
await store.partner.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
init();
}, []);
// const handleChangeTabPane = async (key) => {
// store.partner.filterCategory = key;
// console.log(key);
// };
const routeData = [
{
route: LINKS.HOME,

16
src/pages/Config/Supplier.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, {useContext, useEffect, useState} from "react";
import {
Button,
Card,
@ -21,26 +21,22 @@ import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { SupplierComponent } from "../../component/SupplierComponent";
import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { TabPane } = Tabs;
const { Search } = Input;
const { Option } = Select;
export const Supplier = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [form] = Form.useForm();
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.supplier.getDataCategories();
modalLoader.setLoading(true);
await store.supplier.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};

7
src/pages/Login/Login.js
View File

@ -1,23 +1,28 @@
import React from "react";
import React, {useContext} from "react";
import {observer} from 'mobx-react-lite';
import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
import {useHistory} from "react-router-dom";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
export const Login = observer(() => {
const store = useStore();
let history = useHistory();
const [form] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext);
const handleLogin = async (params) => {
try {
modalLoader.setLoading(true);
await store.authentication.login({
username: params.username,
password: params.password,
});
modalLoader.setLoading(false);
history.push(LINKS.HOME);
} catch (e) {
modalLoader.setLoading(true);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;

46
src/pages/Membership/Membership.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, {useContext, useEffect, useState} from "react";
import {
Button,
Card,
@ -26,6 +26,7 @@ import {
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
const {Option} = Select;
@ -37,55 +38,57 @@ export const Membership = observer(() => {
const [destination, setDestination] = useState(null);
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);
modalLoader.setLoading(true);
const isAdmin = store.authentication.userData.role === "Admin";
await getData();
await store.role.getData(isAdmin);
await store.supplier.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
console.error(e);
modalLoader.setLoading(false);
}
};
init();
}, []);
const getData = () => {
const getData = async () => {
store.authentication.userData.role === "Admin"
? store.membership.getData()
: store.membership.getDataBySuperior();
? await store.membership.getData()
: await store.membership.getDataBySuperior();
};
const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating";
console.log(status);
try {
modalLoader.setLoading(true);
const response = await store.membership.changeStatus(id, status);
modalLoader.setLoading(false);
response?.body?.statusCode === 201
? message.success(`Success ${status2} Membership`)
: message.error(`Failed ${status2} Membership`);
} catch (err) {
console.log("error", err);
modalLoader.setLoading(false);
message.error(`Failed ${status2} Membership`);
}
};
const handleCancelTransaction = () => {
setIsVisibleTopUpModal(false);
setDestination(null);
};
const handleSubmitTransaction = async (data) => {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
data.destination = destination;
if (data.amount) {
@ -99,9 +102,11 @@ export const Membership = observer(() => {
? store.transaction.distributeAdmin(data)
: store.transaction.distribute(data);
message.success("Success Top Up");
modalLoader.setLoading(false);
//await store.supplier.getData()
} catch (e) {
console.log(e, "apa errornya");
modalLoader.setLoading(false);
message.error("Failed Top Up");
}
setConfirmLoading(false);
@ -218,6 +223,7 @@ export const Membership = observer(() => {
if (initialData.id) {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.membership.update(initialData.id, data);
message.success(
@ -226,7 +232,9 @@ export const Membership = observer(() => {
: "Success Update Data Member"
);
await getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(true);
message.error(
initialData.isChangePassword
? "Failed Update Member Password"
@ -237,6 +245,7 @@ export const Membership = observer(() => {
setVisibleModal(false);
} else {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.membership.create(data);
message.success("Success Add New Member");
@ -245,6 +254,7 @@ export const Membership = observer(() => {
console.log(e, "apa errornya");
message.error("Failed Add Member");
}
modalLoader.setLoading(false);
setConfirmLoading(false);
setVisibleModal(false);
setInitialData({});
@ -323,9 +333,9 @@ export const Membership = observer(() => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
// store.membership.isLoading = true;
modalLoader.setLoading(true);
await getData();
// store.membership.isLoading = false;
modalLoader.setLoading(false);
}}
/>
)}
@ -335,10 +345,12 @@ export const Membership = observer(() => {
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: (page) => {
onChange: async (page) => {
store.membership.pageSize = page.pageSize;
store.membership.page = page.current;
getData();
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
},
pageSize: store.membership.pageSize,
total: store.membership.total_data,

1
src/pages/Membership/MembershipModal.js
View File

@ -11,7 +11,6 @@ export const MembershipModal = ({
}) => {
const [form] = Form.useForm();
const { Option } = Select;
const dataStatus = ["true", "false"];
const store = useStore();
return (

25
src/pages/Payback/Payback.js
View File

@ -1,4 +1,4 @@
import React, { useState ,useEffect} from "react";
import React, {useState, useEffect, useContext} from "react";
import {
Button,
Card,
@ -23,27 +23,22 @@ import {
import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
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);
modalLoader.setLoading(true);
await store.payback.getDataUser();
//await store.role.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
@ -126,7 +121,7 @@ export const Payback = observer(() => {
];
const onSubmit = async (data) => {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
// await store.membership.create(data);
// message.success("Success Add New Member");
@ -135,11 +130,11 @@ 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(" ")}>

52
src/pages/Payback/PaybackFromUser.js
View File

@ -1,4 +1,4 @@
import React, { useState ,useEffect} from "react";
import React, {useState, useEffect, useContext} from "react";
import {
Button,
Card,
@ -23,27 +23,25 @@ import {
import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
export const PaybackFromUser = 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);
modalLoader.setLoading(true);
await store.payback.getData();
//await store.role.getData();
setIsLoading(false);
await store.authentication.getProfile();
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
@ -154,7 +152,7 @@ export const PaybackFromUser = observer(() => {
];
const onSubmit = async (data) => {
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
// await store.membership.create(data);
// message.success("Success Add New Member");
@ -163,11 +161,12 @@ export const PaybackFromUser = observer(() => {
console.error(e, "apa errornya");
message.error("Failed Add Member");
}
setConfirmLoading(false);
modalLoader.setLoading(false);
setVisibleModal(false);
};
const handleAction = async (record, type) => {};
const handleAction = async (record, type) => {
};
return (
<div className={["ppob-container"].join(" ")}>
@ -220,9 +219,9 @@ export const PaybackFromUser = observer(() => {
let pageNumber = page.current;
store.payback.pageSize = page.pageSize;
store.payback.page = pageNumber - 1;
// store.membership.isLoading = true;
modalLoader.setLoading(true);
await store.payback.getData();
// store.membership.isLoading = false;
modalLoader.setLoading(false);
}}
/>
)}
@ -231,17 +230,19 @@ export const PaybackFromUser = observer(() => {
<List
itemLayout="horizontal"
position={"top"}
// pagination={{
// onChange: (page) => {
// store.membership.pageSize = page.pageSize;
// store.membership.page = page.current;
// store.membership.getData();
// },
// pageSize: store.membership.pageSize,
// total: store.membership.total_data,
// current: store.membership.page,
// style: {marginBottom: "1rem", marginRight: "1rem"},
// }}
pagination={{
onChange: async (page) => {
store.payback.pageSize = page.pageSize;
store.payback.page = page.current;
modalLoader.setLoading(true);
await store.payback.getData();
modalLoader.setLoading(false);
},
pageSize: store.payback.pageSize,
total: store.payback.total_data,
current: store.payback.page,
style: {marginBottom: "1rem", marginRight: "1rem"},
}}
dataSource={store.payback.data}
style={{padding: 0}}
renderItem={(item) => {
@ -290,7 +291,6 @@ export const PaybackFromUser = observer(() => {
<PaybackModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
await onSubmit(data);

28
src/pages/Payback/PaybackModal.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, {useState, useEffect, useContext} from "react";
import {
Button,
Form,
@ -11,6 +11,7 @@ import {
import {useStore} from "../../utils/useStore";
import {appConfig} from "../../config/app";
import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal";
export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
const [form] = Form.useForm();
@ -18,27 +19,11 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
const [fileList, setFileList] = useState([]);
const [previewTitle, setPreviewTitle] = useState("");
const [previewImage, setPreviewImage] = useState("");
const [loading, setLoading] = useState(false);
const [fileUrl, setFileUrl] = useState("");
const firstIndexFileList = fileList[0];
const [isLoading, setIsLoading] = useState(false);
const [loading, setLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.membership.getData();
//await store.role.getData();
await store.authentication.getProfile();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const beforeUpload = (file) => {
let isPdf, isLt2M;
let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
@ -93,15 +78,16 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
const handleSubmit = async (data) => {
console.log(data, "isi data2");
try {
modalLoader.setLoading(true);
await store.payback.create(data);
modalLoader.setLoading(false);
message.success("Success Add Payback");
await store.payback.getData();
} catch (e) {
modalLoader.setLoading(false);
console.log(e, "apa errornya");
message.error("Failed Add Member");
}
//store.payback.visibleModalPayback = false;
form.resetFields();
};

11
src/pages/Product/Category.js
View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, {useContext, 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";
@ -6,22 +6,23 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {LINKS} from "../../routes/app";
import {CategoryComponent} from "../../component/CategoryComponent";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
const {Search} = Input;
export const Category = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
await store.category.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};

13
src/pages/Product/Subcategory.js
View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row} from "antd";
import {PlusSquareOutlined} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@ -6,21 +6,22 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {LINKS} from "../../routes/app";
import {SubcategoryComponent} from "../../component/Subcategory";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
export const Subcategory = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
getData();
setIsLoading(false);
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};

7
src/pages/Profile/Profile.js
View File

@ -1,4 +1,4 @@
import React, {useEffect} from "react";
import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Row, Table, Typography} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
@ -6,11 +6,14 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {FilterOutlined} from "@ant-design/icons";
import {format, parseISO} from "date-fns";
import {ModalLoaderContext} from "../../utils/modal";
const {Title, Text} = Typography;
export const Profile = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const routeData = [
{
route: LINKS.HOME,
@ -24,10 +27,12 @@ export const Profile = observer(() => {
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
]);
modalLoader.setLoading(false);
})()
}, []);

21
src/pages/Transaction/Product.js
View File

@ -1,8 +1,9 @@
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
import {observer} from "mobx-react-lite";
import {MoneyCollectOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
const {Option} = Select;
@ -10,18 +11,20 @@ const {Option} = Select;
export const Product = observer(() => {
const store = useStore();
const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([]);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.transaction.getDataSubCategories();
await store.transaction.getDataCategories();
setIsLoading(false);
modalLoader.setLoading(true);
await Promise.allSettled([
store.transaction.getDataSubCategories(),
store.transaction.getDataCategories()
])
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
@ -44,10 +47,13 @@ export const Product = observer(() => {
const handleChangeSubcategory = async (item) => {
store.transaction.filterSubCategory = item;
modalLoader.setLoading(true);
await store.transaction.getData();
modalLoader.setLoading(false);
};
const handleBuyProduct = async (data) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProduct({productCode: data});
// if (response.status === 200) {
@ -59,6 +65,7 @@ export const Product = observer(() => {
console.log(e, "apa errornya");
message.error("Failed Buy Product");
}
modalLoader.setLoading(false);
};
return (

13
src/pages/Transaction/Transaction.js
View File

@ -1,27 +1,28 @@
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Card, Tabs} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Product} from "./Product";
import {LINKS} from "../../routes/app";
import {observer} from "mobx-react-lite";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
export const Transaction = observer(() => {
const store = useStore();
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
// Init
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
await store.transaction.getDataCategories();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};
@ -35,7 +36,9 @@ export const Transaction = observer(() => {
const handleChangeTabs = async (key) => {
store.transaction.filterCategory = key;
modalLoader.setLoading(true);
await store.transaction.getDataSubCategories();
modalLoader.setLoading(false);
};
const routeData = [