fix(exchangeRate): fix pagination & add sorting.

client/src/containers/ExchangeRates/ExchangeRateTable.js

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import { useExchangeRatesContext } from './ExchangeRatesProvider';
 import { useExchangeRatesTableColumns, ActionMenuList } from './components';
 
+import withExchangeRates from './withExchangeRates';
+import withExchangeRatesActions from './withExchangeRatesActions';
+
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
-
 import { compose } from 'utils';
 
 /**
@@ -23,6 +26,12 @@ function ExchangeRateTable({
 
   // #withAlertActions
   openAlert,
+
+  // #withExchangeRatesActions
+  setExchangeRateTableState,
+
+  // #withExchangeRates
+  exchangeRatesTableState,
 }) {
   const {
     isExchangeRatesFetching,
@@ -48,28 +57,51 @@ function ExchangeRateTable({
     });
   };
 
+  const handleFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setExchangeRateTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setExchangeRateTableState],
+  );
+
   return (
     <DataTable
+      noInitialFetch={true}
       columns={columns}
       data={exchangesRates}
-      noInitialFetch={true}
+      initialState={exchangeRatesTableState}
       loading={isExchangeRatesLoading}
       headerLoading={isExchangeRatesLoading}
       progressBarLoading={isExchangeRatesFetching}
       selectionColumn={true}
-      manualSortBy={true}
       expandable={true}
       sticky={true}
-      // pagination={true}
+      manualSortBy={true}
+      onFetchData={handleFetchData}
+      pagination={true}
+      manualPagination={true}
+      pagesCount={pagination.pagesCount}
       TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionMenuList}
       payload={{
         onDeleteExchangeRate: handleDeleteExchangeRate,
         onEditExchangeRate: handelEditExchangeRate,
       }}
-      ContextMenu={ActionMenuList}
       {...tableProps}
     />
   );
 }
 
-export default compose(withDialogActions, withAlertActions)(ExchangeRateTable);
+export default compose(
+  withDialogActions,
+  withAlertActions,
+  withExchangeRates(({ exchangeRatesTableState }) => ({
+    exchangeRatesTableState,
+  })),
+  withExchangeRatesActions,
+)(ExchangeRateTable);

client/src/containers/ExchangeRates/ExchangeRatesList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { compose } from 'utils';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
 
@@ -7,13 +8,20 @@ import ExchangeRateActionsBar from './ExchangeRateActionsBar';
 
 import { ExchangeRatesProvider } from './ExchangeRatesProvider';
 import ExchangeRatesAlerts from './ExchangeRatesAlerts';
+import withExchangeRates from './withExchangeRates';
+import { transformTableStateToQuery } from 'utils';
 
 /**
  * Exchange Rates list.
  */
-export default function ExchangeRatesList() {
+function ExchangeRatesList({
+  // #withExchangeRates
+  exchangeRatesTableState,
+}) {
   return (
-    <ExchangeRatesProvider>
+    <ExchangeRatesProvider
+      query={transformTableStateToQuery(exchangeRatesTableState)}
+    >
       <ExchangeRateActionsBar />
 
       <DashboardPageContent>
@@ -25,3 +33,8 @@ export default function ExchangeRatesList() {
     </ExchangeRatesProvider>
   );
 }
+export default compose(
+  withExchangeRates(({ exchangeRatesTableState }) => ({
+    exchangeRatesTableState,
+  })),
+)(ExchangeRatesList);

client/src/containers/ExchangeRates/ExchangeRatesProvider.js

@@ -1,4 +1,6 @@
 import React, { createContext } from 'react';
+import { transformTableQueryToParams } from 'utils';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useExchangeRates } from 'hooks/query';
 
@@ -9,10 +11,15 @@ const ExchangesRatesContext = createContext();
  */
 function ExchangeRatesProvider({ query, ...props }) {
   const {
-    data: { exchangesRates, pagination },
+    data: { exchangesRates, pagination, filterMeta },
     isFetching: isExchangeRatesFetching,
     isLoading: isExchangeRatesLoading,
-  } = useExchangeRates();
+  } = useExchangeRates(
+    {
+      ...transformTableQueryToParams(query),
+    },
+    { keepPreviousData: true },
+  );
 
   const state = {
     isExchangeRatesFetching,
@@ -20,11 +27,10 @@ function ExchangeRatesProvider({ query, ...props }) {
 
     exchangesRates,
     pagination,
-    query,
   };
 
   return (
-    <DashboardInsider name={'exchange-rate-list'}>
+    <DashboardInsider name={'exchange-rate'}>
       <ExchangesRatesContext.Provider value={state} {...props} />
     </DashboardInsider>
   );

client/src/containers/ExchangeRates/withExchangeRates.js

@@ -1,24 +1,12 @@
 import { connect } from 'react-redux';
-import {
-  getExchangeRatesList,
-  getExchangeRatePaginationMetaFactory,
-  getExchangeRatesTableQueryFactory,
-} from 'store/ExchangeRate/exchange.selector';
+import { getExchangeRatesTableStateFactory } from 'store/ExchangeRate/exchange.selector';
 
 export default (mapState) => {
-  const getExchangeRatesPaginationMeta = getExchangeRatePaginationMetaFactory();
-
+  const getExchangeRatesTableState = getExchangeRatesTableStateFactory();
+  
   const mapStateToProps = (state, props) => {
-    const query = getExchangeRatesTableQueryFactory(state, props);
-
     const mapped = {
-      exchangeRatesList: getExchangeRatesList(state, props),
-      exchangeRatesLoading: state.exchangeRates.loading,
-      exchangeRatesPageination: getExchangeRatesPaginationMeta(
-        state,
-        props,
-        query,
-      ),
+      exchangeRatesTableState: getExchangeRatesTableState(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/ExchangeRates/withExchangeRatesActions.js

@@ -1,23 +1,9 @@
 import { connect } from 'react-redux';
-import {
-  submitExchangeRate,
-  fetchExchangeRates,
-  deleteExchangeRate,
-  editExchangeRate,
-  deleteBulkExchangeRates
-} from 'store/ExchangeRate/exchange.actions';
+import { setExchangeRateTableState } from 'store/ExchangeRate/exchange.actions';
 
-const mapActionsToProps = (dispatch) => ({
-  requestSubmitExchangeRate: (form) => dispatch(submitExchangeRate({ form })),
-  requestFetchExchangeRates: () => dispatch(fetchExchangeRates()),
-  requestDeleteExchangeRate: (id) => dispatch(deleteExchangeRate(id)),
-  requestEditExchangeRate: (id, form) => dispatch(editExchangeRate(id, form)),
-  requestDeleteBulkExchangeRates:(ids)=>dispatch(deleteBulkExchangeRates({ids})),
-  addExchangeRatesTableQueries: (queries) =>
-    dispatch({
-      type: 'ExchangeRates_TABLE_QUERIES_ADD',
-      queries,
-    }),
+export const mapDispatchToProps = (dispatch) => ({
+  setExchangeRateTableState: (queries) =>
+    dispatch(setExchangeRateTableState(queries)),
 });
 
-export default connect(null, mapActionsToProps);
+export default connect(null, mapDispatchToProps);