ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Upgrade react-router-bootstrap

This commit is contained in:
Tim Daubenschütz 2015-10-01 14:00:56 +02:00
parent 957d0c66c9
commit 17fd470e6b
12 changed files with 147 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/components/ascribe_app.js
View File

@ -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 />

60
js/components/header.js
View File

@ -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}>

14
js/components/nav_routes_links.js
View File

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

23
js/components/nav_routes_links_link.js
View File

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

28
js/components/whitelabel/prize/components/prize_landing.js
View File

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

13
js/components/whitelabel/prize/components/prize_piece_list.js
View File

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

18
js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js
View File

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

21
js/components/whitelabel/wallet/components/cyland/cyland_landing.js
View File

@ -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>

19
js/components/whitelabel/wallet/components/ikonotv/ascribe_buttons/ikonotv_submit_button.js
View File

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

19
js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
View File

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

7
js/routes.js
View File

@ -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} />

2
package.json
View File

@ -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",