feat: datatables pagination.

client/src/containers/Items/ItemFormBody.js

@@ -101,7 +101,7 @@ function ItemFormBody({ accountsList }) {
         <Col xs={6}>
           {/*------------- Sellable checkbox ------------- */}
           <FastField name={'purchasable'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
+            {({ form, field: { value, onChange }, meta: { error, touched } }) => (
               <FormGroup inline={true} className={'form-group--purchasable'}>
                 <Checkbox
                   inline={true}
@@ -111,7 +111,7 @@ function ItemFormBody({ accountsList }) {
                     </h3>
                   }
                   checked={value}
-                  {...field}
+                  onChange={onChange}
                 />
               </FormGroup>
             )}

client/src/containers/Items/ItemsDataTable.js

@@ -10,34 +10,46 @@ import {
   Tag,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { Icon, DataTable, Money, If, Choose } from 'components';
+import { Icon, DataTable, Money } from 'components';
+import { useIsValuePassed } from 'hooks';
 
 import LoadingIndicator from 'components/LoadingIndicator';
 import withItems from 'containers/Items/withItems';
-import { compose } from 'utils';
-
-
-const ItemsDataTable = ({
-  loading,
+import withItemsActions from 'containers/Items/withItemsActions';
+import { compose, saveInvoke } from 'utils';
 
+function ItemsDataTable({
   // #withItems
   itemsTableLoading,
   itemsCurrentPage,
+  itemsTableQuery,
+
+  // #withItemsActions
+  addItemsTableQueries,
 
   // props
   onEditItem,
   onDeleteItem,
-  onFetchData,
   onSelectedRowsChange,
-}) => {
+}) {
   const { formatMessage } = useIntl();
-  const [initialMount, setInitialMount] = useState(false);
+  const isLoadedBefore = useIsValuePassed(itemsTableLoading, false);
 
-  useEffect(() => {
-    if (!itemsTableLoading) {
-      setInitialMount(true);
-    }
-  }, [itemsTableLoading, setInitialMount]);
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addItemsTableQueries({
+        page_size: pageSize,
+        page: pageIndex + 1,
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+      });
+    },
+    [addItemsTableQueries],
+  );
 
   const handleEditItem = useCallback(
     (item) => () => {
@@ -46,7 +58,6 @@ const ItemsDataTable = ({
     [onEditItem],
   );
 
-  // const handleDeleteItem = (item) => () => { onDeleteItem(item); };
   const handleDeleteItem = useCallback(
     (item) => () => {
       onDeleteItem(item);
@@ -158,48 +169,49 @@ const ItemsDataTable = ({
     [actionMenuList, formatMessage],
   );
 
-  const selectionColumn = useMemo(
-    () => ({
-      minWidth: 42,
-      width: 42,
-      maxWidth: 42,
-    }),
-    [],
-  );
-
-  const handleFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args);
-  }, []);
-
+  // Handle selected row change.
   const handleSelectedRowsChange = useCallback(
     (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
+      saveInvoke(
+        onSelectedRowsChange,
+        selectedRows.map((s) => s.original),
+      );
     },
     [onSelectedRowsChange],
   );
+
   return (
-    <LoadingIndicator loading={loading} mount={false}>
+    <LoadingIndicator
+      loading={itemsTableLoading && !isLoadedBefore}
+      mount={false}
+    >
       <DataTable
         columns={columns}
         data={itemsCurrentPage}
-        selectionColumn={selectionColumn}
         onFetchData={handleFetchData}
-        loading={itemsTableLoading && !initialMount}
         noInitialFetch={true}
         expandable={true}
-        treeGraph={true}
+        selectionColumn={true}
         spinnerProps={{ size: 30 }}
         onSelectedRowsChange={handleSelectedRowsChange}
         rowContextMenu={handleRowContextMenu}
+        sticky={true}
+        pagination={true}
+        pagesCount={2}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        initialPageSize={itemsTableQuery.page_size}
+        initialPageIndex={itemsTableQuery.page - 1}
       />
     </LoadingIndicator>
   );
 };
 
 export default compose(
-  withItems(({ itemsCurrentPage, itemsTableLoading }) => ({
+  withItems(({ itemsCurrentPage, itemsTableLoading, itemsTableQuery }) => ({
     itemsCurrentPage,
     itemsTableLoading,
+    itemsTableQuery,
   })),
+  withItemsActions,
 )(ItemsDataTable);

client/src/containers/Items/ItemsList.js

@@ -43,7 +43,6 @@ function ItemsList({
 }) {
   const [deleteItem, setDeleteItem] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
-  const [tableLoading, setTableLoading] = useState(false);
   const [bulkDelete, setBulkDelete] = useState(false);
 
   const { formatMessage } = useIntl();
@@ -53,16 +52,19 @@ function ItemsList({
     changePageTitle(formatMessage({ id: 'items_list' }));
   }, [changePageTitle]);
 
+  // Handle fetching the resource views.
   const fetchResourceViews = useQuery(
     ['resource-views', 'items'],
     (key, resourceName) => requestFetchResourceViews(resourceName),
   );
 
+  // Handle fetching the resource fields.
   const fetchResourceFields = useQuery(
     ['resource-fields', 'items'],
     (key, resourceName) => requestFetchResourceFields(resourceName),
   );
 
+  // Handle fetching the items table based on the given query.
   const fetchItems = useQuery(['items-table', itemsTableQuery], () =>
     requestFetchItems({}),
   );
@@ -112,18 +114,7 @@ function ItemsList({
 
   const handleFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addItemsTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
+     
     },
     [addItemsTableQueries],
   );
@@ -135,23 +126,9 @@ function ItemsList({
         filter_roles: filterConditions || '',
       });
     },
-    [fetchItems],
+    [addItemsTableQueries],
   );
 
-  // Handle custom view change to re-fetch the items.
-  const handleCustomViewChanged = useCallback(
-    (customViewId) => {
-      setTableLoading(true);
-    },
-    [fetchItems],
-  );
-
-  useEffect(() => {
-    if (tableLoading && !fetchItems.isFetching) {
-      setTableLoading(false);
-    }
-  }, [tableLoading, fetchItems.isFetching]);
-
   // Handle selected rows change.
   const handleSelectedRowsChange = useCallback(
     (accounts) => {
@@ -213,16 +190,13 @@ function ItemsList({
             exact={true}
             path={['/items/:custom_view_id/custom_view', '/items']}
           >
-            <ItemsViewsTabs onViewChanged={handleCustomViewChanged} />
+            <ItemsViewsTabs />
 
             <ItemsDataTable
-              loading={fetchItems.isFetching}
               onDeleteItem={handleDeleteItem}
               onEditItem={handleEditItem}
-              onFetchData={handleFetchData}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
-
             <Alert
               cancelButtonText={<T id={'cancel'} />}
               confirmButtonText={<T id={'delete'} />}

client/src/containers/Items/withItems.js

@@ -10,6 +10,7 @@ import {
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
     const viewPages = getViewPages(state.items.views, state.items.currentViewId);
+
     const mapped = {
       itemsViews: getResourceViews(state, props, 'items'),
       itemsCurrentPage: getCurrentPageResults(

client/src/containers/Items/withItemsActions.js

@@ -1,11 +1,11 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import {
   fetchItems,
   fetchItem,
   deleteItem,
   submitItem,
   editItem,
-  deleteBulkItems
+  deleteBulkItems,
 } from 'store/items/items.actions';
 import t from 'store/types';
 
@@ -13,26 +13,36 @@ export const mapDispatchToProps = (dispatch) => ({
   requestFetchItems: (query) => dispatch(fetchItems({ query })),
   requestFetchItem: (id) => dispatch(fetchItem({ id })),
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
-  requestDeleteBulkItems:(ids)=>dispatch(deleteBulkItems({ids})),
+  requestDeleteBulkItems: (ids) => dispatch(deleteBulkItems({ ids })),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
-  requestEditItem:(id,form) => dispatch(editItem({id,form})),
-  addBulkActionItem: (id) => dispatch({
-    type: t.ITEM_BULK_ACTION_ADD, itemId: id
-  }),
-  removeBulkActionItem: (id) => dispatch({
-    type: t.ITEM_BULK_ACTION_REMOVE, itemId: id,
-  }),
-  setItemsTableQuery: (key, value) => dispatch({
-    type: t.ITEMS_TABLE_QUERY_SET, key, value,
-  }),
-  addItemsTableQueries: (queries) => dispatch({
-    type: t.ITEMS_TABLE_QUERIES_ADD, queries,
-  }),
+  requestEditItem: (id, form) => dispatch(editItem({ id, form })),
+  addBulkActionItem: (id) =>
+    dispatch({
+      type: t.ITEM_BULK_ACTION_ADD,
+      itemId: id,
+    }),
+  removeBulkActionItem: (id) =>
+    dispatch({
+      type: t.ITEM_BULK_ACTION_REMOVE,
+      itemId: id,
+    }),
+  setItemsTableQuery: (key, value) =>
+    dispatch({
+      type: t.ITEMS_TABLE_QUERY_SET,
+      key,
+      value,
+    }),
+  addItemsTableQueries: (queries) =>
+    dispatch({
+      type: t.ITEMS_TABLE_QUERIES_ADD,
+      payload: { queries },
+    }),
 
-  changeItemsCurrentView: (id) => dispatch({
-    type: t.ITEMS_SET_CURRENT_VIEW,
-    currentViewId: parseInt(id, 10),
-  }),
+  changeItemsCurrentView: (id) =>
+    dispatch({
+      type: t.ITEMS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
 });
 
 export default connect(null, mapDispatchToProps);