refine remote mode on filter and pagination

Author: AllenFang

packages/react-bootstrap-table2-filter/src/wrapper.js

@@ -1,12 +1,16 @@
+/* eslint react/prop-types: 0 */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { filters } from './filter';
+import { LIKE } from './comparison';
 
 export default class FilterWrapper extends Component {
   static propTypes = {
     store: PropTypes.object.isRequired,
     columns: PropTypes.array.isRequired,
     baseElement: PropTypes.func.isRequired,
+    onRemoteFilterChange: PropTypes.func.isRequired,
+    // refactoring later
     _: PropTypes.object.isRequired
   }
 
@@ -16,28 +20,51 @@ export default class FilterWrapper extends Component {
     this.onFilter = this.onFilter.bind(this);
   }
 
-  componentWillReceiveProps() {
-    this.setState(() => ({ isDataChanged: false }));
+  componentWillReceiveProps(nextProps) {
+    // consider to use lodash.isEqual
+    if (JSON.stringify(this.state.currFilters) !== JSON.stringify(nextProps.store.filters)) {
+      this.setState(() => ({ isDataChanged: true, currFilters: nextProps.store.filters }));
+    } else {
+      this.setState(() => ({ isDataChanged: false }));
+    }
   }
 
   onFilter(column, filterVal, filterType) {
-    const { store, columns, _ } = this.props;
-    const { currFilters } = this.state;
+    const { store, columns, _, onRemoteFilterChange } = this.props;
+    const currFilters = Object.assign({}, this.state.currFilters);
     const { dataField, filter } = column;
 
     if (!_.isDefined(filterVal) || filterVal === '') {
       delete currFilters[dataField];
     } else {
-      const { comparator } = filter.props;
+      const { comparator = LIKE } = filter.props;
       currFilters[dataField] = { filterVal, filterType, comparator };
     }
+    store.filters = currFilters;
 
-    store.filteredData = filters(store, columns, _)(currFilters);
-    store.filtering = Object.keys(currFilters).length > 0;
+    if (this.isRemote() || this.isPaginationRemote()) {
+      onRemoteFilterChange(this.isPaginationRemote());
+      // when remote filtering is enable, dont set currFilters state
+      // in the componentWillReceiveProps, it's the key point that we can know the filter is changed
+      return;
+    }
 
+    store.filteredData = filters(store, columns, _)(currFilters);
     this.setState(() => ({ currFilters, isDataChanged: true }));
   }
 
+  // refactoring later
+  isRemote() {
+    const { remote } = this.props;
+    return remote === true || (typeof remote === 'object' && remote.filter);
+  }
+
+  // refactoring later
+  isPaginationRemote() {
+    const { remote } = this.props;
+    return remote === true || (typeof remote === 'object' && remote.pagination);
+  }
+
   render() {
     return this.props.baseElement({
       ...this.props,

packages/react-bootstrap-table2-filter/test/wrapper.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
 import _ from 'react-bootstrap-table2/src/utils';
@@ -20,7 +21,11 @@ for (let i = 0; i < 20; i += 1) {
 describe('Wrapper', () => {
   let wrapper;
   let instance;
+  const onRemoteFilterChangeCB = sinon.stub();
 
+  afterEach(() => {
+    onRemoteFilterChangeCB.reset();
+  });
 
   const createTableProps = () => {
     const tableProps = {
@@ -40,7 +45,8 @@ describe('Wrapper', () => {
       data,
       filter: filter(),
       _,
-      store: new Store('id')
+      store: new Store('id'),
+      onRemoteFilterChange: onRemoteFilterChangeCB
     };
     tableProps.store.data = data;
     return tableProps;
@@ -84,13 +90,28 @@ describe('Wrapper', () => {
   describe('componentWillReceiveProps', () => {
     let nextProps;
 
-    beforeEach(() => {
-      nextProps = createTableProps();
-      instance.componentWillReceiveProps(nextProps);
+    describe('when props.store.filters is same as current state.currFilters', () => {
+      beforeEach(() => {
+        nextProps = createTableProps();
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should setting isDataChanged as false (Temporary solution)', () => {
+        expect(instance.state.isDataChanged).toBeFalsy();
+      });
     });
 
-    it('should setting isDataChanged as false always(Temporary solution)', () => {
-      expect(instance.state.isDataChanged).toBeFalsy();
+    describe('when props.store.filters is different from current state.currFilters', () => {
+      beforeEach(() => {
+        nextProps = createTableProps();
+        nextProps.store.filters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should setting states correctly', () => {
+        expect(instance.state.isDataChanged).toBeTruthy();
+        expect(instance.state.currFilters).toBe(nextProps.store.filters);
+      });
     });
   });
 
@@ -126,7 +147,7 @@ describe('Wrapper', () => {
 
       it('should setting store object correctly', () => {
         instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
-        expect(props.store.filtering).toBeTruthy();
+        expect(props.store.filters).toEqual(instance.state.currFilters);
       });
 
       it('should setting state correctly', () => {
@@ -136,30 +157,54 @@ describe('Wrapper', () => {
       });
     });
 
+    describe('when remote filter is enabled', () => {
+      const filterVal = '3';
+
+      beforeEach(() => {
+        props = createTableProps();
+        props.remote = { filter: true };
+        createFilterWrapper(props);
+        instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+      });
+
+      it('should not setting store object correctly', () => {
+        expect(props.store.filters).not.toEqual(instance.state.currFilters);
+      });
+
+      it('should not setting state', () => {
+        expect(instance.state.isDataChanged).toBeFalsy();
+        expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
+      });
+
+      it('should calling props.onRemoteFilterChange correctly', () => {
+        expect(onRemoteFilterChangeCB.calledOnce).toBeTruthy();
+      });
+    });
+
     describe('combination', () => {
       it('should setting store object correctly', () => {
         instance.onFilter(props.columns[1], '3', FILTER_TYPE.TEXT);
-        expect(props.store.filtering).toBeTruthy();
+        expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
         instance.onFilter(props.columns[1], '2', FILTER_TYPE.TEXT);
-        expect(props.store.filtering).toBeTruthy();
+        expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
         instance.onFilter(props.columns[2], '2', FILTER_TYPE.TEXT);
-        expect(props.store.filtering).toBeTruthy();
+        expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(2);
 
         instance.onFilter(props.columns[2], '', FILTER_TYPE.TEXT);
-        expect(props.store.filtering).toBeTruthy();
+        expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
         instance.onFilter(props.columns[1], '', FILTER_TYPE.TEXT);
-        expect(props.store.filtering).toBeFalsy();
+        expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
       });

packages/react-bootstrap-table2-paginator/src/wrapper.js

@@ -11,7 +11,8 @@ import { getByCurrPage } from './page';
 class PaginationWrapper extends Component {
   static propTypes = {
     store: PropTypes.object.isRequired,
-    baseElement: PropTypes.func.isRequired
+    baseElement: PropTypes.func.isRequired,
+    onRemotePageChange: PropTypes.func.isRequired
   }
 
   constructor(props) {
@@ -43,14 +44,15 @@ class PaginationWrapper extends Component {
     }
 
     this.state = { currPage, currSizePerPage };
+    this.saveToStore(currPage, currSizePerPage);
   }
 
   componentWillReceiveProps(nextProps) {
     let needNewState = false;
     let { currPage, currSizePerPage } = this.state;
-    const { page, sizePerPage, pageStartIndex } = nextProps.pagination.options;
+    const { page, sizePerPage, pageStartIndex, onPageChange } = nextProps.pagination.options;
 
-    if (typeof page !== 'undefined') { // user defined page
+    if (typeof page !== 'undefined' && currPage !== page) { // user defined page
       currPage = page;
       needNewState = true;
     } else if (nextProps.isDataChanged) { // user didn't defined page but data change
@@ -63,7 +65,19 @@ class PaginationWrapper extends Component {
       needNewState = true;
     }
 
-    if (needNewState) this.setState(() => ({ currPage, currSizePerPage }));
+    this.saveToStore(currPage, currSizePerPage);
+
+    if (needNewState) {
+      if (onPageChange) {
+        onPageChange(currPage, currSizePerPage);
+      }
+      this.setState(() => ({ currPage, currSizePerPage }));
+    }
+  }
+
+  saveToStore(page, sizePerPage) {
+    this.props.store.page = page;
+    this.props.store.sizePerPage = sizePerPage;
   }
 
   isRemote() {
@@ -74,11 +88,13 @@ class PaginationWrapper extends Component {
   handleChangePage(currPage) {
     const { currSizePerPage } = this.state;
     const { pagination: { options }, onRemotePageChange } = this.props;
+    this.saveToStore(currPage, currSizePerPage);
+
     if (options.onPageChange) {
       options.onPageChange(currPage, currSizePerPage);
     }
     if (this.isRemote()) {
-      onRemotePageChange(currPage, currSizePerPage);
+      onRemotePageChange();
       return;
     }
     this.setState(() => {
@@ -90,11 +106,13 @@ class PaginationWrapper extends Component {
 
   handleChangeSizePerPage(currSizePerPage, currPage) {
     const { pagination: { options }, onRemotePageChange } = this.props;
+    this.saveToStore(currPage, currSizePerPage);
+
     if (options.onSizePerPageChange) {
       options.onSizePerPageChange(currSizePerPage, currPage);
     }
     if (this.isRemote()) {
-      onRemotePageChange(currPage, currSizePerPage);
+      onRemotePageChange();
       return;
     }
     this.setState(() => {