feat: Pagination component.

client/src/containers/Accounting/ManualJournalsList.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
+import { Route, Switch, useHistory, withRouter } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 import AppToaster from 'components/AppToaster';
@@ -13,8 +13,10 @@ import ManualJournalsDataTable from 'containers/Accounting/ManualJournalsDataTab
 import ManualJournalsActionsBar from 'containers/Accounting/ManualJournalActionsBar';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withManualJournals from 'containers/Accounting/withManualJournals';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
 import withViewsActions from 'containers/Views/withViewsActions';
+import withRouteActions from 'containers/Router/withRouteActions';
 
 import { compose } from 'utils';
 
@@ -28,12 +30,17 @@ function ManualJournalsTable({
   // #withViewsActions
   requestFetchResourceViews,
 
+  // #withManualJournals
+  manualJournalsTableQuery,
+
   // #withManualJournalsActions
   requestFetchManualJournalsTable,
   requestDeleteManualJournal,
   requestPublishManualJournal,
   requestDeleteBulkManualJournals,
   addManualJournalsTableQueries,
+
+  addQuery,
 }) {
   const history = useHistory();
 
@@ -47,19 +54,21 @@ function ManualJournalsTable({
     return requestFetchResourceViews('manual_journals');
   });
 
-  const fetchManualJournals = useQuery('manual-journals-table',
-    () => requestFetchManualJournalsTable());
+  const fetchManualJournals = useQuery(
+    ['manual-journals-table', manualJournalsTableQuery],
+    (key, q) => requestFetchManualJournalsTable(q),
+  );
 
   useEffect(() => {
-    changePageTitle(formatMessage({id:'manual_journals'}));
-  }, [changePageTitle,formatMessage]);
+    changePageTitle(formatMessage({ id: 'manual_journals' }));
+  }, [changePageTitle, formatMessage]);
 
   // Handle delete manual journal click.
   const handleDeleteJournal = useCallback(
     (journal) => {
       setDeleteManualJournal(journal);
     },
-    [setDeleteManualJournal]
+    [setDeleteManualJournal],
   );
 
   // Handle cancel delete manual journal.
@@ -71,28 +80,26 @@ function ManualJournalsTable({
   const handleConfirmManualJournalDelete = useCallback(() => {
     requestDeleteManualJournal(deleteManualJournal.id).then(() => {
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_journal_has_been_successfully_deleted',
-        }, {
-          number: deleteManualJournal.journal_number,
-        }),
+        message: formatMessage(
+          { id: 'the_journal_has_been_successfully_deleted' },
+          { number: deleteManualJournal.journal_number },
+        ),
         intent: Intent.SUCCESS,
       });
       setDeleteManualJournal(false);
     });
-  }, [deleteManualJournal, requestDeleteManualJournal,formatMessage]);
-
+  }, [deleteManualJournal, requestDeleteManualJournal, formatMessage]);
 
   // Calculates the selected rows count.
-  const selectedRowsCount = useMemo(
-    () => Object.values(selectedRows).length,
-    [selectedRows]);
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
 
   const handleBulkDelete = useCallback(
     (accountsIds) => {
       setBulkDelete(accountsIds);
     },
-    [setBulkDelete]
+    [setBulkDelete],
   );
 
   // Handle confirm journals bulk delete.
@@ -100,11 +107,10 @@ function ManualJournalsTable({
     requestDeleteBulkManualJournals(bulkDelete)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_journals_has_been_successfully_deleted',
-          }, {
-            count: selectedRowsCount,
-          }),
+          message: formatMessage(
+            { id: 'the_journals_has_been_successfully_deleted', },
+            { count: selectedRowsCount, },
+          ),
           intent: Intent.SUCCESS,
         });
         setBulkDelete(false);
