refactoring remote sort

packages/react-bootstrap-table2/src/contexts/index.js

@@ -1,16 +1,10 @@
 /* eslint no-return-assign: 0 */
-/* eslint react/prop-types: 0 */
 import React, { Component } from 'react';
-// import Store from './store';
-// import withSort from './sort/wrapper';
-// import withSelection from './row-selection/wrapper';
 import createDataContext from './data-context';
 import createSortContext from './sort-context';
 import createSelectionContext from './selection-context';
-
 import remoteResolver from '../props-resolver/remote-resolver';
 
-
 const withContext = (Base) => {
   let DataContext;
   let SelectionContext;
@@ -21,40 +15,44 @@ const withContext = (Base) => {
       super(props);
       DataContext = createDataContext(this.props.data);
       SelectionContext = createSelectionContext();
-      SortContext = createSortContext();
+      SortContext = createSortContext(this.isRemoteSort, this.handleSortChange);
     }
 
     render() {
-      const { keyField, columns, remote } = this.props;
-      const baseProps = { keyField, columns, remote };
+      const { keyField, columns } = this.props;
+      const baseProps = { keyField, columns };
 
       return (
-        <DataContext.Provider data={ this.props.data }>
+        <DataContext.Provider
+          { ...baseProps }
+          data={ this.props.data }
+        >
           <DataContext.Consumer>
             {
-              dataProps => (
+              rootProps => (
                 <SelectionContext.Provider
                   { ...baseProps }
                   selectRow={ this.props.selectRow }
-                  data={ dataProps }
+                  data={ rootProps.data }
                 >
                   <SelectionContext.Consumer>
                     {
                       selectionProps => (
                         <SortContext.Provider
+                          ref={ n => this.sortProvider = n }
                           { ...baseProps }
                           defaultSorted={ this.props.defaultSorted }
                           defaultSortDirection={ this.props.defaultSortDirection }
-                          data={ dataProps }
+                          data={ rootProps.data }
                         >
                           <SortContext.Consumer>
                             {
                               sortProps => (
                                 <Base
                                   { ...this.props }
-                                  { ...dataProps }
                                   { ...selectionProps }
                                   { ...sortProps }
+                                  data={ sortProps.data }
                                 />
                               )
                             }

packages/react-bootstrap-table2/src/contexts/sort-context.js

@@ -1,16 +1,20 @@
-
+/* eslint react/require-default-props: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Const from '../const';
 import { sort, nextOrder } from '../store/sort';
-import remoteResolver from '../props-resolver/remote-resolver';
 
-export default () => {
+export default (
+  isRemoteSort,
+  handleSortChange
+) => {
   const SortContext = React.createContext();
 
-  class SortProvider extends remoteResolver(React.Component) {
+  class SortProvider extends React.Component {
     static propTypes = {
+      data: PropTypes.array.isRequired,
       columns: PropTypes.array.isRequired,
+      children: PropTypes.node.isRequired,
       defaultSorted: PropTypes.arrayOf(PropTypes.shape({
         dataField: PropTypes.string.isRequired,
         order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
@@ -35,8 +39,8 @@ export default () => {
             sortColumn.onSort(sortField, sortOrder);
           }
 
-          if (this.isRemoteSort() || this.isRemotePagination()) {
-            this.handleSortChange();
+          if (isRemoteSort()) {
+            handleSortChange(sortField, sortOrder);
           }
         }
       }
@@ -50,20 +54,19 @@ export default () => {
         column.onSort(column.dataField, sortOrder);
       }
 
-      if (this.isRemoteSort() || this.isRemotePagination()) {
-        this.handleSortChange();
-      } else {
-        this.setState(() => ({
-          sortOrder,
-          sortColumn: column
-        }));
+      if (isRemoteSort()) {
+        handleSortChange(column.dataField, sortOrder);
       }
+      this.setState(() => ({
+        sortOrder,
+        sortColumn: column
+      }));
     }
 
     render() {
       let { data } = this.props;
       const { sortOrder, sortColumn } = this.state;
-      if (!this.isRemoteSort() && !this.isRemotePagination() && sortColumn) {
+      if (!isRemoteSort() && sortColumn) {
         data = sort(data, sortOrder, sortColumn);
       }
 

packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js

@@ -2,17 +2,19 @@ import _ from '../utils';
 
 export default ExtendBase =>
   class RemoteResolver extends ExtendBase {
+    /* eslint class-methods-use-this: 0 */
     getNewestState(state = {}) {
-      const store = this.store || this.props.store;
-      return {
-        page: store.page,
-        sizePerPage: store.sizePerPage,
-        filters: store.filters,
-        sortField: store.sortField,
-        sortOrder: store.sortOrder,
-        data: store.getAllData(),
-        ...state
-      };
+      // const store = this.store || this.props.store;
+      // return {
+      //   page: store.page,
+      //   sizePerPage: store.sizePerPage,
+      //   filters: store.filters,
+      //   sortField: store.sortField,
+      //   sortOrder: store.sortOrder,
+      //   data: store.getAllData(),
+      //   ...state
+      // };
+      return { ...state, data: this.props.data };
     }
 
     isRemotePagination() {
@@ -25,9 +27,9 @@ export default ExtendBase =>
       return remote === true || (_.isObject(remote) && remote.filter);
     }
 
-    isRemoteSort() {
+    isRemoteSort = () => {
       const { remote } = this.props;
-      return remote === true || (_.isObject(remote) && remote.sort);
+      return remote === true || (_.isObject(remote) && remote.sort) || this.isRemotePagination();
     }
 
     isRemoteCellEdit() {
@@ -48,8 +50,8 @@ export default ExtendBase =>
       this.props.onTableChange('filter', this.getNewestState(newState));
     }
 
-    handleSortChange() {
-      this.props.onTableChange('sort', this.getNewestState());
+    handleSortChange = (sortField, sortOrder) => {
+      this.props.onTableChange('sort', this.getNewestState({ sortField, sortOrder }));
     }
 
     handleCellChange(rowId, dataField, newValue) {