feat: datatables pagination.

client/src/containers/Customers/CustomerTable.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
 import {
   Button,
   Popover,
@@ -8,14 +8,15 @@ import {
   Position,
   Intent,
 } from '@blueprintjs/core';
-
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { useUpdateEffect } from 'hooks';
+import { useIsValuePassed } from 'hooks';
 
 import LoadingIndicator from 'components/LoadingIndicator';
 import { DataTable, Icon, Money } from 'components';
 
 import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+
 import { compose, firstLettersArgs, saveInvoke } from 'utils';
 
 const AvatarCell = (row) => {
@@ -27,6 +28,10 @@ const CustomerTable = ({
   customers,
   customersLoading,
   customerPagination,
+  customersTableQuery,
+
+  // #withCustomersActions
+  addCustomersTableQueries,
 
   //#OwnProps
   loading,
@@ -36,13 +41,7 @@ const CustomerTable = ({
   onSelectedRowsChange,
 }) => {
   const { formatMessage } = useIntl();
-  const [initialMount, setInitialMount] = useState(false);
-
-  useUpdateEffect(() => {
-    if (!customersLoading) {
-      setInitialMount(true);
-    }
-  }, [customersLoading, setInitialMount]);
+  const isLoadedBefore = useIsValuePassed(loading, false);
 
   // Customers actions list.
   const renderContextMenu = useMemo(
@@ -94,6 +93,7 @@ const CustomerTable = ({
     [onDeleteCustomer, onEditCustomer, renderContextMenu],
   );
 
+  // Table columns.
   const columns = useMemo(
     () => [
       {
@@ -150,19 +150,23 @@ const CustomerTable = ({
     [formatMessage, renderActionsCell],
   );
 
-  const selectionColumn = useMemo(
-    () => ({
-      minWidth: 42,
-      width: 42,
-      maxWidth: 42,
-    }),
-    [],
+  // Handle fetch data table.
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addCustomersTableQueries({
+        page: pageIndex + 1,
+        page_size: pageSize,
+        ...(sortBy.length > 0
+          ? {
+              column_sort_order: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+      });
+    },
+    [addCustomersTableQueries],
   );
 
-  const handleFetchDate = useCallback((...args) => {
-    onFetchData && onFetchData(...args);
-  });
-
   const handleSelectedRowsChange = useCallback(
     (selectedRows) => {
       onSelectedRowsChange &&
@@ -179,32 +183,47 @@ const CustomerTable = ({
     });
 
   return (
-    <LoadingIndicator loading={loading} mount={false}>
+    <LoadingIndicator
+      loading={customersLoading && !isLoadedBefore}
+      mount={false}
+    >
       <DataTable
         noInitialFetch={true}
         columns={columns}
         data={customers}
-        selectionColumn={selectionColumn}
-        onFetchData={handleFetchDate}
+        // loading={customersLoading}
+        onFetchData={handleFetchData}
+        selectionColumn={true}
         expandable={false}
-        treeGraph={false}
+        sticky={true}
         onSelectedRowsChange={handleSelectedRowsChange}
-        loading={customersLoading && !initialMount}
         spinnerProps={{ size: 30 }}
         rowContextMenu={rowContextMenu}
         pagination={true}
+        manualSortBy={true}
         pagesCount={customerPagination.pagesCount}
-        initialPageSize={customerPagination.pageSize}
-        initialPageIndex={customerPagination.page - 1}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        initialPageSize={customersTableQuery.page_size}
+        initialPageIndex={customersTableQuery.page - 1}
       />
     </LoadingIndicator>
   );
 };
 
 export default compose(
-  withCustomers(({ customers, customersLoading, customerPagination }) => ({
-    customers,
-    customersLoading,
-    customerPagination,
-  })),
+  withCustomers(
+    ({
+      customers,
+      customersLoading,
+      customerPagination,
+      customersTableQuery,
+    }) => ({
+      customers,
+      customersLoading,
+      customerPagination,
+      customersTableQuery,
+    }),
+  ),
+  withCustomersActions,
 )(CustomerTable);

client/src/containers/Customers/CustomersList.js

@@ -52,15 +52,12 @@ function CustomersList({
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'customers_list' }));
-  }, [changePageTitle]);
+  }, [changePageTitle, formatMessage]);
 
   // Fetch customers resource views and fields.
-  // const fetchHook = useQuery('resource-customers', () => {
-  //   return Promise.all([
-  //     requestFetchResourceViews('customers'),
-  //     requestFetchResourceFields('customers'),
-  //   ]);
-  // });
+  // const fetchResourceViews = useQuery(['resource-views', 'customers'],
+  //   () => requestFetchResourceViews('customers')
+  // );
 
   const fetchCustomers = useQuery(
     ['customers-table', customersTableQuery],
@@ -116,22 +113,6 @@ function CustomersList({
       });
   }, [requestDeleteCustomer, deleteCustomer, formatMessage]);
 
-  // Handle fetch data table.
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      addCustomersTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_order: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-      });
-      fetchCustomers.refetch();
-    },
-    [fetchCustomers, addCustomersTableQueries],
-  );
-
   // Handle selected rows change.
   const handleSelectedRowsChange = useCallback(
     (customer) => {
@@ -154,9 +135,9 @@ function CustomersList({
   // Handle filter change to re-fetch the items.
   const handleFilterChanged = useCallback(
     (filterConditions) => {
-      addCustomersTableQueries({
-        filter_roles: filterConditions || '',
-      });
+      // addCustomersTableQueries({
+      //   filter_roles: filterConditions || '',
+      // });
     },
     [addCustomersTableQueries],
   );
@@ -210,7 +191,6 @@ function CustomersList({
               loading={fetchCustomers.isFetching}
               onDeleteCustomer={handleDeleteCustomer}
               onEditCustomer={handleEditCustomer}
-              onfetchData={handleFetchData}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -258,5 +238,6 @@ export default compose(
   withResourceActions,
   withCustomersActions,
   withDashboardActions,
+  withViewsActions,
   withCustomers(({ customersTableQuery }) => ({ customersTableQuery })),
 )(CustomersList);

client/src/containers/Customers/CustomersViewsTabs.js

@@ -39,9 +39,9 @@ function CustomersViewsTabs({
   useEffect(() => {
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-    addCustomersTableQueries({
-      custom_view_id: customViewId,
-    });
+    // addCustomersTableQueries({
+    //   custom_view_id: customViewId,
+    // });
     return () => {
       setTopbarEditView(null);
       changePageSubtitle('');

client/src/containers/Customers/withCustomersActions.js

@@ -19,7 +19,7 @@ export const mapDispatchToProps = (dispatch) => ({
   addCustomersTableQueries: (queries) =>
     dispatch({
       type: t.CUSTOMERS_TABLE_QUERIES_ADD,
-      queries,
+      payload: { queries }
     }),
 });