fix bug in piece list filter widget

js/components/ascribe_buttons/create_editions_button.js

@@ -42,11 +42,11 @@ let CreateEditionsButton = React.createClass({
     },
 
     startPolling() {
+        let filterBy = this.state.editionList[this.props.piece.id].filterBy;
         // start polling until editions are defined
         let pollingIntervalIndex = setInterval(() => {
-            let editionsForPiece = this.state.editionList[this.props.piece.id];
 
-            EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, editionsForPiece.filterBy)
+            EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, filterBy)
             .then((res) => {
 
                 clearInterval(this.state.pollingIntervalIndex);

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -13,6 +13,8 @@ let PieceListToolbar = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         searchFor: React.PropTypes.func,
+        filterBy: React.PropTypes.object,
+        applyFilterBy: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -48,7 +50,9 @@ let PieceListToolbar = React.createClass({
                                     filterParams={['acl_transfer', 'acl_consign', {
                                         key: 'acl_create_editions',
                                         label: 'create editions'
-                                }]} />
+                                    }]}
+                                    filterBy={this.props.filterBy}
+                                    applyFilterBy={this.props.applyFilterBy}/>
                             </span>
                         </div>
                     </div>

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -2,9 +2,6 @@
 
 import React from 'react';
 
-import PieceListStore from '../../stores/piece_list_store';
-import PieceListActions from '../../actions/piece_list_actions';
-
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
@@ -19,27 +16,13 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
         //      label: <a human readable string>
         // }
         //
-        filterParams: React.PropTypes.arrayOf(React.PropTypes.any).isRequired
-    },
-
-    getInitialState() {
-        return PieceListStore.getState();
-    },
-
-    componentDidMount() {
-        PieceListStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        PieceListStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        filterParams: React.PropTypes.arrayOf(React.PropTypes.any).isRequired,
+        filterBy: React.PropTypes.object,
+        applyFilterBy: React.PropTypes.func
     },
 
     generateFilterByStatement(param) {
-        let filterBy = this.state.filterBy;
+        let filterBy = this.props.filterBy;
 
         if(filterBy) {
             // we need hasOwnProperty since the values are all booleans
@@ -68,13 +51,12 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
     filterBy(param) {
         return () => {
             let filterBy = this.generateFilterByStatement(param);
-            PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                            this.state.orderBy, this.state.orderAsc, filterBy);
+            this.props.applyFilterBy(filterBy);
         };
     },
 
     isFilterActive() {
-        let trueValuesOnly = Object.keys(this.state.filterBy).filter((acl) => acl);
+        let trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
 
         // We're hiding the star in that complicated matter so that,
         // the surrounding button is not resized up on appearance
@@ -123,7 +105,7 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
                                 <input
                                     readOnly
                                     type="checkbox"
-                                    checked={this.state.filterBy[param]} />
+                                    checked={this.props.filterBy[param]} />
                             </div>
                         </MenuItem>
                     );

js/components/piece_list.js

@@ -85,6 +85,14 @@ let PieceList = React.createClass({
          this.transitionTo(this.getPathname(), {page: 1});
     },
 
+    applyFilterBy(filterBy) {
+        PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
+                                        this.state.orderBy, this.state.orderAsc, filterBy);
+        // we have to redirect the user always to page one as it could be that there is no page two
+        // for filtered pieces
+        this.transitionTo(this.getPathname(), {page: 1});
+    },
+
     accordionChangeOrder(orderBy, orderAsc) {
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
                                         orderBy, orderAsc, this.state.filterBy);
@@ -97,7 +105,9 @@ let PieceList = React.createClass({
             <div>
                 <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
-                    searchFor={this.searchFor}>
+                    searchFor={this.searchFor}
+                    filterBy={this.state.filterBy}
+                    applyFilterBy={this.applyFilterBy}>
                     {this.props.customSubmitButton}
                 </PieceListToolbar>
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />