From 28fe1c25e6f93291b7777c16786827aa4ae3dc64 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Mon, 2 Nov 2020 15:57:25 +0200 Subject: [PATCH] Fix: Exchange Rate Pageination --- .../ExchangeRates/ExchangeRateTable.js | 21 +++++-- .../ExchangeRates/withExchangeRates.js | 15 ++++- .../store/ExchangeRate/exchange.actions.js | 28 +++++++--- .../store/ExchangeRate/exchange.reducer.js | 56 ++++++++++++++++++- .../store/ExchangeRate/exchange.selector.js | 29 +++++++++- .../src/store/ExchangeRate/exchange.type.js | 4 +- 6 files changed, 136 insertions(+), 17 deletions(-) diff --git a/client/src/containers/ExchangeRates/ExchangeRateTable.js b/client/src/containers/ExchangeRates/ExchangeRateTable.js index c84422ba1..a54a47f6d 100644 --- a/client/src/containers/ExchangeRates/ExchangeRateTable.js +++ b/client/src/containers/ExchangeRates/ExchangeRateTable.js @@ -23,7 +23,7 @@ function ExchangeRateTable({ // #withExchangeRates exchangeRatesList, exchangeRatesLoading, - + exchangeRatesPageination, // #withDialogActions. openDialog, @@ -152,6 +152,10 @@ function ExchangeRateTable({ treeGraph={true} onSelectedRowsChange={handelSelectedRowsChange} rowContextMenu={rowContextMenu} + pagination={true} + pagesCount={exchangeRatesPageination.pagesCount} + initialPageSize={exchangeRatesPageination.pageSize} + initialPageIndex={exchangeRatesPageination.page - 1} /> ); @@ -160,8 +164,15 @@ function ExchangeRateTable({ export default compose( withDialogActions, withExchangeRatesActions, - withExchangeRates(({ exchangeRatesList, exchangeRatesLoading }) => ({ - exchangeRatesList, - exchangeRatesLoading, - })), + withExchangeRates( + ({ + exchangeRatesList, + exchangeRatesLoading, + exchangeRatesPageination, + }) => ({ + exchangeRatesList, + exchangeRatesLoading, + exchangeRatesPageination, + }), + ), )(ExchangeRateTable); diff --git a/client/src/containers/ExchangeRates/withExchangeRates.js b/client/src/containers/ExchangeRates/withExchangeRates.js index 7eb3408d3..fa411f372 100644 --- a/client/src/containers/ExchangeRates/withExchangeRates.js +++ b/client/src/containers/ExchangeRates/withExchangeRates.js @@ -1,11 +1,24 @@ import { connect } from 'react-redux'; -import { getExchangeRatesList } from 'store/ExchangeRate/exchange.selector'; +import { + getExchangeRatesList, + getExchangeRatePaginationMetaFactory, + getExchangeRatesTableQueryFactory, +} from 'store/ExchangeRate/exchange.selector'; export default (mapState) => { + const getExchangeRatesPaginationMeta = getExchangeRatePaginationMetaFactory(); + const mapStateToProps = (state, props) => { + const query = getExchangeRatesTableQueryFactory(state, props); + const mapped = { exchangeRatesList: getExchangeRatesList(state, props), exchangeRatesLoading: state.exchangeRates.loading, + exchangeRatesPageination: getExchangeRatesPaginationMeta( + state, + props, + query, + ), }; return mapState ? mapState(mapped, state, props) : mapped; }; diff --git a/client/src/store/ExchangeRate/exchange.actions.js b/client/src/store/ExchangeRate/exchange.actions.js index 33a1cbf1d..072a17332 100644 --- a/client/src/store/ExchangeRate/exchange.actions.js +++ b/client/src/store/ExchangeRate/exchange.actions.js @@ -4,26 +4,40 @@ import t from 'store/types'; export const fetchExchangeRates = () => { return (dispatch) => new Promise((resolve, reject) => { - dispatch({ - type: t.SET_DASHBOARD_REQUEST_LOADING, - }); dispatch({ type: t.EXCHANGE_RATE_TABLE_LOADING, - loading: true, + payload: { + loading: true, + }, }); + ApiService.get('exchange_rates') .then((response) => { - + dispatch({ + type: t.EXCHANGE_RATES_PAGE_SET, + payload: { + exchange_rates: response.data.exchange_rates.results, + pagination: response.data.exchange_rates.pagination, + customViewId: response.data.exchange_rates.customViewId || -1, + }, + }); dispatch({ type: t.EXCHANGE_RATE_LIST_SET, exchange_rates: response.data.exchange_rates.results, }); + dispatch({ - type: t.SET_DASHBOARD_REQUEST_COMPLETED, + type: t.EXCHANGE_RATES_PAGINATION_SET, + payload: { + pagination: response.data.exchange_rates.pagination, + customViewId: response.data.customViewId || -1, + }, }); dispatch({ type: t.EXCHANGE_RATE_TABLE_LOADING, - loading: false, + payload: { + loading: false, + }, }); resolve(response); }) diff --git a/client/src/store/ExchangeRate/exchange.reducer.js b/client/src/store/ExchangeRate/exchange.reducer.js index 0d8f26010..112299fd9 100644 --- a/client/src/store/ExchangeRate/exchange.reducer.js +++ b/client/src/store/ExchangeRate/exchange.reducer.js @@ -1,11 +1,18 @@ import { createReducer } from '@reduxjs/toolkit'; +import { createTableQueryReducers } from 'store/queryReducers'; import t from 'store/types'; const initialState = { exchangeRates: {}, + loading: false, + tableQuery: { + page_size: 5, + page: 1, + }, + currentViewId: -1, }; -export default createReducer(initialState, { +const reducer = createReducer(initialState, { [t.EXCHANGE_RATE_LIST_SET]: (state, action) => { const _exchangeRates = {}; action.exchange_rates.forEach((exchange_rate) => { @@ -17,8 +24,51 @@ export default createReducer(initialState, { ..._exchangeRates, }; }, + [t.EXCHANGE_RATE_TABLE_LOADING]: (state, action) => { - state.loading = action.loading; + + const { loading } = action.payload; + state.loading = loading; + }, + + [t.ESTIMATES_PAGE_SET]: (state, action) => { + const { customViewId, exchange_rates, pagination } = action.payload; + + const viewId = customViewId || -1; + const view = state.views[viewId] || {}; + + state.views[viewId] = { + ...view, + pages: { + ...(state.views?.[viewId]?.pages || {}), + [pagination.page]: { + ids: exchange_rates.map((i) => i.id), + }, + }, + }; + }, + + [t.EXCHANGE_RATES_PAGINATION_SET]: (state, action) => { + const { pagination, customViewId } = action.payload; + + const mapped = { + pageSize: parseInt(pagination.pageSize, 10), + page: parseInt(pagination.page, 10), + total: parseInt(pagination.total, 10), + }; + const paginationMeta = { + ...mapped, + pagesCount: Math.ceil(mapped.total / mapped.pageSize), + pageIndex: Math.max(mapped.page - 1, 0), + }; + + state.views = { + ...state.views, + [customViewId]: { + ...(state.views?.[customViewId] || {}), + paginationMeta, + }, + }; }, [t.EXCHANGE_RATES_BULK_DELETE]: (state, action) => { @@ -35,3 +85,5 @@ export default createReducer(initialState, { } }, }); + +export default createTableQueryReducers('exchange_rates', reducer); diff --git a/client/src/store/ExchangeRate/exchange.selector.js b/client/src/store/ExchangeRate/exchange.selector.js index dd676674e..cc7f726c1 100644 --- a/client/src/store/ExchangeRate/exchange.selector.js +++ b/client/src/store/ExchangeRate/exchange.selector.js @@ -1,8 +1,18 @@ import { createSelector } from 'reselect'; -import { pickItemsFromIds, getItemById } from 'store/selectors'; +import { + pickItemsFromIds, + getItemById, + paginationLocationQuery, +} from 'store/selectors'; const exchangeRateItemsSelector = (state) => state.exchangeRates.exchangeRates; const exchangeRateIdPropSelector = (state, props) => props.exchangeRateId; +const exchangeRateTableQuery = (state) => state.exchangeRates.tableQuery; + +const exchangeRatesCurrentViewSelector = (state, props) => { + const viewId = state.exchangeRates.currentViewId; + return state.exchangeRates.views?.[viewId]; +}; export const getExchangeRatesList = createSelector( exchangeRateItemsSelector, @@ -18,3 +28,20 @@ export const getExchangeRateById = createSelector( return getItemById(exchangeRates, exchangeRateId); }, ); + +export const getExchangeRatePaginationMetaFactory = () => + createSelector(exchangeRatesCurrentViewSelector, (exchangeRateView) => { + return exchangeRateView?.paginationMeta || {}; + }); + +export const getExchangeRatesTableQueryFactory = () => + createSelector( + paginationLocationQuery, + exchangeRateTableQuery, + (locationQuery, tableQuery) => { + return { + ...locationQuery, + ...tableQuery, + }; + }, + ); diff --git a/client/src/store/ExchangeRate/exchange.type.js b/client/src/store/ExchangeRate/exchange.type.js index 13b237388..85807c21e 100644 --- a/client/src/store/ExchangeRate/exchange.type.js +++ b/client/src/store/ExchangeRate/exchange.type.js @@ -4,6 +4,8 @@ export default { EXCHANGE_RATE_LIST_SET: 'EXCHANGE_RATE_LIST_SET', CLEAR_EXCHANGE_RATE_FORM_ERRORS: 'CLEAR_EXCHANGE_RATE_FORM_ERRORS', ExchangeRates_TABLE_QUERIES_ADD: 'ExchangeRates_TABLE_QUERIES_ADD', - EXCHANGE_RATE_TABLE_LOADING:'EXCHANGE_RATE_TABLE_LOADING', + EXCHANGE_RATE_TABLE_LOADING: 'EXCHANGE_RATE_TABLE_LOADING', EXCHANGE_RATES_BULK_DELETE: 'EXCHANGE_RATES_BULK_DELETE', + EXCHANGE_RATES_PAGE_SET: 'EXCHANGE_RATES_PAGE_SET', + EXCHANGE_RATES_PAGINATION_SET: 'EXCHANGE_RATES_PAGINATION_SET', };