@@ -112,7 +118,12 @@ function ManualJournalsTable({
       .catch((error) => {
         setBulkDelete(false);
       });
-  }, [requestDeleteBulkManualJournals, bulkDelete,formatMessage,selectedRowsCount]);
+  }, [
+    requestDeleteBulkManualJournals,
+    bulkDelete,
+    formatMessage,
+    selectedRowsCount,
+  ]);
 
   // Handle cancel bulk delete alert.
   const handleCancelBulkDelete = useCallback(() => {
@@ -123,38 +134,49 @@ function ManualJournalsTable({
     (journal) => {
       history.push(`/manual-journals/${journal.id}/edit`);
     },
-    [history]
+    [history],
   );
 
   // Handle filter change to re-fetch data-table.
-  const handleFilterChanged = useCallback(() => {
-    
-  }, [fetchManualJournals]);
+  const handleFilterChanged = useCallback(() => {}, [fetchManualJournals]);
 
   // Handle view change to re-fetch data table.
   // const handleViewChanged = useCallback(() => {
-    
+
   // }, [fetchManualJournals]);
 
   // Handle fetch data of manual jouranls datatable.
-  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
-    addManualJournalsTableQueries({
-      ...(sortBy.length > 0) ? {
-        column_sort_by: sortBy[0].id,
-        sort_order: sortBy[0].desc ? 'desc' : 'asc',
-      } : {},
-    });
-  }, [addManualJournalsTableQueries]);
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+      // addQuery('page_size', pageSize);
+      // addQuery('page', page);
+
+      addManualJournalsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addManualJournalsTableQueries],
+  );
 
   const handlePublishJournal = useCallback(
     (journal) => {
       requestPublishManualJournal(journal.id).then(() => {
         AppToaster.show({
-          message: formatMessage({id:'the_manual_journal_id_has_been_published'})
+          message: formatMessage({
+            id: 'the_manual_journal_id_has_been_published',
+          }),
         });
       });
     },
-    [requestPublishManualJournal,formatMessage]
+    [requestPublishManualJournal, formatMessage],
   );
 
   // Handle selected rows change.
@@ -162,12 +184,12 @@ function ManualJournalsTable({
     (accounts) => {
       setSelectedRows(accounts);
     },
-    [setSelectedRows]
+    [setSelectedRows],
   );
 
   return (
     <DashboardInsider
-      loading={fetchViews.isFetching || fetchManualJournals.isFetching}
+      loading={fetchViews.isFetching}
       name={'manual-journals'}
     >
       <ManualJournalsActionsBar
@@ -183,7 +205,8 @@ function ManualJournalsTable({
             path={[
               '/manual-journals/:custom_view_id/custom_view',
               '/manual-journals',
-            ]}> 
+            ]}
+          >
             <ManualJournalsViewTabs />
 
             <ManualJournalsDataTable
@@ -199,25 +222,37 @@ function ManualJournalsTable({
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'delete'} />}
-          icon='trash'
+          icon="trash"
           intent={Intent.DANGER}
           isOpen={deleteManualJournal}
           onCancel={handleCancelManualJournalDelete}
           onConfirm={handleConfirmManualJournalDelete}
         >
-          <p><T id={'once_delete_this_journal_category_you_will_able_to_restore_it'} /></p>
+          <p>
+            <T
+              id={
+                'once_delete_this_journal_category_you_will_able_to_restore_it'
+              }
+            />
+          </p>
         </Alert>
 
         <Alert
           cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete_count'} values={{ count: selectedRowsCount }} />}
-          icon='trash'
+          confirmButtonText={
+            <T id={'delete_count'} values={{ count: selectedRowsCount }} />
+          }
+          icon="trash"
           intent={Intent.DANGER}
           isOpen={bulkDelete}
           onCancel={handleCancelBulkDelete}
           onConfirm={handleConfirmBulkDelete}
         >
-          <p><T id={'once_delete_these_journalss_you_will_not_able_restore_them'} /></p>
+          <p>
+            <T
+              id={'once_delete_these_journalss_you_will_not_able_restore_them'}
+            />
+          </p>
         </Alert>
       </DashboardPageContent>
     </DashboardInsider>
@@ -225,7 +260,12 @@ function ManualJournalsTable({
 }
 
 export default compose(
+  withRouter,
+  withRouteActions,
   withDashboardActions,
   withManualJournalsActions,
-  withViewsActions
+  withViewsActions,
+  withManualJournals(({ manualJournalsTableQuery }) => ({
+    manualJournalsTableQuery,
+  })),
 )(ManualJournalsTable);