From 618e201adca8e05819c064c3911f6e3a63b05619 Mon Sep 17 00:00:00 2001 From: Angga Maulana Date: Sat, 1 Apr 2023 17:36:13 +0700 Subject: [PATCH] feat: pagination --- components/Organizms/Table/Table.js | 8 ++--- middleware.js | 1 - pages/admin/admintransaction.js | 46 ++++++++++++++++++++--------- store/redux/paymentReducer.js | 5 ++-- store/sagas/paymentSagas.js | 17 ++++++----- 5 files changed, 48 insertions(+), 29 deletions(-) diff --git a/components/Organizms/Table/Table.js b/components/Organizms/Table/Table.js index b3ac621..fa45454 100644 --- a/components/Organizms/Table/Table.js +++ b/components/Organizms/Table/Table.js @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; // components export default function Table(props) { - const { color, children } = props + const { color, children, total, currentPage, lastPage, prev, next } = props return ( <> @@ -88,14 +88,14 @@ export default function Table(props) {
- Showing 1 to 10 of 100 Entries + Showing 1 to 10 of {total} Entries
- - diff --git a/middleware.js b/middleware.js index 0eee98e..423309d 100644 --- a/middleware.js +++ b/middleware.js @@ -7,7 +7,6 @@ export function middleware(request) { const { device } = userAgent(request) const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'; Cookies.set("viewport",viewport) - // console.log("VERFY",verify) if (verify === undefined && request.nextUrl.pathname.startsWith('/member')) { return NextResponse.redirect(new URL('/', request.url)) } diff --git a/pages/admin/admintransaction.js b/pages/admin/admintransaction.js index b08c3c6..ba6cc13 100644 --- a/pages/admin/admintransaction.js +++ b/pages/admin/admintransaction.js @@ -6,14 +6,13 @@ import { PaymentActions } from "store/redux/paymentReducer"; import { formatMoney } from "helper/numberFormat"; import moment from "moment"; import { FiCheckCircle, FiX } from "react-icons/fi"; -import { useRouter } from "next/router"; import { useAlert } from "react-alert"; export default function Admintransaction() { const dispatch = useDispatch() const alert = useAlert() - const router = useRouter() const { data } = useSelector(state => state.paymentReducer.order_list) + const [currentPage,setCurrentPage] = useState(1) const [thead] = useState([ { name: "No" @@ -48,31 +47,44 @@ export default function Admintransaction() { dispatch(PaymentActions.doGetOrderListRequest()) dispatch(PaymentActions.doGetTransactionListRequest()) },[]) - - const AppRoveTransaction = id => { + const AppRoveTransaction = (id,type) => { dispatch(PaymentActions.doApproveTransactionRequest({ data: { order_number: id, - status: "success" + status: type }, message: (msg) => alert.success(msg), - navigate: () => { - router.replace("/admin/admintransaction") - } })) } + const nextPage = () => { + const lastPage = data?.data?.last_page + if(currentPage < lastPage){ + const next = currentPage + 1; + setCurrentPage(next) + dispatch(PaymentActions.doGetOrderListRequest(next)) + } + } + + const prevPage = () => { + if(currentPage !== 1){ + const prev = currentPage - 1; + setCurrentPage(prev) + dispatch(PaymentActions.doGetOrderListRequest(prev)) + } + } + const renderPaymentStatus = item => { switch (item) { case 'success':{ - return

SUCCESS

+ return

SUCCESS

} case 'pending':{ - return

PENDING

+ return

PENDING

} case 'failed':{ - return

FAILED

+ return

FAILED

} default: break; @@ -99,7 +111,13 @@ export default function Admintransaction() { htmlFor="grid-password"> Payment History - +
@@ -143,11 +161,11 @@ export default function Admintransaction() {
-
-
diff --git a/store/redux/paymentReducer.js b/store/redux/paymentReducer.js index 33cff80..0f009c8 100644 --- a/store/redux/paymentReducer.js +++ b/store/redux/paymentReducer.js @@ -29,8 +29,9 @@ export const PaymentActions = { error, }), // order list - doGetOrderListRequest: () => ({ - type: Types.GET_ADMIN_ORDER_LIST_REQUEST + doGetOrderListRequest: data => ({ + type: Types.GET_ADMIN_ORDER_LIST_REQUEST, + payload: data, }), doGetOrderListSuccess: data => { return ({ diff --git a/store/sagas/paymentSagas.js b/store/sagas/paymentSagas.js index 5edc0e3..7e8a530 100644 --- a/store/sagas/paymentSagas.js +++ b/store/sagas/paymentSagas.js @@ -1,4 +1,4 @@ -import {call, put, takeLatest } from 'redux-saga/effects'; +import {all, call, put, takeLatest } from 'redux-saga/effects'; import { api, URL } from "services/api"; import { Types } from "store/actionTypes"; import { PaymentActions } from 'store/redux/paymentReducer'; @@ -25,9 +25,10 @@ function* doUpgradePaketDeposit(data) { } } -function* doGetOrderList() { +function* doGetOrderList(data) { try { - const response = yield call(api.get, URL.ORDER_LIST); + const { payload } = data + const response = yield call(api.get, `${URL.ORDER_LIST}?page=${payload}`); yield put(PaymentActions.doGetOrderListSuccess(response?.data)); } catch (error) { @@ -50,12 +51,12 @@ function* doApproveTransaction(data) { const {payload} = data; const response = yield call(api.post, URL.APPROVE_TRANSACTION, payload?.data); - yield put(PaymentActions.doApproveTransactionSuccess(response?.data)); + yield all([ + put(PaymentActions.doApproveTransactionSuccess(response?.data)), + put(PaymentActions.doGetOrderListRequest()) + ]) - payload?.message("Approve Transaction success!") - setTimeout(() => { - payload?.navigate(); - },700); + payload?.message("Change Status Transaction success!") } catch (error) { yield put(PaymentActions.doApproveTransactionFailure(error)); }