From ef6662e8592c7239f05c9f71b7a60d108b3bf7b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Jun 2015 09:16:30 +0200 Subject: [PATCH 1/6] add ordering functionality to editionlist table --- js/actions/edition_list_actions.js | 8 +++++--- .../accordion_list_item_table.js | 10 ++++++++-- .../accordion_list_item_table_editions.js | 17 ++++++++++++----- js/components/ascribe_table/table.js | 13 +++++++------ js/fetchers/edition_list_fetcher.js | 7 +++++-- js/stores/edition_list_store.js | 6 +++++- 6 files changed, 42 insertions(+), 19 deletions(-) diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js index 78cc0eeb..f07d7d18 100644 --- a/js/actions/edition_list_actions.js +++ b/js/actions/edition_list_actions.js @@ -11,13 +11,15 @@ class EditionListActions { ); } - fetchEditionList(pieceId) { + fetchEditionList(pieceId, orderBy, orderAsc) { EditionListFetcher - .fetch(pieceId) + .fetch(pieceId, orderBy, orderAsc) .then((res) => { this.actions.updateEditionList({ 'editionListOfPiece': res.editions, - pieceId + pieceId, + orderBy, + orderAsc }); }) .catch((err) => { diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js index 1cf410df..82b9a23a 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js @@ -14,7 +14,10 @@ let AccordionListItemTable = React.createClass({ itemList: React.PropTypes.array, columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), numOfTableItems: React.PropTypes.number, - show: React.PropTypes.bool + show: React.PropTypes.bool, + changeOrder: React.PropTypes.func, + orderBy: React.PropTypes.string, + orderAsc: React.PropTypes.bool }, render() { @@ -23,7 +26,10 @@ let AccordionListItemTable = React.createClass({
+ itemList={this.props.itemList} + changeOrder={this.props.changeOrder} + orderBy={this.props.orderBy} + orderAsc={this.props.orderAsc}> {this.props.itemList.map((item, i) => { return ( { @@ -87,7 +91,7 @@ let AccordionListItemTableEditions = React.createClass({ getLangText('Bitcoin Address'), TableItemText, 5, - false + true ), new TableColumnContentModel( (item) => { @@ -110,7 +114,10 @@ let AccordionListItemTableEditions = React.createClass({ itemList={this.state.editionList[this.props.parentId]} columnList={columnList} numOfTableItems={this.props.numOfEditions} - show={this.props.show}> + show={this.props.show} + orderBy={this.state.orderBy} + orderAsc={this.state.orderAsc} + changeOrder={this.changeEditionListOrder}>
{this.renderChildren()} diff --git a/js/fetchers/edition_list_fetcher.js b/js/fetchers/edition_list_fetcher.js index 07e52d87..2cec37a7 100644 --- a/js/fetchers/edition_list_fetcher.js +++ b/js/fetchers/edition_list_fetcher.js @@ -1,5 +1,7 @@ import fetch from '../utils/fetch'; +import { generateOrderingQueryParams } from '../utils/fetch_api_utils'; + import AppConstants from '../constants/application_constants'; @@ -7,8 +9,9 @@ let EditionListFetcher = { /** * Fetches a list of editions from the API. */ - fetch(pieceId) { - return fetch.get('editions_list', { 'piece_id': pieceId }); + fetch(pieceId, orderBy, orderAsc) { + let ordering = generateOrderingQueryParams(orderBy, orderAsc); + return fetch.get('editions_list', { 'piece_id': pieceId, ordering }); } }; diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js index b8855896..4c93fd5c 100644 --- a/js/stores/edition_list_store.js +++ b/js/stores/edition_list_store.js @@ -6,10 +6,12 @@ import EditionsListActions from '../actions/edition_list_actions'; class EditionListStore { constructor() { this.editionList = {}; + this.orderBy = 'edition_number'; + this.orderAsc = true; this.bindActions(EditionsListActions); } - onUpdateEditionList({pieceId, editionListOfPiece}) { + onUpdateEditionList({pieceId, editionListOfPiece, orderBy, orderAsc}) { if(this.editionList[pieceId]) { this.editionList[pieceId].forEach((edition, i) => { // This uses the index of the new editionList for determining the edition. @@ -18,6 +20,8 @@ class EditionListStore { }) } this.editionList[pieceId] = editionListOfPiece; + this.orderBy = orderBy; + this.orderAsc = orderAsc; } onSelectEdition({pieceId, editionId}) { From 4fe5766bc453d0ffc4f3ad969c2967dc3bdb9b2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Jun 2015 10:11:18 +0200 Subject: [PATCH 2/6] add select all functionality for edition list table --- .../accordion_list_item_table_editions.js | 30 ++++++++++++++++++- ...t_item_table_select_all_editions_toggle.js | 21 +++++++++++++ .../ascribe_table/table_header_item.js | 5 +++- js/stores/piece_list_store.js | 1 + js/utils/lang_utils.js | 2 +- 5 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index afe9eb5d..97bc7659 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -7,6 +7,7 @@ import PieceListActions from '../../actions/piece_list_actions'; import AccordionListItemTable from './accordion_list_item_table'; import AccordionListItemTableToggle from './accordion_list_item_table_toggle'; +import AccordionListItemTableSelectAllEditionsToggle from './accordion_list_item_table_select_all_editions_toggle'; import TableColumnContentModel from '../../models/table_column_content_model'; @@ -46,6 +47,19 @@ let AccordionListItemTableEditions = React.createClass({ EditionListActions.selectEdition({pieceId, editionId}); }, + selectAllItems() { + this.state.editionList[this.props.parentId] + .forEach((edition) => { + this.selectItem(this.props.parentId, edition.id); + }); + }, + + filterSelectedEditions() { + let selectedEditions = this.state.editionList[this.props.parentId] + .filter((edition) => edition.selected); + return selectedEditions; + }, + toggleTable() { PieceListActions.showEditionList(this.props.parentId); EditionListActions.fetchEditionList(this.props.parentId, this.state.orderBy, this.state.orderAsc); @@ -56,6 +70,17 @@ let AccordionListItemTableEditions = React.createClass({ }, render() { + let selectedEditionsCount = 0; + let allEditionsCount = 0; + + // here we need to check if all editions of a specific + // piece are already defined. Otherwise .length will throw an error and we'll not + // be notified about it. + if(this.state.editionList[this.props.parentId]) { + selectedEditionsCount = this.filterSelectedEditions().length; + allEditionsCount = this.state.editionList[this.props.parentId].length; + } + let columnList = [ new TableColumnContentModel( (item) => { @@ -66,7 +91,10 @@ let AccordionListItemTableEditions = React.createClass({ 'selected': item.selected }}, '', - '', + , TableItemCheckbox, 1, false diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js b/js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js new file mode 100644 index 00000000..37af9edb --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_select_all_editions_toggle.js @@ -0,0 +1,21 @@ +import React from 'react'; + + +let AccordionListItemTableSelectAllEditionsToggle = React.createClass({ + + propTypes: { + onChange: React.PropTypes.func.isRequired, + numOfSelectedEditions: React.PropTypes.number.isRequired, + numOfAllEditions: React.PropTypes.number.isRequired + }, + + render() { + return ( + + ); + } +}); + +export default AccordionListItemTableSelectAllEditionsToggle; \ No newline at end of file diff --git a/js/components/ascribe_table/table_header_item.js b/js/components/ascribe_table/table_header_item.js index dce2261e..598edada 100644 --- a/js/components/ascribe_table/table_header_item.js +++ b/js/components/ascribe_table/table_header_item.js @@ -6,7 +6,10 @@ let TableHeaderItem = React.createClass({ propTypes: { columnClasses: React.PropTypes.string.isRequired, - displayName: React.PropTypes.string.isRequired, + displayName: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.element + ]).isRequired, columnName: React.PropTypes.string.isRequired, canBeOrdered: React.PropTypes.bool, changeOrder: React.PropTypes.func, diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index 7ca96c87..b70f8fc3 100644 --- a/js/stores/piece_list_store.js +++ b/js/stores/piece_list_store.js @@ -35,6 +35,7 @@ class PieceListStore { } } }); + console.log(this.pieceList, pieceId); } onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) { diff --git a/js/utils/lang_utils.js b/js/utils/lang_utils.js index 7eb4b6f3..d1ea5fd5 100644 --- a/js/utils/lang_utils.js +++ b/js/utils/lang_utils.js @@ -11,7 +11,7 @@ import { formatText } from './general_utils'; export function getLangText(s, ...args) { let lang = navigator.language || navigator.userLanguage; // this is just for testing, as changing the navigator.language wasn't possible - lang = 'de'; + //lang = 'de'; try { if(lang in languages) { return formatText(languages[lang][s], args); From 0747c89a35811dc54d3f3cbb9b936d44ca4b0e42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Jun 2015 10:25:31 +0200 Subject: [PATCH 3/6] documenting known issue with open/close state of edition list table --- js/stores/piece_list_store.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index b70f8fc3..3b3fd94e 100644 --- a/js/stores/piece_list_store.js +++ b/js/stores/piece_list_store.js @@ -35,17 +35,31 @@ class PieceListStore { } } }); - console.log(this.pieceList, pieceId); } - + onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) { this.page = page; this.pageSize = pageSize; this.search = search; this.orderAsc = orderAsc; this.orderBy = orderBy; - this.pieceList = pieceList; this.pieceListCount = pieceListCount; + + /** + * The piece list store currently stores the open/close state of a piece list item. + * + * Once a new page is requested, this.pieceList will be overwritten, which means that the + * open/close state of a specific list item will be thrown away. + * + * This means that when opening an editionListTable on a piece, and continuing + * clicking next or back in the pagination, the editionListTable will return to its + * default value, which is "close". + * + * We did not implement this, as we're going to add pagination to pieceList at some + * point anyway. Then, this problem is automatically resolved. + * + */ + this.pieceList = pieceList; } }; From 302f05b68eb29a5beec50bd97bed8104135b1407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Jun 2015 11:41:56 +0200 Subject: [PATCH 4/6] add link functionality --- .../accordion_list_item.js | 3 +++ .../accordion_list_item_table_editions.js | 12 +++++++--- .../ascribe_media/resource_viewer.js | 2 +- .../ascribe_table/table_item_wrapper.js | 24 +++++++++++++++++-- js/models/table_column_content_model.js | 3 ++- 5 files changed, 37 insertions(+), 7 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index e9bb8742..c52f7e55 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -1,9 +1,12 @@ import React from 'react'; +import Router from 'react-router'; import AccordionListItemTable from './accordion_list_item_table'; import { getLangText } from '../../utils/lang_utils'; +let Link = Router.Link; + let AccordionListItem = React.createClass({ propTypes: { className: React.PropTypes.string, diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 97bc7659..70391e2d 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -1,4 +1,5 @@ import React from 'react'; +import Router from 'react-router'; import EditionListStore from '../../stores/edition_list_store'; import EditionListActions from '../../actions/edition_list_actions'; @@ -18,6 +19,8 @@ import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered'; import { getLangText } from '../../utils/lang_utils'; +let Link = Router.Link; + let AccordionListItemTableEditions = React.createClass({ propTypes: { @@ -108,7 +111,8 @@ let AccordionListItemTableEditions = React.createClass({ '#', TableItemText, 1, - true + true, + {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'} ), new TableColumnContentModel( (item) => { @@ -119,7 +123,8 @@ let AccordionListItemTableEditions = React.createClass({ getLangText('Bitcoin Address'), TableItemText, 5, - true + true, + {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'} ), new TableColumnContentModel( (item) => { @@ -130,7 +135,8 @@ let AccordionListItemTableEditions = React.createClass({ getLangText('Actions'), TableItemAclFiltered, 4, - false + false, + {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'} ) ]; diff --git a/js/components/ascribe_media/resource_viewer.js b/js/components/ascribe_media/resource_viewer.js index 4519bcb7..519b6cec 100644 --- a/js/components/ascribe_media/resource_viewer.js +++ b/js/components/ascribe_media/resource_viewer.js @@ -25,7 +25,7 @@ let ResourceViewer = React.createClass({ mixins: [InjectInHeadMixin], componentDidMount() { - this.inject('http://antani.com'); + //this.inject('http://antani.com'); }, render() { diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js index c6251c4b..a6ffa36b 100644 --- a/js/components/ascribe_table/table_item_wrapper.js +++ b/js/components/ascribe_table/table_item_wrapper.js @@ -1,16 +1,31 @@ import React from 'react'; +import Router from 'react-router'; import TableColumnContentModel from '../../models/table_column_content_model'; import TableColumnMixin from '../../mixins/table_column_mixin'; let TableItemWrapper = React.createClass({ - mixins: [TableColumnMixin], + mixins: [TableColumnMixin, Router.Navigation], propTypes: { columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), columnContent: React.PropTypes.object, columnWidth: React.PropTypes.number.isRequired }, + /** + * If a link is defined in columnContent, then we can use + * Router.Navigation.transitionTo to redirect the user + * programmatically + */ + transition(column) { + if(column.link) { + let params = {}; + params[column.link.paramsKey] = this.props.columnContent[column.link.contentKey]; + + this.transitionTo(column.link.to, params); + } + }, + render() { return (
@@ -21,8 +36,13 @@ let TableItemWrapper = React.createClass({ let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth); + let transition = this.transition.bind(this, column); + return ( -
+
); diff --git a/js/models/table_column_content_model.js b/js/models/table_column_content_model.js index 5e93cce4..ecaa0748 100644 --- a/js/models/table_column_content_model.js +++ b/js/models/table_column_content_model.js @@ -1,12 +1,13 @@ class TableColumnContentModel { // ToDo: Add validation for all passed-in parameters - constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) { + constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, link) { this.transformFn = transformFn; this.columnName = columnName; this.displayName = displayName; this.displayType = displayType; this.rowWidth = rowWidth; this.canBeOrdered = canBeOrdered; + this.link = link; } } From ccbf411168a198b01dcf7aa47a646ed747b4a62c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Jun 2015 13:16:19 +0200 Subject: [PATCH 5/6] fixed store bindings --- js/app.js | 20 ++++++++++++++++++ .../piece_list_bulk_modal.js | 21 +++++++++---------- .../ascribe_table/table_item_wrapper.js | 1 - js/components/edition_container.js | 20 ++++++++++-------- js/components/header.js | 4 ++++ js/components/piece_list.js | 2 +- 6 files changed, 46 insertions(+), 22 deletions(-) diff --git a/js/app.js b/js/app.js index d37e1a62..30d2f486 100644 --- a/js/app.js +++ b/js/app.js @@ -14,6 +14,26 @@ import alt from './alt'; import fetch from './utils/fetch'; import AlertDismissable from './components/ascribe_forms/alert'; +/* + Taken from + http://stackoverflow.com/questions/30613447/how-to-debug-reactjss-setstate?noredirect=1#comment49301874_30613447 + + + +*/ + +var warn = console.warn; +console.warn = function(warning) { + if (/(setState)/.test(warning)) { + throw new Error(warning); + } + warn.apply(console, arguments); +}; + +/* + + + */ fetch.defaults({ urlMap: ApiUrls, diff --git a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js index 896882df..75695058 100644 --- a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js +++ b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js @@ -15,7 +15,10 @@ let PieceListBulkModal = React.createClass({ }, getInitialState() { - return EditionListStore.getState(); + return { + editions: EditionListStore.getState(), + user: UserStore.getState() + }; }, onChange(state) { @@ -37,9 +40,9 @@ let PieceListBulkModal = React.createClass({ let selectedEditionList = []; Object - .keys(this.state.editionList) + .keys(this.state.editions.editionList) .forEach((key) => { - let filteredEditionsForPiece = this.state.editionList[key].filter((edition) => edition.selected); + let filteredEditionsForPiece = this.state.editions.editionList[key].filter((edition) => edition.selected); selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece); }); @@ -73,10 +76,6 @@ let PieceListBulkModal = React.createClass({ EditionListActions.clearAllEditionSelections(); }, - handleSuccess(){ - - }, - render() { let availableAcls = this.getAvailableAcls(); let selectedEditions = this.fetchSelectedEditionList(); @@ -104,25 +103,25 @@ let PieceListBulkModal = React.createClass({ availableAcls={availableAcls} action="transfer" editions={selectedEditions} - currentUser={this.state.currentUser} + currentUser={this.state.user.currentUser} handleSuccess={this.handleSuccess} />
diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js index a6ffa36b..62778174 100644 --- a/js/components/ascribe_table/table_item_wrapper.js +++ b/js/components/ascribe_table/table_item_wrapper.js @@ -21,7 +21,6 @@ let TableItemWrapper = React.createClass({ if(column.link) { let params = {}; params[column.link.paramsKey] = this.props.columnContent[column.link.contentKey]; - this.transitionTo(column.link.to, params); } }, diff --git a/js/components/edition_container.js b/js/components/edition_container.js index 6887fd20..7b8b6151 100644 --- a/js/components/edition_container.js +++ b/js/components/edition_container.js @@ -11,10 +11,11 @@ import Edition from './edition'; * This is the component that implements resource/data specific functionality */ let EditionContainer = React.createClass({ - getInitialState() { - return {'user': UserStore.getState(), - 'edition': EditionStore.getState()} + return { + 'user': UserStore.getState(), + 'edition': EditionStore.getState() + }; }, onChange(state) { @@ -22,10 +23,11 @@ let EditionContainer = React.createClass({ }, componentDidMount() { - EditionActions.fetchOne(this.props.params.editionId); EditionStore.listen(this.onChange); - UserActions.fetchCurrentUser(); UserStore.listen(this.onChange); + + UserActions.fetchCurrentUser(); + EditionActions.fetchOne(this.props.params.editionId); }, componentDidUnmount() { EditionStore.unlisten(this.onChange); @@ -33,18 +35,18 @@ let EditionContainer = React.createClass({ }, render() { - if('title' in this.state.edition) { return ( - + + ); } else { return (

Loading

); } - - } }); diff --git a/js/components/header.js b/js/components/header.js index b7a412e0..1c0116db 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -26,6 +26,10 @@ let Header = React.createClass({ UserActions.fetchCurrentUser(); }, + componentDidUnmount() { + UserStore.unlisten(this.onChange); + }, + onChange(state) { this.setState(state); }, diff --git a/js/components/piece_list.js b/js/components/piece_list.js index e6735a27..9d6ad26e 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -26,7 +26,7 @@ let PieceList = React.createClass({ PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc); }, - componentWillUnmount() { + componentDidUnmount() { PieceListStore.unlisten(this.onChange); }, From c19a05ca50f7661409e97f15bbd80a5acb9bd441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Jun 2015 13:17:59 +0200 Subject: [PATCH 6/6] fix setState bug by renaming componentDidUnmount to componentWillUnmount --- .../accordion_list_item_table_editions.js | 2 +- .../ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js | 2 +- js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js | 2 +- js/components/edition_container.js | 2 +- js/components/header.js | 2 +- js/components/piece_list.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 70391e2d..f40587cb 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -42,7 +42,7 @@ let AccordionListItemTableEditions = React.createClass({ EditionListStore.listen(this.onChange); }, - componentDidUnmount() { + componentWillUnmount() { EditionListStore.unlisten(this.onChange); }, diff --git a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js index 75695058..280af762 100644 --- a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js +++ b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js @@ -31,7 +31,7 @@ let PieceListBulkModal = React.createClass({ UserStore.listen(this.onChange); }, - componentDidUnmount() { + componentWillUnmount() { EditionListStore.unlisten(this.onChange); UserStore.unlisten(this.onChange); }, diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index ce9150b1..84681b55 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -22,7 +22,7 @@ let PieceListToolbar = React.createClass({ PieceListStore.listen(this.onChange); }, - componentDidUnmount() { + componentWillUnmount() { PieceListStore.unlisten(this.onChange); }, diff --git a/js/components/edition_container.js b/js/components/edition_container.js index 7b8b6151..8a2a8487 100644 --- a/js/components/edition_container.js +++ b/js/components/edition_container.js @@ -29,7 +29,7 @@ let EditionContainer = React.createClass({ UserActions.fetchCurrentUser(); EditionActions.fetchOne(this.props.params.editionId); }, - componentDidUnmount() { + componentWillUnmount() { EditionStore.unlisten(this.onChange); UserStore.unlisten(this.onChange); }, diff --git a/js/components/header.js b/js/components/header.js index 1c0116db..a53b628e 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -26,7 +26,7 @@ let Header = React.createClass({ UserActions.fetchCurrentUser(); }, - componentDidUnmount() { + componentWillUnmount() { UserStore.unlisten(this.onChange); }, diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 9d6ad26e..e6735a27 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -26,7 +26,7 @@ let PieceList = React.createClass({ PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc); }, - componentDidUnmount() { + componentWillUnmount() { PieceListStore.unlisten(this.onChange); },