From 486f058cb850c53f9f83f44abe45dcaed6be38b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 22 May 2015 13:58:09 +0200
Subject: [PATCH] Refactor: Finally found pattern for making components truly
 generic

---
 js/components/ascribe_table/table.js             |  5 +++--
 js/components/ascribe_table/table_header.js      |  4 ++--
 js/components/ascribe_table/table_header_item.js |  6 +++---
 js/components/piece_list.js                      | 10 ++++++----
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js
index 6ea5f07e..d95ea4c7 100644
--- a/js/components/ascribe_table/table.js
+++ b/js/components/ascribe_table/table.js
@@ -8,14 +8,15 @@ import TableColumnModel from '../../models/table_column_model';
 
 let Table = React.createClass({
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel))
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
+        changeOrder: React.PropTypes.func.isRequired
     },
     render() {
 
         if(this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className="ascribe-table">
-                    <TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
+                    <TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} changeOrder={this.props.changeOrder} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
                     {this.props.itemList.map((item, i) => {
                         return (
                             <TableItem columnList={this.props.columnList} columnContent={item} key={i} />
diff --git a/js/components/ascribe_table/table_header.js b/js/components/ascribe_table/table_header.js
index 3c959f76..853990bf 100644
--- a/js/components/ascribe_table/table_header.js
+++ b/js/components/ascribe_table/table_header.js
@@ -12,7 +12,7 @@ let TableHeader = React.createClass({
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
         itemList: React.PropTypes.array.isRequired,
-        fetchList: React.PropTypes.func.isRequired,
+        changeOrder: React.PropTypes.func.isRequired,
         orderAsc: React.PropTypes.bool.isRequired,
         orderBy: React.PropTypes.string.isRequired
     },
@@ -36,7 +36,7 @@ let TableHeader = React.createClass({
                                 canBeOrdered={canBeOrdered} 
                                 orderAsc={this.props.orderAsc}
                                 orderBy={this.props.orderBy}
-                                fetchList={this.props.fetchList}>
+                                changeOrder={this.props.changeOrder}>
                             </TableHeaderItem>
                         );
                     })}
diff --git a/js/components/ascribe_table/table_header_item.js b/js/components/ascribe_table/table_header_item.js
index d918f6e3..fef82f34 100644
--- a/js/components/ascribe_table/table_header_item.js
+++ b/js/components/ascribe_table/table_header_item.js
@@ -9,13 +9,13 @@ let TableHeaderItem = React.createClass({
         displayName: React.PropTypes.string.isRequired,
         columnName: React.PropTypes.string.isRequired,
         canBeOrdered: React.PropTypes.bool.isRequired,
+        changeOrder: React.PropTypes.func.isRequired,
         orderAsc: React.PropTypes.bool.isRequired,
-        orderBy: React.PropTypes.string.isRequired,
-        fetchList: React.PropTypes.func.isRequired
+        orderBy: React.PropTypes.string.isRequired
     },
 
     changeOrder() {
-        this.props.fetchList(1, 10, null, this.props.columnName, !this.props.orderAsc);
+        this.props.changeOrder(this.props.columnName, !this.props.orderAsc);
     },
 
     render() {
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 4fe55f2d..be3bfbe3 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -26,8 +26,11 @@ let PieceList = React.createClass({
     },
 
     paginationGoToPage(page) {
-        return () => PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                          this.state.orderBy, this.state.orderAsc);
+        return () => PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
+    },
+
+    tableChangeOrder(orderBy, orderAsc) {
+        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, orderBy, orderAsc);
     },
 
     render() {
@@ -46,7 +49,6 @@ let PieceList = React.createClass({
                     return {
                         'itemList': props.pieceList,
                         'itemListCount': props.pieceListCount,
-                        'fetchList': props.fetchPieceList,
                         'orderBy': props.orderBy,
                         'orderAsc': props.orderAsc,
                         'search': props.search,
@@ -54,7 +56,7 @@ let PieceList = React.createClass({
                         'pageSize': props.pageSize
                     }
                 }}>
-                <Table columnList={columnList} />
+                <Table columnList={columnList} changeOrder={this.tableChangeOrder} />
                 <Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} />
             </AltContainer>
         );