Support async data manager #3

* Basic support for async data manager * Still need to support loading indicators and update doc and examples
kayak · Oct 29, 2016 · ce25052 · ce25052
1 parent 70abcdd
commit ce25052
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 32 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -92,11 +92,13 @@ <h3>Custom data manager</h3>
     <pre><code class="language-jsx">import {Table, Column} from ReactTisch;
 
 const dataManager = {
-    getItemCount: () => 2,
-    getFilterOptions: () => [[]],
-    // Note: getVisibleRows should take into account the state (searchText, selectedFilters, etc). Refer to the
+    // Note: visibleRows should take into account the state (searchText, selectedFilters, etc). Refer to the
     // documentation for more details.
-    getVisibleRows: (state) => [{index: 0, data: {name: 'Joe'}}, {index: 1, data: {name: 'Mike'}}]
+    getData: (state) => ({
+        itemCount: 2,
+        filterOptions: [[]],
+        visibleRows: [{index: 0, data: {name: 'Joe'}}, {index: 1, data: {name: 'Mike'}}]
+    })
 };
 
 &lt;Table dataManager={dataManager}&gt;
@@ -134,9 +136,11 @@ <h3>Custom data manager</h3>
     );
 
     const dataManager = {
-        getItemCount: () => 2,
-        getFilterOptions: () => [[]],
-        getVisibleRows: (state) => [{index: 0, data: {name: 'Joe'}}, {index: 1, data: {name: 'Mike'}}]
+        getData: (state) => ({
+            itemCount: 2,
+            filterOptions: [[]],
+            visibleRows: [{index: 0, data: {name: 'Joe'}}, {index: 1, data: {name: 'Mike'}}]
+        })
     };
 
     ReactDOM.render(

diff --git a/src/DataManager.js b/src/DataManager.js
@@ -112,21 +112,26 @@ class DataManager {
             }));
     }
 
-    getItemCount() {
-        return this.itemCount;
-    }
-
-    getFilterOptions() {
-        return this.uniqueValues;
-    }
-
     getVisibleRows({selectedFilters, sortColumn, sortOrder, itemsPerPage, activePage, searchText}) {
         let sortedAndFilteredRowIndexes = this.sortedRowIndexes(sortColumn, sortOrder)
                 .filter(rowIndex => this.doesRowMatchFilters(rowIndex, selectedFilters))
                 .filter(rowIndex => this.doesRowMatchSearch(rowIndex, searchText));
 
         return this.paginatedRows(sortedAndFilteredRowIndexes, activePage, itemsPerPage);
     }
+
+    getData(state, onLoad) {
+        /*
+         * Only required public member of DataManager.
+         * It doesn't have to return data: for an async data manager, it can call the onLoad callback provided in the
+         * second argument when data is ready.
+         */
+        return {
+            visibleRows: this.getVisibleRows(state),
+            itemCount: this.itemCount,
+            filterOptions: this.uniqueValues
+        };
+    }
 }
 
 export default DataManager;
diff --git a/src/TableController.jsx b/src/TableController.jsx
@@ -12,7 +12,8 @@ class TableController extends React.Component {
         activePage: 1,
         searchText: '',
         selectedRows: {},
-        canSelectRows: false
+        canSelectRows: false,
+        forcedRedrawData: null
     };
 
     static propTypes = {
@@ -41,50 +42,67 @@ class TableController extends React.Component {
         this.updateStateFromProps(this.props);
     }
 
+    _setState(newState) {
+        this.setState({
+            forcedRedrawData: null,
+            ...newState
+        });
+    }
+
     onSort(sortColumn, sortOrder) {
-        this.setState({sortColumn, sortOrder});
+        this._setState({sortColumn, sortOrder});
     }
 
     onFilter(selectedFilters) {
-        this.setState({selectedFilters});
+        this._setState({selectedFilters});
     }
 
     onPageSelect(activePage) {
-        this.setState({activePage});
+        this._setState({activePage});
     }
 
     onSearch(searchText) {
-        this.setState({searchText});
+        this._setState({searchText});
     }
 
     onItemsPerPageSelect(itemsPerPage) {
-        this.setState({itemsPerPage});
+        this._setState({itemsPerPage});
     }
 
     onRowSelection(selectedRows) {
         if (this.state.canSelectRows) {
-            this.setState({selectedRows});
+            this._setState({selectedRows});
         }
     }
 
-    pageCount() {
-        let {itemsPerPage, dataManager} = this.state;
-        return Math.ceil(dataManager.getItemCount() / itemsPerPage);
+    pageCount(itemCount) {
+        let {itemsPerPage} = this.state;
+        return Math.ceil(itemCount / itemsPerPage);
+    }
+
+    onDataUpdate(newData) {
+        this.setState({
+            forcedRedrawData: newData
+        });
     }
 
     render() {
+        let data = this.state.forcedRedrawData ||
+            this.state.dataManager.getData(this.state, this.onDataUpdate.bind(this));
+
+
         return (
             <TablePresentation
-                filterOptions={this.state.dataManager.getFilterOptions()}
+                filterOptions={data.filterOptions}
                 sortColumn={this.state.sortColumn}
                 sortOrder={this.state.sortOrder}
                 selectedFilters={this.state.selectedFilters}
                 activePage={this.state.activePage}
                 searchText={this.state.searchText}
-                pageCount={this.pageCount()}
+                pageCount={this.pageCount(data.itemCount)}
                 itemsPerPage={this.state.itemsPerPage}
                 selectedRows={this.state.selectedRows}
-                itemCount={this.state.dataManager.getItemCount()}
+                itemCount={data.itemCount}
 
                 onSearch={this.onSearch.bind(this)}
                 onSort={this.onSort.bind(this)}
@@ -93,7 +111,7 @@ class TableController extends React.Component {
                 onItemsPerPageSelect={this.onItemsPerPageSelect.bind(this)}
                 onRowSelection={this.onRowSelection.bind(this)}
 
-                visibleRows={this.state.dataManager.getVisibleRows(this.state)}
+                visibleRows={data.visibleRows}
             >
                 {this.props.children}
             </TablePresentation>

diff --git a/test/Table.jsx b/test/Table.jsx
@@ -69,9 +69,11 @@ describe('Simple <Table/>', () => {
 
     describe("custom data manager", () => {
         const dataManager = {
-            getItemCount: () => 2,
-            getFilterOptions: () => [[]],
-            getVisibleRows: () => [{index: 0, data: {name: 'Joe'}}, {index: 1, data: {name: 'Mike'}}]
+            getData: () => ({
+                itemCount: 2,
+                filterOptions: [[]],
+                visibleRows: [{index: 0, data: {name: 'Joe'}}, {index: 1, data: {name: 'Mike'}}]
+            })
         };
         let testTableWithCustomDataManager = (
             <Table dataManager={dataManager}>