1
0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00

Create generic links in nav using routes

This commit is contained in:
Tim Daubenschütz 2015-08-25 16:33:26 +02:00
parent 5688bde3c7
commit cd49a9c402
8 changed files with 115 additions and 8 deletions

View File

@ -20,6 +20,7 @@ import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
import HeaderNotificationDebug from './header_notification_debug';
import NavRoutesLinks from './nav_routes_links';
import { mergeOptions } from '../utils/general_utils';
import { getLangText } from '../utils/lang_utils';
@ -27,7 +28,8 @@ import { getLangText } from '../utils/lang_utils';
let Header = React.createClass({
propTypes: {
showAddWork: React.PropTypes.bool
showAddWork: React.PropTypes.bool,
routes: React.PropTypes.element
},
mixins: [Router.State],
@ -129,6 +131,7 @@ let Header = React.createClass({
{account}
{signup}
</Nav>
<NavRoutesLinks routes={this.props.routes} navbar right/>
</CollapsibleNav>
</Navbar>
</div>

View File

@ -0,0 +1,65 @@
'use strict';
import React from 'react';
import Nav from 'react-bootstrap/lib/Nav';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
import { sanitizeList } from '../utils/general_utils';
let NavRoutesLinks = React.createClass({
propTypes: {
routes: React.PropTypes.element
},
extractLinksFromRoutes(node, i) {
node = node.props;
let links = node.children.map((child, j) => {
// check if this a candidate for a link generation
if(child.props.headerTitle && typeof child.props.headerTitle === 'string') {
// also check if it is a candidate for generating a dropdown menu
if(child.props.children && child.props.children.length > 0) {
return (
<DropdownButton title={child.props.headerTitle} key={j}>
{this.extractLinksFromRoutes(child, i++)}
</DropdownButton>
);
} else if(i === 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
return (
<MenuItemLink to={child.props.path} key={j}>{child.props.headerTitle}</MenuItemLink>
);
} else if(i === 0) {
return (
<NavItemLink to={child.props.path} key={j}>{child.props.headerTitle}</NavItemLink>
);
} else {
return null;
}
} else {
return null;
}
});
// remove all nulls from the list of generated links
return sanitizeList(links);
},
render() {
return (
<Nav {...this.props}>
{this.extractLinksFromRoutes(this.props.routes, 0)}
</Nav>
);
}
});
export default NavRoutesLinks;

View File

@ -55,14 +55,14 @@ let IkonotvRegisterPiece = React.createClass({
render() {
if (this.state.currentUser &&
/* if (this.state.currentUser &&
this.state.whitelabel &&
this.state.whitelabel.user &&
this.state.currentUser.email === this.state.whitelabel.user){
return (
<ContractForm />
);
}
} */
return (
<div className="ascribe-form-bordered ascribe-form-wrapper">
<RegisterPieceForm

View File

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

View File

@ -7,21 +7,26 @@ import Footer from '../../footer';
import GlobalNotification from '../../global_notification';
import getRoutes from './wallet_routes';
let RouteHandler = Router.RouteHandler;
let WalletApp = React.createClass({
mixins: [Router.State],
render() {
let header = null;
let subdomain = window.location.host.split('.')[0];
let ROUTES = getRoutes(null, subdomain);
let header = null;
if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup'))
&& (['ikonotv', 'cyland']).indexOf(subdomain) > -1) {
header = (
<div className="hero"/>);
} else {
header = <Header showAddWork={true} />;
header = <Header showAddWork={true} routes={ROUTES} />;
}
return (
<div className="container ascribe-prize-app">
{header}

View File

@ -21,6 +21,7 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
import IkonotvRequestLoan from './components/ikonotv/ikonotv_request_loan';
import CCRegisterPiece from './components/cc/cc_register_piece';
@ -69,6 +70,7 @@ let ROUTES = {
<Route name="logout" path="logout" handler={LogoutContainer} />
<Route name="signup" path="signup" handler={SignupContainer} />
<Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
<Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan} headerTitle="Send new contract" />
<Route name="register_piece" path="register_piece" handler={IkonotvRegisterPiece} />
<Route name="pieces" path="collection" handler={IkonotvPieceList} />
<Route name="piece" path="pieces/:pieceId" handler={CylandPieceContainer} />

View File

@ -26,6 +26,23 @@ export function sanitize(obj, filterFn) {
return obj;
}
/**
* Removes all falsy values (undefined, null, false, ...) from a list/array
* @param {array} l the array to sanitize
* @return {array} the sanitized array
*/
export function sanitizeList(l) {
let sanitizedList = [];
for(let i = 0; i < l.length; i++) {
if(l[i]) {
sanitizedList.push(l[i]);
}
}
return sanitizedList;
}
/**
* Sums up a list of numbers. Like a Epsilon-math-kinda-sum...
*/

View File

@ -100,10 +100,9 @@ hr {
}
.img-brand {
padding: 0;
height: 45px;
margin: 5px 0 5px 0;
height: 60px;
}
.truncate {
white-space: nowrap;
width: 4em;