From 94a4f598337015c24073ff5d25666785c2dcc17d Mon Sep 17 00:00:00 2001 From: caturbgs Date: Tue, 21 Dec 2021 11:38:47 +0700 Subject: [PATCH 1/3] feat: fix login modal loader --- src/pages/Login/Login.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js index b71b999..9e34298 100644 --- a/src/pages/Login/Login.js +++ b/src/pages/Login/Login.js @@ -1,34 +1,29 @@ -import React, {useContext} from "react"; +import React 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; } message.error(e.message); } + history.push(LINKS.HOME); } return ( From 3884967dee65f6a08e962044fedd9bc8e40c2b7f Mon Sep 17 00:00:00 2001 From: "ajat91.sudrajat" Date: Tue, 21 Dec 2021 11:43:20 +0700 Subject: [PATCH 2/3] handling error --- src/pages/Config/Commission.js | 7 ++++++- src/pages/Config/Partner.js | 7 ++++++- src/pages/Config/Supplier.js | 5 +++++ src/pages/Login/Login.js | 4 ++-- src/pages/Membership/Membership.js | 5 +++++ src/pages/Payback/Payback.js | 5 +++++ src/pages/Payback/PaybackFromUser.js | 5 +++++ src/pages/Payback/PaybackModal.js | 7 +++++-- src/pages/Product/Category.js | 7 ++++++- src/pages/Product/Product.js | 7 ++++++- src/pages/Product/Subcategory.js | 7 ++++++- src/pages/Transaction/Product.js | 5 +++++ src/pages/Transaction/Transaction.js | 7 ++++++- 13 files changed, 68 insertions(+), 10 deletions(-) diff --git a/src/pages/Config/Commission.js b/src/pages/Config/Commission.js index b7388bc..baa91c9 100644 --- a/src/pages/Config/Commission.js +++ b/src/pages/Config/Commission.js @@ -1,5 +1,5 @@ import React, {useContext, useEffect, useState} from "react"; -import { Button, Card, Col, Input, Row, Tabs } from "antd"; +import { Button, Card, Col, Input, Row, Tabs ,message} from "antd"; import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { useStore } from "../../utils/useStore"; @@ -24,6 +24,11 @@ export const Commission = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Config/Partner.js b/src/pages/Config/Partner.js index 6b5e6c4..e1e8b41 100644 --- a/src/pages/Config/Partner.js +++ b/src/pages/Config/Partner.js @@ -1,5 +1,5 @@ import React, {useContext, useEffect, useState} from "react"; -import {Button, Card, Col, Input, Row, Tabs} from "antd"; +import {Button, Card, Col, Input, Row, Tabs,message} from "antd"; import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {useStore} from "../../utils/useStore"; @@ -22,6 +22,11 @@ export const Partner = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js index 9c42792..5c6d60a 100644 --- a/src/pages/Config/Supplier.js +++ b/src/pages/Config/Supplier.js @@ -37,6 +37,11 @@ export const Supplier = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js index b71b999..6ec5bc9 100644 --- a/src/pages/Login/Login.js +++ b/src/pages/Login/Login.js @@ -14,12 +14,12 @@ export const Login = observer(() => { const handleLogin = async (params) => { try { - modalLoader.setLoading(true); + //modalLoader.setLoading(true); await store.authentication.login({ username: params.username, password: params.password, }); - modalLoader.setLoading(false); + //modalLoader.setLoading(false); history.push(LINKS.HOME); } catch (e) { modalLoader.setLoading(true); diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index 0908976..93d6d33 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -53,6 +53,11 @@ export const Membership = observer(() => { } catch (e) { console.error(e); modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js index ba1a29f..8ade44a 100644 --- a/src/pages/Payback/Payback.js +++ b/src/pages/Payback/Payback.js @@ -39,6 +39,11 @@ export const Payback = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js index 1e66284..8f359f4 100644 --- a/src/pages/Payback/PaybackFromUser.js +++ b/src/pages/Payback/PaybackFromUser.js @@ -42,6 +42,11 @@ export const PaybackFromUser = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js index e87f74d..a6bf6de 100644 --- a/src/pages/Payback/PaybackModal.js +++ b/src/pages/Payback/PaybackModal.js @@ -85,8 +85,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => { await store.payback.getData(); } catch (e) { modalLoader.setLoading(false); - console.log(e, "apa errornya"); - message.error("Failed Add Member"); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } form.resetFields(); }; diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js index fee1dba..67728e8 100644 --- a/src/pages/Product/Category.js +++ b/src/pages/Product/Category.js @@ -1,5 +1,5 @@ import React, {useContext, useEffect, useState} from "react"; -import {Button, Card, Col, Input, Row, Tabs} from "antd"; +import {Button, Card, Col, Input, Row, Tabs,message} from "antd"; import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {useStore} from "../../utils/useStore"; @@ -23,6 +23,11 @@ export const Category = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js index 1c5dc03..c4806ff 100644 --- a/src/pages/Product/Product.js +++ b/src/pages/Product/Product.js @@ -1,5 +1,5 @@ import React, {useContext, useEffect} from "react"; -import {Button, Card, Col, Input, Row, Upload} from "antd"; +import {Button, Card, Col, Input, Row, Upload,message} from "antd"; import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {useStore} from "../../utils/useStore"; @@ -27,6 +27,11 @@ export const Product = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js index edfa0ae..402ab7f 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -1,5 +1,5 @@ import React, {useContext, useEffect, useState} from "react"; -import {Button, Card, Col, Input, Row} from "antd"; +import {Button, Card, Col, Input, Row,message} from "antd"; import {PlusSquareOutlined} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {useStore} from "../../utils/useStore"; @@ -22,6 +22,11 @@ export const Subcategory = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js index 6e5f103..5e23868 100644 --- a/src/pages/Transaction/Product.js +++ b/src/pages/Transaction/Product.js @@ -25,6 +25,11 @@ export const Product = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js index 978d6b9..441a30a 100644 --- a/src/pages/Transaction/Transaction.js +++ b/src/pages/Transaction/Transaction.js @@ -1,4 +1,4 @@ -import React, {useContext, useEffect, useState} from "react"; +import React, {useContext, useEffect, useState,message} from "react"; import {useStore} from "../../utils/useStore"; import {Card, Tabs} from "antd"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; @@ -23,6 +23,11 @@ export const Transaction = observer(() => { modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } }; From 89b890c8882e29d903840112a449a1d8dbdcc54c Mon Sep 17 00:00:00 2001 From: caturbgs Date: Tue, 21 Dec 2021 12:03:15 +0700 Subject: [PATCH 3/3] feat: change payback data page --- src/pages/Payback/Payback.js | 256 ++++++++++++--------------- src/pages/Payback/PaybackFromUser.js | 149 ++++------------ src/store/payback.js | 40 ++--- 3 files changed, 158 insertions(+), 287 deletions(-) diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js index 8ade44a..a87baff 100644 --- a/src/pages/Payback/Payback.js +++ b/src/pages/Payback/Payback.js @@ -1,26 +1,8 @@ -import React, {useState, useEffect, useContext} from "react"; -import { - Button, - Card, - Col, - Divider, - Image, - Input, - List, - message, - Row, - Space, - Table, -} from "antd"; +import React, {useContext, useEffect} from "react"; +import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd"; 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 {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {LINKS} from "../../routes/app"; import {ModalLoaderContext} from "../../utils/modal"; @@ -35,7 +17,7 @@ export const Payback = observer(() => { const init = async () => { try { modalLoader.setLoading(true); - await store.payback.getDataUser(); + await store.payback.getData(); modalLoader.setLoading(false); } catch (e) { modalLoader.setLoading(false); @@ -52,11 +34,6 @@ export const Payback = observer(() => { const columns = [ - { - title: "Name", - dataIndex: "name", - key: "name", - }, { title: "Picture", dataIndex: "image_prove", @@ -77,37 +54,37 @@ export const Payback = observer(() => { }, { title: "Action", + dataIndex: "amount", key: "action", - width: 100, render: (text, record) => ( - - - - + + + + ), }, ]; @@ -128,9 +105,9 @@ export const Payback = observer(() => { const onSubmit = async (data) => { modalLoader.setLoading(true); try { - // await store.membership.create(data); + // await store.payback.create(data); // message.success("Success Add New Member"); - // await store.membership.getData(); + // await store.payback.getData(); } catch (e) { console.error(e, "apa errornya"); message.error("Failed Add Member"); @@ -175,83 +152,85 @@ export const Payback = observer(() => { {store.ui.mediaQuery.isDesktop && ( - { - // let pageNumber = page.current; - // store.membership.pageSize = page.pageSize; - // store.membership.page = pageNumber - 1; - // // store.membership.isLoading = true; - // await store.membership.getData(); - // // store.membership.isLoading = false; - // }} - /> +
{ + let pageNumber = page.current; + store.payback.pageSize = page.pageSize; + store.payback.page = pageNumber - 1; + modalLoader.setLoading(true); + await store.payback.getData(); + modalLoader.setLoading(false); + }} + /> )} {store.ui.mediaQuery.isMobile && ( - { - // 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"}, - // }} - dataSource={store.payback.data} - style={{padding: 0}} - renderItem={(item) => { - return ( -
- - - -
- } - /> -
-

- {item.amount} -

-
- - + { + 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) => { + return ( +
+ + + +
+ } + /> +
+

+ {item.amount} +

+
+ + ); }} @@ -259,19 +238,6 @@ export const Payback = observer(() => { )} - - {/* { - await onSubmit(data); - }} - onCancel={() => { - setInitialData({}); - setVisibleModal(false); - }} - /> */} ); }); diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js index 8f359f4..3df9981 100644 --- a/src/pages/Payback/PaybackFromUser.js +++ b/src/pages/Payback/PaybackFromUser.js @@ -1,25 +1,8 @@ -import React, {useState, useEffect, useContext} from "react"; -import { - Button, - Card, - Col, - Divider, - Image, - Input, - List, - message, - Row, - Space, - Table, -} from "antd"; +import React, {useContext, useEffect, useState} from "react"; +import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table,} from "antd"; import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; -import { - CheckCircleOutlined, - CloseOutlined, - FilterOutlined, - PlusSquareOutlined, -} from "@ant-design/icons"; +import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {PaybackModal} from "./PaybackModal"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {LINKS} from "../../routes/app"; @@ -37,7 +20,7 @@ export const PaybackFromUser = observer(() => { const init = async () => { try { modalLoader.setLoading(true); - await store.payback.getData(); + await store.payback.getDataUser(); await store.authentication.getProfile(); modalLoader.setLoading(false); } catch (e) { @@ -73,76 +56,6 @@ export const PaybackFromUser = observer(() => { dataIndex: "amount", key: "amount", }, - { - title: "Action", - dataIndex: "amount", - key: "action", - render: (text, record) => ( - - - - - ), - }, - // { - // title: "Action", - // key: "action", - // width: 100, - // render: (text, record) => ( - // - // - // - // - // ), - // }, ]; const routeData = [ @@ -208,26 +121,26 @@ export const PaybackFromUser = observer(() => { {store.ui.mediaQuery.isDesktop && (
{ - let pageNumber = page.current; - store.payback.pageSize = page.pageSize; - store.payback.page = pageNumber - 1; - modalLoader.setLoading(true); - await store.payback.getData(); - modalLoader.setLoading(false); - }} + key="1" + hasEmpty + columns={columns} + dataSource={store.payback.dataPaybackUser} + bordered + pagination={{ + pageSize: store.payback.pageSizePaybackUser, + total: store.payback.total_dataPaybackUser, + current: store.payback.pageSizePaybackUser + 1, + showSizeChanger: true, + simple: false + }} + onChange={async (page) => { + let pageNumber = page.current; + store.payback.pageSizePaybackUser = page.pageSize; + store.payback.pageSizePaybackUser = pageNumber - 1; + modalLoader.setLoading(true); + await store.payback.getDataUser(); + modalLoader.setLoading(false); + }} /> )} @@ -237,18 +150,18 @@ export const PaybackFromUser = observer(() => { position={"top"} pagination={{ onChange: async (page) => { - store.payback.pageSize = page.pageSize; - store.payback.page = page.current; + store.payback.pageSizePaybackUser = page.pageSize; + store.payback.pageSizePaybackUser = page.current; modalLoader.setLoading(true); - await store.payback.getData(); + await store.payback.getDataUser(); modalLoader.setLoading(false); }, - pageSize: store.payback.pageSize, - total: store.payback.total_data, - current: store.payback.page, + pageSize: store.payback.pageSizePaybackUser, + total: store.payback.total_dataPaybackUser, + current: store.payback.pageSizePaybackUser, style: {marginBottom: "1rem", marginRight: "1rem"}, }} - dataSource={store.payback.data} + dataSource={store.payback.dataPaybackUser} style={{padding: 0}} renderItem={(item) => { return ( diff --git a/src/store/payback.js b/src/store/payback.js index adbc4f4..e11861d 100644 --- a/src/store/payback.js +++ b/src/store/payback.js @@ -9,15 +9,10 @@ export class Payback { filterCategory = null; visibleModalPayback = false; - pagePayback = 0; - pageSizePayback = 10; - dataPayback = []; - total_dataPayback = 0; - - pageSubPayback = 0; - pageSizeSubPayback = 10; - dataSubPayback = []; - total_dataPayback = 0; + pagePaybackUser = 0; + pageSizePaybackUser = 10; + dataPaybackUser = []; + total_dataPaybackUser = 0; constructor(ctx) { this.ctx = ctx; @@ -27,14 +22,12 @@ export class Payback { async getData() { try { const response = await http.get( - `/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}` + `/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}` ); - //console.log(response) - this.data = - response.body.data.map((item, idx) => { - item.key = idx; - return item; - }) ?? []; + this.data = response.body.data.map((item, idx) => { + item.key = idx; + return item; + }) ?? []; this.total_data = response.body.count ?? 0; } catch (e) { @@ -45,16 +38,14 @@ export class Payback { async getDataUser() { try { const response = await http.get( - `/transaction/deposit-return/confirmation?page=${this.page}&pageSize=${this.pageSize}` + `/transaction/deposit-return/confirmation?page=${this.pagePaybackUser}&pageSize=${this.pageSizePaybackUser}` ); - //console.log(response); - this.data = - response.body.data.map((item, idx) => { - item.key = idx; - return item; - }) ?? []; + this.dataPaybackUser = response.body.data.map((item, idx) => { + item.key = idx; + return item; + }) ?? []; - this.total_data = response.body.count ?? 0; + this.total_dataPaybackUser = response.body.count ?? 0; } catch (e) { console.error(e); } @@ -79,6 +70,7 @@ export class Payback { console.error(e); } } + async create(data) { try { console.log(data)