From 17fd470e6bb147afecf3eb59c145dfa34f5e41ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 1 Oct 2015 14:00:56 +0200
Subject: [PATCH] Upgrade react-router-bootstrap

---
 js/components/ascribe_app.js                  |  9 ++-
 js/components/header.js                       | 60 +++++++++++++------
 js/components/nav_routes_links.js             | 14 ++---
 js/components/nav_routes_links_link.js        | 23 ++++---
 .../prize/components/prize_landing.js         | 28 +++++----
 .../prize/components/prize_piece_list.js      | 13 ++--
 .../ascribe_buttons/cyland_submit_button.js   | 18 +++---
 .../components/cyland/cyland_landing.js       | 21 ++++---
 .../ascribe_buttons/ikonotv_submit_button.js  | 19 +++---
 .../components/ikonotv/ikonotv_landing.js     | 19 +++---
 js/routes.js                                  |  7 +--
 package.json                                  |  2 +-
 12 files changed, 147 insertions(+), 86 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 394401be..90e89a04 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -5,23 +5,22 @@ import Header from '../components/header';
 import Footer from '../components/footer';
 import GlobalNotification from './global_notification';
 
-import getRoutes from '../routes';
-
 
 let AscribeApp = React.createClass({
     propTypes: {
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
     render() {
-        let { children } = this.props;
+        let { children, routes } = this.props;
 
         return (
             <div className="container ascribe-default-app">
-                <Header routes={getRoutes()} />
+                <Header routes={routes} />
                 {/* Routes are injected here */}
                 {children}
                 <Footer />
diff --git a/js/components/header.js b/js/components/header.js
index 86688d74..979eea67 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -7,8 +7,9 @@ import Navbar from 'react-bootstrap/lib/Navbar';
 import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
-import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
-import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
+import NavItem from 'react-bootstrap/lib/NavItem';
+
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import AclProxy from './acl_proxy';
 
@@ -32,7 +33,7 @@ import { getLangText } from '../utils/lang_utils';
 let Header = React.createClass({
     propTypes: {
         showAddWork: React.PropTypes.bool,
-        routes: React.PropTypes.element
+        routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
     getDefaultProps() {
@@ -131,38 +132,61 @@ let Header = React.createClass({
                     ref='dropdownbutton'
                     eventKey="1"
                     title={this.state.currentUser.username}>
-                    <MenuItemLink
-                        eventKey="2"
-                        to="settings"
+                    <LinkContainer
+                        to="/settings"
                         onClick={this.onMenuItemClick}>
-                        {getLangText('Account Settings')}
-                    </MenuItemLink>
+                        <MenuItem
+                            eventKey="2">
+                            {getLangText('Account Settings')}
+                        </MenuItem>
+                    </LinkContainer>
                     <AclProxy
                         aclObject={this.state.currentUser.acl}
                         aclName="acl_view_settings_contract">
-                        <MenuItemLink
-                            to="contract_settings"
+                        <LinkContainer
+                            to="/contract_settings"
                             onClick={this.onMenuItemClick}>
-                            {getLangText('Contract Settings')}
-                        </MenuItemLink>
+                            <MenuItem
+                                eventKey="2">
+                                {getLangText('Contract Settings')}
+                            </MenuItem>
+                        </LinkContainer>
                     </AclProxy>
                     <MenuItem divider />
-                    <MenuItemLink eventKey="3" to="logout">{getLangText('Log out')}</MenuItemLink>
+                    <LinkContainer
+                        to="/logout">
+                        <MenuItem
+                            eventKey="3">
+                            {getLangText('Log out')}
+                        </MenuItem>
+                    </LinkContainer>
                 </DropdownButton>
             );
             navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
         }
         else {
-            account = <NavItemLink to="login">{getLangText('LOGIN')}</NavItemLink>;
-            signup = <NavItemLink to="signup">{getLangText('SIGNUP')}</NavItemLink>;
+            account = (
+                <LinkContainer
+                    to="/login">
+                    <NavItem>
+                        {getLangText('LOGIN')}
+                    </NavItem>
+                </LinkContainer>
+            );
+            signup = (
+                <LinkContainer
+                    to="/signup">
+                    <NavItem>
+                        {getLangText('SIGNUP')}
+                    </NavItem>
+                </LinkContainer>
+            );
         }
 
         return (
             <div>
                 <Navbar
-                    brand={
-                        this.getLogo()
-                    }
+                    brand={this.getLogo()}
                     toggleNavKey={0}
                     fixedTop={true}>
                     <CollapsibleNav eventKey={0}>
diff --git a/js/components/nav_routes_links.js b/js/components/nav_routes_links.js
index d3342cb8..f5142f04 100644
--- a/js/components/nav_routes_links.js
+++ b/js/components/nav_routes_links.js
@@ -13,7 +13,7 @@ import { sanitizeList } from '../utils/general_utils';
 
 let NavRoutesLinks = React.createClass({
     propTypes: {
-        routes: React.PropTypes.element,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object),
         userAcl: React.PropTypes.object
     },
 
@@ -33,15 +33,15 @@ let NavRoutesLinks = React.createClass({
             return;
         }
 
-        let links = node.props.children.map((child, j) => {
+        let links = node.childRoutes.map((child, j) => {
             let childrenFn = null;
-            let { aclName, headerTitle, name, children } = child.props;
+            let { aclName, headerTitle, path, childRoutes } = child;
 
             // If the node has children that could be rendered, then we want
             // to execute this function again with the child as the root
             //
             // Otherwise we'll just pass childrenFn as false
-            if(child.props.children && child.props.children.length > 0) {
+            if(child.childRoutes && child.childRoutes.length > 0) {
                 childrenFn = this.extractLinksFromRoutes(child, userAcl, i++);
             }
 
@@ -58,7 +58,7 @@ let NavRoutesLinks = React.createClass({
                             aclObject={this.props.userAcl}>
                             <NavRoutesLinksLink
                                 headerTitle={headerTitle}
-                                routeName={name}
+                                routePath={path}
                                 depth={i}
                                 children={childrenFn}/>
                         </AclProxy>
@@ -68,7 +68,7 @@ let NavRoutesLinks = React.createClass({
                         <NavRoutesLinksLink
                             key={j}
                             headerTitle={headerTitle}
-                            routeName={name}
+                            routePath={path}
                             depth={i}
                             children={childrenFn}/>
                     );
@@ -88,7 +88,7 @@ let NavRoutesLinks = React.createClass({
 
         return (
             <Nav {...this.props}>
-                {this.extractLinksFromRoutes(routes, userAcl, 0)}
+                {this.extractLinksFromRoutes(routes[0], userAcl, 0)}
             </Nav>
         );
     }
diff --git a/js/components/nav_routes_links_link.js b/js/components/nav_routes_links_link.js
index 15aff405..11235ccd 100644
--- a/js/components/nav_routes_links_link.js
+++ b/js/components/nav_routes_links_link.js
@@ -3,13 +3,16 @@
 import React from 'react';
 
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
-import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
-import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import NavItem from 'react-bootstrap/lib/NavItem';
+
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
 
 let NavRoutesLinksLink = React.createClass({
     propTypes: {
         headerTitle: React.PropTypes.string,
-        routeName: React.PropTypes.string,
+        routePath: React.PropTypes.string,
 
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
@@ -20,10 +23,10 @@ let NavRoutesLinksLink = React.createClass({
     },
 
     render() {
-        let { children, headerTitle, depth, routeName } = this.props;
+        let { children, headerTitle, depth, routePath } = this.props;
 
         // if the route has children, we're returning a DropdownButton that will get filled
-        // with MenuItemLinks
+        // with MenuItems
         if(children) {
             return (
                 <DropdownButton title={headerTitle}>
@@ -33,13 +36,17 @@ let NavRoutesLinksLink = React.createClass({
         } else {
             if(depth === 1) {
                 // if the node's child is actually a node of level one (a child of a node), we're
-                // returning a DropdownButton matching MenuItemLink
+                // returning a DropdownButton matching MenuItem
                 return (
-                    <MenuItemLink to={routeName}>{headerTitle}</MenuItemLink>
+                    <LinkContainer to={routePath}>
+                        <MenuItem>{headerTitle}</MenuItem>
+                    </LinkContainer>
                 );
             } else if(depth === 0) {
                 return (
-                    <NavItemLink to={routeName}>{headerTitle}</NavItemLink>
+                    <LinkContainer to={routePath}>
+                        <NavItem>{headerTitle}</NavItem>
+                    </LinkContainer>
                 );
             } else {
                 return null;
diff --git a/js/components/whitelabel/prize/components/prize_landing.js b/js/components/whitelabel/prize/components/prize_landing.js
index 580f9673..2004e1b3 100644
--- a/js/components/whitelabel/prize/components/prize_landing.js
+++ b/js/components/whitelabel/prize/components/prize_landing.js
@@ -6,9 +6,11 @@ import { History } from 'react-router';
 import PrizeActions from '../actions/prize_actions';
 import PrizeStore from '../stores/prize_store';
 
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
+import Button from 'react-bootstrap/lib/Button';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
 import UserStore from '../../../../stores/user_store';
 import UserActions from '../../../../actions/user_actions';
 
@@ -52,16 +54,20 @@ let Landing = React.createClass({
         if (this.state.prize && this.state.prize.active){
             return (
                 <ButtonGroup className="enter" bsSize="large" vertical>
-                    <ButtonLink to="signup">
-                        {getLangText('Sign up to submit')}
-                    </ButtonLink>
+                    <LinkContainer to="/signup">
+                        <Button>
+                            {getLangText('Sign up to submit')}
+                        </Button>
+                    </LinkContainer>
 
                     <p>
                         {getLangText('or, already an ascribe user?')}
                     </p>
-                    <ButtonLink to="login">
-                        {getLangText('Log in to submit')}
-                    </ButtonLink>
+                    <LinkContainer to="/login">
+                        <Button>
+                            {getLangText('Log in to submit')}
+                        </Button>
+                    </LinkContainer>
                 </ButtonGroup>
             );
         }
@@ -74,9 +80,11 @@ let Landing = React.createClass({
                 <p>
                     {getLangText('or, already an ascribe user?')}
                 </p>
-                <ButtonLink to="login">
-                    {getLangText('Log in')}
-                </ButtonLink>
+                <LinkContainer to="/login">
+                    <Button>
+                        {getLangText('Log in')}
+                    </Button>
+                </LinkContainer>
             </ButtonGroup>
         );
     },
diff --git a/js/components/whitelabel/prize/components/prize_piece_list.js b/js/components/whitelabel/prize/components/prize_piece_list.js
index 008f35ba..99d7452a 100644
--- a/js/components/whitelabel/prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/components/prize_piece_list.js
@@ -9,7 +9,10 @@ import UserStore from '../../../../stores/user_store';
 import PrizeActions from '../actions/prize_actions';
 import PrizeStore from '../stores/prize_store';
 
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
+import Button from 'react-bootstrap/lib/Button';
+
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
 import AccordionListItemPrize from './ascribe_accordion_list/accordion_list_item_prize';
 
 import { mergeOptions } from '../../../../utils/general_utils';
@@ -46,9 +49,11 @@ let PrizePieceList = React.createClass({
     getButtonSubmit() {
         if (this.state.prize && this.state.prize.active && !this.state.currentUser.is_jury){
             return (
-                <ButtonLink to="register_piece">
-                    {getLangText('Submit to prize')}
-                </ButtonLink>
+                <LinkContainer to="/register_piece">
+                    <Button>
+                        {getLangText('Submit to prize')}
+                    </Button>
+                </LinkContainer>
             );
         }
         else if (this.state.prize && this.state.currentUser.is_judge){
diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js b/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js
index 72ff595b..03c976e9 100644
--- a/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js
+++ b/js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js
@@ -3,7 +3,9 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
+import Button from 'react-bootstrap/lib/Button';
+
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
 import WhitelabelStore from '../../../../../../stores/whitelabel_store';
@@ -49,16 +51,18 @@ let CylandSubmitButton = React.createClass({
         }
 
         return (
-            <ButtonLink
-                to="register_piece"
+            <LinkContainer
+                to="/register_piece"
                 query={{
                     'slide_num': 0,
                     'start_from': startFrom,
                     'piece_id': this.props.piece.id
-                }}
-                className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
-                {getLangText('Submit to Cyland')}
-            </ButtonLink>
+                }}>
+                <Button
+                    className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
+                    {getLangText('Submit to Cyland')}
+                </Button>
+            </LinkContainer>
         );
     }
 });
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 3e46477b..2b57a2f8 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -3,11 +3,12 @@
 import React from 'react';
 import { History } from 'react-router';
 
-
 import WhitelabelActions from '../../../../../actions/whitelabel_actions';
 import WhitelabelStore from '../../../../../stores/whitelabel_store';
 
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
+import Button from 'react-bootstrap/lib/Button';
+
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import UserStore from '../../../../../stores/user_store';
 import UserActions from '../../../../../actions/user_actions';
@@ -68,17 +69,21 @@ let CylandLanding = React.createClass({
                                 <p>
                                     {getLangText('Existing ascribe user?')}
                                 </p>
-                                <ButtonLink to="login">
-                                    {getLangText('Log in')}
-                                </ButtonLink>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
                             </div>
                             <div className="col-sm-6">
                                 <p>
                                     {getLangText('Do you need an account?')}
                                 </p>
-                                <ButtonLink to="signup">
-                                    {getLangText('Sign up')}
-                                </ButtonLink>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
                             </div>
                         </div>
                     </div>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_buttons/ikonotv_submit_button.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_buttons/ikonotv_submit_button.js
index 523f9fe2..7fb70211 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_buttons/ikonotv_submit_button.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ascribe_buttons/ikonotv_submit_button.js
@@ -2,7 +2,10 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
+
+import Button from 'react-bootstrap/lib/Button';
+
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 
@@ -33,16 +36,18 @@ let IkonotvSubmitButton = React.createClass({
         }
 
         return (
-            <ButtonLink
-                to="register_piece"
+            <LinkContainer
+                to="/register_piece"
                 query={{
                     'slide_num': 0,
                     'start_from': startFrom,
                     'piece_id': piece.id
-                }}
-                className={classNames('ascribe-margin-1px', this.props.className)}>
-                {getLangText('Loan to IkonoTV')}
-            </ButtonLink>
+                }}>
+                <Button
+                    className={classNames('ascribe-margin-1px', this.props.className)}>
+                    {getLangText('Loan to IkonoTV')}
+                </Button>
+            </LinkContainer>
         );
     }
 });
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
index 0f746deb..60c82fab 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
@@ -2,7 +2,9 @@
 
 import React from 'react';
 
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
+import Button from 'react-bootstrap/lib/Button';
+
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import UserStore from '../../../../../stores/user_store';
 import UserActions from '../../../../../actions/user_actions';
@@ -33,18 +35,21 @@ let IkonotvLanding = React.createClass({
     },
 
     getEnterButton() {
-        let redirect = 'login';
+        let redirect = '/login';
 
         if(this.state.currentUser && this.state.currentUser.email) {
-            redirect = 'pieces';
+            redirect = '/pieces';
         }
         else if (this.props.location.query && this.props.location.query.redirect) {
-            redirect = this.props.location.query.redirect;
+            redirect = '/' + this.props.location.query.redirect;
         }
+
         return (
-            <ButtonLink to={redirect} query={this.props.location.query}>
-                {getLangText('ENTER TO START')}
-            </ButtonLink>
+            <LinkContainer to={redirect} query={this.props.location.query}>
+                <Button>
+                    {getLangText('ENTER TO START')}
+                </Button>
+            </LinkContainer>
         );
     },
 
diff --git a/js/routes.js b/js/routes.js
index 4a19fbce..00082474 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import { Route, Redirect } from 'react-router';
+import { Route, IndexRoute } from 'react-router';
 
 import getPrizeRoutes from './components/whitelabel/prize/prize_routes';
 import getWalletRoutes from './components/whitelabel/wallet/wallet_routes';
@@ -32,13 +32,12 @@ let baseUrl = AppConstants.baseUrl;
 
 const COMMON_ROUTES = (
     <Route path={baseUrl} component={App}>
-        <Redirect from={baseUrl} to="/login" />
-        <Redirect from={baseUrl + '/'} to="/login" />
+        <IndexRoute component={PieceList} headerTitle="COLLECTION" />
+        <Route path="collection" component={PieceList} headerTitle="COLLECTION" />
         <Route path="signup" component={SignupContainer} />
         <Route path="login" component={LoginContainer} />
         <Route path="logout" component={LogoutContainer} />
         <Route path="register_piece" component={RegisterPiece} headerTitle="+ NEW WORK" />
-        <Route path="collection" component={PieceList} headerTitle="COLLECTION" />
         <Route path="pieces/:pieceId" component={PieceContainer} />
         <Route path="editions/:editionId" component={EditionContainer} />
         <Route path="password_reset" component={PasswordResetContainer} />
diff --git a/package.json b/package.json
index a316a495..8a3c8f4a 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "react-bootstrap": "^0.25.1",
     "react-datepicker": "^0.12.0",
     "react-router": "^1.0.0-rc1",
-    "react-router-bootstrap": "~0.16.0",
+    "react-router-bootstrap": "^0.19.0",
     "react-star-rating": "~1.3.2",
     "react-textarea-autosize": "^2.5.2",
     "reactify": "^1.1.0",