Refactor of wallet app routing

js/app.js

@@ -48,6 +48,7 @@ requests.defaults({
     }
 });
 
+export let history = createBrowserHistory();
 
 class AppGateway {
     start() {
@@ -70,25 +71,28 @@ class AppGateway {
     load(settings) {
         let type = 'default';
         let subdomain = 'www';
+        let redirectRoute = (<Redirect from="/" to="/collection" />);
 
         if (settings) {
             type = settings.type;
             subdomain = settings.subdomain;
         }
 
+        if(subdomain !== 'www') {
+            redirectRoute = null;
+        }
+
         // Adds a client specific class to the body for whitelabel styling
         window.document.body.classList.add('client--' + subdomain);
 
         // Send the applicationWillBoot event to the third-party stores
         EventActions.applicationWillBoot(settings);
 
-        let history = createBrowserHistory();
-
         history.listen(EventActions.routeDidChange);
 
         React.render((
             <Router history={history}>
-                <Redirect from="/" to="/collection" />
+                {redirectRoute}
                 {getRoutes(type, subdomain)}
             </Router>
         ), document.getElementById('main'));

js/components/ascribe_forms/form_contract_agreement.js

@@ -139,7 +139,7 @@ let ContractAgreementForm = React.createClass({
             <div>
                 <p className="text-center">
                     {getLangText('No contracts uploaded yet, please go to the ')}
-                    <a href="settings">{getLangText('settings page')}</a>
+                    <a href="contract_settings">{getLangText('contract settings page')}</a>
                     {getLangText(' and create them.')}
                 </p>
             </div>

js/components/ascribe_settings/contract_settings.js

@@ -151,7 +151,8 @@ let ContractSettings = React.createClass({
                             fileClassToUpload={{
                                 singular: getLangText('new contract'),
                                 plural: getLangText('new contracts')
-                            }}/>
+                            }}
+                            location={this.props.location}/>
                             {privateContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel

js/components/whitelabel/wallet/components/ikonotv/ikonotv_request_loan.js

@@ -1,16 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import ContractAgreementForm from '../../../../ascribe_forms/form_contract_agreement';
-
-
-let IkonotvRequestLoan = React.createClass({
-    render() {
-        return (
-            <ContractAgreementForm />
-        );
-    }
-});
-
-export default IkonotvRequestLoan;

js/components/whitelabel/wallet/wallet_app.js

@@ -24,20 +24,22 @@ let WalletApp = React.createClass({
     render() {
         let subdomain = getSubdomain();
 
-        // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
+        // The second element of routes is always the active component object, where we can
-        // we split the path by the first occurring slash and take the first splitter.
+        // extract the path.
-        let activeRoutes = this.props.routes.map(elem => 'route--' + elem.path.split('/')[0]);
+        let [, { path } ] = this.props.routes;
 
         let header = null;
-        if ((this.props.history.isActive('/login') || this.props.history.isActive('/signup') || this.props.history.isActive('/contract_notifications'))
+        if ((this.props.history.isActive('/') || this.props.history.isActive('/login') || this.props.history.isActive('/signup') || this.props.history.isActive('/contract_notifications'))
             && (['ikonotv', 'cyland']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
             header = <Header showAddWork={true} routes={this.props.routes} />;
         }
 
+        // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
+        // we split the path by the first occurring slash and take the first splitter.
         return (
-            <div className={classNames('ascribe-wallet-app', activeRoutes)}>
+            <div className={classNames('ascribe-wallet-app', 'route--' + (path ? path.split('/')[0] : 'landing'))}>
                 <div className='container'>
                     {header}
                     {this.props.children}

js/components/whitelabel/wallet/wallet_routes.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import { Route, Redirect } from 'react-router';
+import { Route, IndexRoute } from 'react-router';
 
 // general components
 import CoaVerifyContainer from '../../../components/coa_verify_container';
@@ -23,7 +23,7 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
 
 import IkonotvLanding from './components/ikonotv/ikonotv_landing';
 import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
-import IkonotvRequestLoan from './components/ikonotv/ikonotv_request_loan';
+import ContractAgreementForm from '../../../components/ascribe_forms/form_contract_agreement';
 import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
 import IkonotvPieceContainer from './components/ikonotv/ascribe_detail/ikonotv_piece_container';
 import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
@@ -39,7 +39,7 @@ let baseUrl = AppConstants.baseUrl;
 let ROUTES = {
     'cyland': (
         <Route path={baseUrl} component={WalletApp}>
-            <Route path={baseUrl} component={CylandLanding} />
+            <IndexRoute component={CylandLanding} />
             <Route path="login" component={LoginContainer} />
             <Route path="logout" component={LogoutContainer} />
             <Route path="signup" component={SignupContainer} />
@@ -71,12 +71,12 @@ let ROUTES = {
     ),
     'ikonotv': (
         <Route path={baseUrl} component={WalletApp}>
-            <Route path={baseUrl} component={IkonotvLanding} />
+            <IndexRoute component={IkonotvLanding} />
             <Route path="login" component={LoginContainer} />
             <Route path="logout" component={LogoutContainer} />
             <Route path="signup" component={SignupContainer} />
             <Route path="password_reset" component={PasswordResetContainer} />
-            <Route path="request_loan" component={IkonotvRequestLoan} headerTitle="SEND NEW CONTRACT" aclName="acl_create_contractagreement" />
+            <Route path="request_loan" component={ContractAgreementForm} headerTitle="SEND NEW CONTRACT" aclName="acl_create_contractagreement" />
             <Route path="register_piece" component={IkonotvRegisterPiece} headerTitle="+ NEW WORK" aclName="acl_create_piece"/>
             <Route path="collection" component={IkonotvPieceList} headerTitle="COLLECTION"/>
             <Route path="pieces/:pieceId" component={IkonotvPieceContainer} />

js/third_party/notifications.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import { history } from '../app';
 import alt from '../alt';
 import EventActions from '../actions/event_actions';
 
@@ -26,7 +27,7 @@ class NotificationsHandler {
                     if (res.notifications && res.notifications.length > 0) {
                         this.loaded = true;
                         console.log('Contractagreement notifications loaded');
-                        setTimeout(() => window.appRouter.transitionTo('contract_notifications'), 0);
+                        history.pushState(null, '/contract_notifications');
                     }
                 }
             );