From fcaa85a0ed1f6889952ed079e4534c828d4690ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 25 Jan 2016 17:53:28 +0100 Subject: [PATCH] Replace usage of History mixin with contextTypes --- .../ascribe_detail/edition_action_panel.js | 7 +++--- .../ascribe_detail/edition_container.js | 3 +-- .../ascribe_detail/piece_container.js | 9 +++++--- js/components/ascribe_forms/form_login.js | 4 ---- .../form_send_contract_agreement.js | 7 +++--- js/components/ascribe_forms/form_signup.js | 3 --- js/components/ascribe_routes/proxy_handler.js | 23 ++++++++++++++----- .../slides_container.js | 17 ++++++++++---- js/components/logout_container.js | 12 ---------- js/components/password_reset_container.js | 7 +++--- js/components/piece_list.js | 17 +++++++------- js/components/register_piece.js | 7 +++--- .../cyland_detail/cyland_piece_container.js | 7 +++--- .../components/cyland/cyland_landing.js | 7 +----- .../cyland/cyland_register_piece.js | 7 +++--- .../ikonotv/ikonotv_contract_notifications.js | 9 ++++---- .../ikonotv_detail/ikonotv_piece_container.js | 7 +++--- .../ikonotv/ikonotv_register_piece.js | 9 ++++---- .../market/market_register_piece.js | 7 +++--- 19 files changed, 88 insertions(+), 81 deletions(-) diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js index 067a5d13..d50d89bd 100644 --- a/js/components/ascribe_detail/edition_action_panel.js +++ b/js/components/ascribe_detail/edition_action_panel.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; @@ -44,7 +43,9 @@ let EditionActionPanel = React.createClass({ handleSuccess: React.PropTypes.func }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getDefaultProps() { return { @@ -77,7 +78,7 @@ let EditionActionPanel = React.createClass({ const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.push('/collection'); + this.context.router.push('/collection'); }, refreshCollection() { diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js index 77ebed48..af938a2f 100644 --- a/js/components/ascribe_detail/edition_container.js +++ b/js/components/ascribe_detail/edition_container.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import ReactError from '../../mixins/react_error'; import { ResourceNotFoundError } from '../../models/errors'; @@ -34,7 +33,7 @@ let EditionContainer = React.createClass({ params: React.PropTypes.object }, - mixins: [History, ReactError], + mixins: [ReactError], getInitialState() { return EditionStore.getInitialState(); diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js index e9daee3c..a7611f03 100644 --- a/js/components/ascribe_detail/piece_container.js +++ b/js/components/ascribe_detail/piece_container.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import Moment from 'moment'; import ReactError from '../../mixins/react_error'; @@ -60,7 +59,11 @@ let PieceContainer = React.createClass({ params: React.PropTypes.object }, - mixins: [History, ReactError], + contextTypes: { + router: React.PropTypes.object.isRequired + }, + + mixins: [ReactError], getDefaultProps() { return { @@ -164,7 +167,7 @@ let PieceContainer = React.createClass({ const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.push('/collection'); + this.context.router.push('/collection'); }, getCreateEditionsDialog() { diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js index 2e04e450..1efab204 100644 --- a/js/components/ascribe_forms/form_login.js +++ b/js/components/ascribe_forms/form_login.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; @@ -12,7 +11,6 @@ import Form from './form'; import Property from './property'; import ApiUrls from '../../constants/api_urls'; -import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -26,8 +24,6 @@ let LoginForm = React.createClass({ whitelabelName: React.PropTypes.string }, - mixins: [History], - getDefaultProps() { return { headerMessage: getLangText('Enter') + ' ascribe', diff --git a/js/components/ascribe_forms/form_send_contract_agreement.js b/js/components/ascribe_forms/form_send_contract_agreement.js index 2fa66b71..bb6895f5 100644 --- a/js/components/ascribe_forms/form_send_contract_agreement.js +++ b/js/components/ascribe_forms/form_send_contract_agreement.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import ContractListActions from '../../actions/contract_list_actions'; import ContractListStore from '../../stores/contract_list_store'; @@ -25,7 +24,9 @@ let SendContractAgreementForm = React.createClass({ handleSuccess: React.PropTypes.func }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object + }, getInitialState() { return mergeOptions( @@ -57,7 +58,7 @@ let SendContractAgreementForm = React.createClass({ const notification = new GlobalNotificationModel(getLangText('Contract agreement sent'), 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.push('/collection'); + this.context.router.push('/collection'); }, getFormData() { diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js index b52eaf6c..3f62ea04 100644 --- a/js/components/ascribe_forms/form_signup.js +++ b/js/components/ascribe_forms/form_signup.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; @@ -32,8 +31,6 @@ let SignupForm = React.createClass({ whitelabelName: React.PropTypes.string }, - mixins: [History], - getDefaultProps() { return { headerMessage: getLangText('Welcome to ascribe'), diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js index cfe64447..70bb53ee 100644 --- a/js/components/ascribe_routes/proxy_handler.js +++ b/js/components/ascribe_routes/proxy_handler.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { RouteContext } from 'react-router'; import history from '../../history'; import UserStore from '../../stores/user_store'; @@ -46,7 +45,7 @@ export function AuthRedirect({ to, when }) { // wants to redirect the user to a specific route when the user is logged out already } else if (!exprToValidate && when === 'loggedIn' && redirect) { delete query.redirect; - window.setTimeout(() => history.replace({ query, pathname: '/' + redirect })); + window.setTimeout(() => history.replace({ query, pathname: `/${redirect}` })); return true; } else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) { @@ -86,12 +85,24 @@ export function ProxyHandler(...redirectFunctions) { whitelabel: React.PropTypes.object, // Provided from router - location: object + location: object, + route: object }, - // We need insert `RouteContext` here in order to be able - // to use the `Lifecycle` widget in further down nested components - mixins: [RouteContext], + contextTypes: { + router: object + }, + + childContextTypes: { + route: object, + router: object + }, + + getChildContext() { + return { + route: this.props.route + }; + }, componentDidMount() { this.evaluateRedirectFunctions(); diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js index ccaef9cb..18ccd44b 100644 --- a/js/components/ascribe_slides_container/slides_container.js +++ b/js/components/ascribe_slides_container/slides_container.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History, Lifecycle } from 'react-router'; import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs'; @@ -21,7 +20,10 @@ const SlidesContainer = React.createClass({ pageExitWarning: string }, - mixins: [History, Lifecycle], + contextTypes: { + route: object.isRequired, + router: object.isRequired + }, getInitialState() { return { @@ -37,6 +39,11 @@ const SlidesContainer = React.createClass({ // Initially, we need to dispatch 'resize' once to render correctly window.dispatchEvent(new Event('resize')); + + // Since react-router 2.0.0, we need to define the `routerWillLeave` + // method ourselves. + const { router, route } = this.context; + router.setRouteLeaveHook(route, this.routerWillLeave); }, componentWillUnmount() { @@ -61,10 +68,10 @@ const SlidesContainer = React.createClass({ }, setSlideNum(nextSlideNum, additionalQueryParams = {}) { - const { location: { pathname } } = this.props; - const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum }); + const { location: { pathname, query } } = this.props; + const slideQuery = Object.assign({}, query, additionalQueryParams, { slide_num: nextSlideNum }); - this.history.push({ pathname, query }); + this.context.router.push({ pathname, query: slideQuery }); }, // breadcrumbs are defined as attributes of the slides. diff --git a/js/components/logout_container.js b/js/components/logout_container.js index 5b0e9e54..2b714557 100644 --- a/js/components/logout_container.js +++ b/js/components/logout_container.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import AscribeSpinner from './ascribe_spinner'; @@ -12,17 +11,6 @@ import { setDocumentTitle } from '../utils/dom_utils'; let LogoutContainer = React.createClass({ - propTypes: { - // Provided from AscribeApp - currentUser: React.PropTypes.object, - whitelabel: React.PropTypes.object, - - // Provided from router - location: React.PropTypes.object - }, - - mixins: [History], - componentDidMount() { UserActions.logoutCurrentUser(); }, diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js index cc8be9af..87d68249 100644 --- a/js/components/password_reset_container.js +++ b/js/components/password_reset_container.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import Form from './ascribe_forms/form'; import Property from './ascribe_forms/property'; @@ -114,7 +113,9 @@ let PasswordResetForm = React.createClass({ token: React.PropTypes.string }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getFormData() { return { @@ -124,7 +125,7 @@ let PasswordResetForm = React.createClass({ }, handleSuccess() { - this.history.push('/collection'); + this.context.router.push('/collection'); const notification = new GlobalNotificationModel(getLangText('Password successfully updated'), 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 62cd6201..7a82c61f 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import PieceListStore from '../stores/piece_list_store'; import PieceListActions from '../actions/piece_list_actions'; @@ -55,7 +54,9 @@ let PieceList = React.createClass({ location: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getDefaultProps() { return { @@ -135,12 +136,12 @@ let PieceList = React.createClass({ if (redirectTo && redirectTo.pathname && (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) { // FIXME: hack to redirect out of the dispatch cycle - window.setTimeout(() => this.history.push({ + window.setTimeout(() => this.context.router.push({ // Occasionally, the back end also sets query parameters for Onion. // We need to consider this by merging all passed query parameters, as we'll // otherwise end up in a 404 screen - query: Object.assign({}, query, redirectTo.query), - pathname: redirectTo.pathname + pathname: redirectTo.pathname, + query: Object.assign({}, query, redirectTo.query) }), 0); } }, @@ -198,11 +199,11 @@ let PieceList = React.createClass({ const { location: { pathname } } = this.props; this.loadPieceList({ search, page: 1 }); - this.history.push({ pathname, query: { page: 1 } }); + this.context.router.push({ pathname, query: { page: 1 } }); }, applyFilterBy(filterBy) { - const { location: { pathname } } = this.props; + const { pathname } = this.props.location; this.setState({ isFilterDirty: true @@ -228,7 +229,7 @@ let PieceList = React.createClass({ // we have to redirect the user always to page one as it could be that there is no page two // for filtered pieces - this.history.push({ pathname, query: { page: 1 } }); + this.context.router.push({ pathname, query: { page: 1 } }); }, applyOrderBy(orderBy) { diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 04568bb0..d3f75e36 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import Col from 'react-bootstrap/lib/Col'; import Row from 'react-bootstrap/lib/Row'; @@ -37,7 +36,9 @@ let RegisterPiece = React.createClass( { location: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getInitialState(){ return PieceListStore.getState(); @@ -65,7 +66,7 @@ let RegisterPiece = React.createClass( { // the piece list up to date PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }); - this.history.push(`/pieces/${response.piece.id}`); + this.context.router.push(`/pieces/${response.piece.id}`); }, getSpecifyEditions() { diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js index bd7f2cec..eace7322 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import EditionListActions from '../../../../../../actions/edition_list_actions'; @@ -40,7 +39,9 @@ let CylandPieceContainer = React.createClass({ params: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object + }, getInitialState() { return mergeOptions( @@ -90,7 +91,7 @@ let CylandPieceContainer = React.createClass({ const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.push('/collection'); + this.context.router.push('/collection'); }, render() { diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js index ca064544..d61837b7 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js @@ -6,7 +6,6 @@ import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; -import AscribeSpinner from '../../../../ascribe_spinner'; import { getLangText } from '../../../../../utils/lang_utils'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; @@ -15,11 +14,7 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils'; let CylandLanding = React.createClass({ propTypes: { // Provided from WalletApp - currentUser: React.PropTypes.object, - whitelabel: React.PropTypes.object.isRequired, - - // Provided from router - location: React.PropTypes.object + whitelabel: React.PropTypes.object.isRequired }, render() { diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js index 67d15fb6..56d068e8 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import Moment from 'moment'; @@ -44,7 +43,9 @@ let CylandRegisterPiece = React.createClass({ location: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getInitialState(){ return mergeOptions( @@ -110,7 +111,7 @@ let CylandRegisterPiece = React.createClass({ this.refreshPieceList(); - this.history.push(`/pieces/${this.state.piece.id}`); + this.context.router.push(`/pieces/${this.state.piece.id}`); }, nextSlide(queryParams) { diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js index 388cf283..db98eb94 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Button from 'react-bootstrap/lib/Button'; @@ -33,7 +32,9 @@ let IkonotvContractNotifications = React.createClass({ location: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getInitialState() { return NotificationStore.getState(); @@ -115,7 +116,7 @@ let IkonotvContractNotifications = React.createClass({ NotificationActions.flushContractAgreementListNotifications(); NotificationActions.fetchContractAgreementListNotifications(); - this.history.push('/collection'); + this.context.router.push('/collection'); }, handleDeny() { @@ -129,7 +130,7 @@ let IkonotvContractNotifications = React.createClass({ const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.push('/collection'); + this.context.router.push('/collection'); }, getCopyrightAssociationForm(){ diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js index a1f7bab4..15c28260 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import EditionListActions from '../../../../../../actions/edition_list_actions'; @@ -41,7 +40,9 @@ let IkonotvPieceContainer = React.createClass({ params: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getInitialState() { return mergeOptions( @@ -91,7 +92,7 @@ let IkonotvPieceContainer = React.createClass({ const notification = new GlobalNotificationModel(response.notification, 'success'); GlobalNotificationActions.appendGlobalNotification(notification); - this.history.push('/collection'); + this.context.router.push('/collection'); }, render() { diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js index e7864f7b..5c8e8b37 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js @@ -2,7 +2,6 @@ import React from 'react'; import Moment from 'moment'; -import { History } from 'react-router'; import Col from 'react-bootstrap/lib/Col'; import Row from 'react-bootstrap/lib/Row'; @@ -42,7 +41,9 @@ let IkonotvRegisterPiece = React.createClass({ location: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getInitialState() { return mergeOptions( @@ -92,7 +93,7 @@ let IkonotvRegisterPiece = React.createClass({ } if (!this.canSubmit()) { - this.history.push('/collection'); + this.context.router.push('/collection'); } else { this.nextSlide({ piece_id: response.piece.id }); } @@ -117,7 +118,7 @@ let IkonotvRegisterPiece = React.createClass({ this.refreshPieceList(); - this.history.push(`/pieces/${this.state.piece.id}`); + this.context.router.push(`/pieces/${this.state.piece.id}`); }, nextSlide(queryParams) { diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js index b3d467f4..cfb22b19 100644 --- a/js/components/whitelabel/wallet/components/market/market_register_piece.js +++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js @@ -1,7 +1,6 @@ 'use strict'; import React from 'react'; -import { History } from 'react-router'; import Col from 'react-bootstrap/lib/Col'; import Row from 'react-bootstrap/lib/Row'; @@ -33,7 +32,9 @@ let MarketRegisterPiece = React.createClass({ location: React.PropTypes.object }, - mixins: [History], + contextTypes: { + router: React.PropTypes.object.isRequired + }, getInitialState(){ return mergeOptions( @@ -82,7 +83,7 @@ let MarketRegisterPiece = React.createClass({ handleAdditionalDataSuccess() { this.refreshPieceList(); - this.history.push('/collection'); + this.context.router.push('/collection'); }, nextSlide(queryParams) {