Fix: Exchange Rate Pageination

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}
       />
     </LoadingIndicator>
   );
@@ -160,8 +164,15 @@ function ExchangeRateTable({
 export default compose(
   withDialogActions,
   withExchangeRatesActions,
-  withExchangeRates(({ exchangeRatesList, exchangeRatesLoading }) => ({
+  withExchangeRates(
+    ({
       exchangeRatesList,
       exchangeRatesLoading,
-  })),
+      exchangeRatesPageination,
+    }) => ({
+      exchangeRatesList,
+      exchangeRatesLoading,
+      exchangeRatesPageination,
+    }),
+  ),
 )(ExchangeRateTable);

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;
   };

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,
+        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,
+            payload: {
               loading: false,
+            },
           });
           resolve(response);
         })

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);

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,
+      };
+    },
+  );

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',
 };