Replace usage of History mixin with contextTypes

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() {

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();

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() {

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',

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() {

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'),

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
+            contextTypes: {
-            // to use the `Lifecycle` widget in further down nested components
+                router: object
-            mixins: [RouteContext],
+            },
+
+            childContextTypes: {
+                route: object,
+                router: object
+            },
+
+            getChildContext() {
+                return {
+                    route: this.props.route
+                };
+            },
 
             componentDidMount() {
                 this.evaluateRedirectFunctions();

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 { location: { pathname, query } } = this.props;
-        const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
+        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.

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();
     },

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);

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) {

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() {

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() {

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
-        whitelabel: React.PropTypes.object.isRequired,
-
-        // Provided from router
-        location: React.PropTypes.object
     },
 
     render() {

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) {

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(){

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() {

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) {

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) {