put show state of item list in store to fix bug

js/actions/piece_list_actions.js

@@ -6,7 +6,8 @@ import PieceListFetcher from '../fetchers/piece_list_fetcher';
 class PieceListActions {
     constructor() {
         this.generateActions(
-            'updatePieceList'
+            'updatePieceList',
+            'showEditionList'
         );
     }
 

js/components/ascribe_accordion_list/accordion_list_item_table.js

@@ -6,30 +6,17 @@ import TableItem from '../ascribe_table/table_item';
 import TableColumnContentModel from '../../models/table_column_content_model';
 
 let AccordionListItemTable = React.createClass({
-    getInitialState() {
-        return {
-            'show': false
-        };
-    },
-
     propTypes: {
         className: React.PropTypes.string,
         parentId: React.PropTypes.number,
-        fetchData: React.PropTypes.func,
         itemList: React.PropTypes.array,
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        numOfTableItems: React.PropTypes.number
+        numOfTableItems: React.PropTypes.number,
-    },
+        show: React.PropTypes.bool
-
-    toggleTable() {
-        this.props.fetchData();
-        this.setState({
-            'show': !this.state.show
-        });
     },
 
     render() {
-        if(this.props.itemList && this.state.show) {
+        if(this.props.show && this.props.itemList) {
             return (
                 <div className={this.props.className}>
                     <Table
@@ -44,44 +31,17 @@ let AccordionListItemTable = React.createClass({
                             );
                         })}
                     </Table>
-                    <AccordionListItemTableToggle
+                    {this.props.children}
-                        className="ascribe-accordion-list-table-toggle" 
-                        onClick={this.toggleTable}
-                        show={this.state.show}
-                        numOfTableItems={this.props.numOfTableItems} />
                 </div>
             );
         } else {
             return (
                 <div className={this.props.className}>
-                    <AccordionListItemTableToggle
+                    {this.props.children}
-                        className="ascribe-accordion-list-table-toggle" 
-                        onClick={this.toggleTable} 
-                        show={this.state.show}
-                        numOfTableItems={this.props.numOfTableItems} />
                 </div>
             );
         }
     }
 });
 
-let AccordionListItemTableToggle = React.createClass({
-    propTypes: {
-        className: React.PropTypes.string,
-        onClick: React.PropTypes.func,
-        show: React.PropTypes.bool,
-        numOfTableItems: React.PropTypes.number
-    },
-
-    render() {
-        return (
-            <span 
-                className={this.props.className}
-                onClick={this.props.onClick}>
-                {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
-            </span>
-        );
-    }
-});
-
 export default AccordionListItemTable;

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -2,8 +2,11 @@ import React from 'react';
 
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
+import PieceListStore from '../../stores/piece_list_store';
+import PieceListActions from '../../actions/piece_list_actions';
 
 import AccordionListItemTable from './accordion_list_item_table';
+import AccordionListItemTableToggle from './accordion_list_item_table_toggle';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
 
@@ -17,7 +20,8 @@ let AccordionListItemTableEditions = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         parentId: React.PropTypes.number,
-        numOfEditions: React.PropTypes.number
+        numOfEditions: React.PropTypes.number,
+        show: React.PropTypes.bool
     },
 
     getInitialState() {
@@ -36,14 +40,15 @@ let AccordionListItemTableEditions = React.createClass({
         EditionListStore.unlisten(this.onChange);
     },
 
-    getEditionList() {
-        EditionListActions.fetchEditionList(this.props.parentId);
-    },
-
     selectItem(pieceId, editionId) {
         EditionListActions.selectEdition({pieceId, editionId});
     },
 
+    toggleTable() {
+        PieceListActions.showEditionList(this.props.parentId);
+        EditionListActions.fetchEditionList(this.props.parentId);
+    },
+
     render() {
         let columnList = [
             new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
@@ -53,13 +58,22 @@ let AccordionListItemTableEditions = React.createClass({
         ];
 
         return (
-            <AccordionListItemTable
+            <div>
-                className={this.props.className}
+                <AccordionListItemTable
-                parentId={this.props.parentId}
+                    className={this.props.className}
-                fetchData={this.getEditionList}
+                    parentId={this.props.parentId}
-                itemList={this.state.editionList[this.props.parentId]}
+                    itemList={this.state.editionList[this.props.parentId]}
-                columnList={columnList}
+                    columnList={columnList}
-                numOfTableItems={this.props.numOfEditions} />
+                    numOfTableItems={this.props.numOfEditions}
+                    show={this.props.show}>
+                    <AccordionListItemTableToggle
+                        className="ascribe-accordion-list-table-toggle" 
+                        onClick={this.toggleTable}
+                        show={this.props.show}
+                        numOfTableItems={this.props.numOfEditions} />
+                </AccordionListItemTable>
+                
+            </div>
         );
     }
 });

js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+let AccordionListItemTableToggle = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        onClick: React.PropTypes.func,
+        show: React.PropTypes.bool,
+        numOfTableItems: React.PropTypes.number
+    },
+
+    render() {
+        return (
+            <span 
+                className={this.props.className}
+                onClick={this.props.onClick}>
+                {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
+            </span>
+        );
+    }
+});
+
+export default AccordionListItemTableToggle;

js/components/piece_list.js

@@ -71,6 +71,7 @@ let PieceList = React.createClass({
                                 <AccordionListItemTableEditions 
                                     className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
                                     parentId={item.id}
+                                    show={item.show}
                                     numOfEditions={item.num_editions}/>
                             </AccordionListItem>
                         );

js/stores/piece_list_store.js

@@ -24,6 +24,19 @@ class PieceListStore {
         this.bindActions(PieceListActions);
     }
 
+    onShowEditionList(pieceId) {
+        this.pieceList
+            .forEach((piece) => {
+                if(piece.id === pieceId) {
+                    if(piece.show) {
+                        piece.show = false;
+                    } else {
+                        piece.show = true;
+                    }
+                }
+            });
+    }
+
     onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
         this.page = page;
         this.pageSize = pageSize;