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

Change Header and parents for loading UserStore from top level app

This commit is contained in:
Brett Sun 2016-01-11 18:41:07 +01:00
parent 9059ca184a
commit d4064ee83a
5 changed files with 62 additions and 73 deletions

View File

@ -55,7 +55,10 @@ let AscribeApp = React.createClass({
return ( return (
<div className="container ascribe-default-app"> <div className="container ascribe-default-app">
<Header routes={routes} /> <Header
currentUser={currentUser}
routes={routes}
whitelabel={whitelabel} />
<AppRouteWrapper <AppRouteWrapper
currentUser={currentUser} currentUser={currentUser}
whitelabel={whitelabel}> whitelabel={whitelabel}>

View File

@ -14,47 +14,25 @@ import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import AclProxy from './acl_proxy';
import EventActions from '../actions/event_actions'; import EventActions from '../actions/event_actions';
import UserActions from '../actions/user_actions'; import AclProxy from './acl_proxy';
import UserStore from '../stores/user_store';
import WhitelabelActions from '../actions/whitelabel_actions';
import WhitelabelStore from '../stores/whitelabel_store';
import HeaderNotifications from './header_notification'; import HeaderNotifications from './header_notification';
import HeaderNotificationDebug from './header_notification_debug'; import HeaderNotificationDebug from './header_notification_debug';
import NavRoutesLinks from './nav_routes_links'; import NavRoutesLinks from './nav_routes_links';
import { mergeOptions } from '../utils/general_utils';
import { getLangText } from '../utils/lang_utils'; import { getLangText } from '../utils/lang_utils';
import { constructHead } from '../utils/dom_utils'; import { constructHead } from '../utils/dom_utils';
let Header = React.createClass({ let Header = React.createClass({
propTypes: { propTypes: {
routes: React.PropTypes.arrayOf(React.PropTypes.object) currentUser: React.PropTypes.object.isRequired,
}, routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
whitelabel: React.PropTypes.object.isRequired
getInitialState() {
return mergeOptions(
WhitelabelStore.getState(),
UserStore.getState()
);
}, },
componentDidMount() { componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser.defer();
WhitelabelStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel.defer();
// react-bootstrap 0.25.1 has a bug in which it doesn't // react-bootstrap 0.25.1 has a bug in which it doesn't
// close the mobile expanded navigation after a click by itself. // close the mobile expanded navigation after a click by itself.
// To get rid of this, we set the state of the component ourselves. // To get rid of this, we set the state of the component ourselves.
@ -62,13 +40,11 @@ let Header = React.createClass({
}, },
componentWillUnmount() { componentWillUnmount() {
UserStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange);
//history.unlisten(this.onRouteChange); //history.unlisten(this.onRouteChange);
}, },
getLogo() { getLogo() {
const { whitelabel } = this.state; const { whitelabel } = this.props;
if (whitelabel.head) { if (whitelabel.head) {
constructHead(whitelabel.head); constructHead(whitelabel.head);
@ -80,19 +56,19 @@ let Header = React.createClass({
<img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/> <img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/>
</Link> </Link>
); );
} } else {
return ( return (
<span> <span>
<Link className="icon-ascribe-logo" to="/collection"/> <Link className="icon-ascribe-logo" to="/collection"/>
</span> </span>
); );
}
}, },
getPoweredBy() { getPoweredBy() {
return ( return (
<AclProxy <AclProxy
aclObject={this.state.whitelabel} aclObject={this.props.whitelabel}
aclName="acl_view_powered_by"> aclName="acl_view_powered_by">
<li> <li>
<a className="pull-right ascribe-powered-by" href="https://www.ascribe.io/" target="_blank"> <a className="pull-right ascribe-powered-by" href="https://www.ascribe.io/" target="_blank">
@ -104,10 +80,6 @@ let Header = React.createClass({
); );
}, },
onChange(state) {
this.setState(state);
},
onMenuItemClick() { onMenuItemClick() {
/* /*
This is a hack to make the dropdown close after clicking on an item This is a hack to make the dropdown close after clicking on an item
@ -143,59 +115,61 @@ let Header = React.createClass({
}, },
render() { render() {
const { currentUser, routes } = this.props;
let account; let account;
let signup; let signup;
let navRoutesLinks; let navRoutesLinks;
if (this.state.currentUser.username){
if (currentUser.username) {
account = ( account = (
<DropdownButton <DropdownButton
ref='dropdownbutton' ref='dropdownbutton'
eventKey="1" eventKey="1"
title={this.state.currentUser.username}> title={currentUser.username}>
<LinkContainer <LinkContainer
to="/settings" to="/settings"
onClick={this.onMenuItemClick}> onClick={this.onMenuItemClick}>
<MenuItem <MenuItem eventKey="2">
eventKey="2">
{getLangText('Account Settings')} {getLangText('Account Settings')}
</MenuItem> </MenuItem>
</LinkContainer> </LinkContainer>
<AclProxy <AclProxy
aclObject={this.state.currentUser.acl} aclObject={currentUser.acl}
aclName="acl_view_settings_contract"> aclName="acl_view_settings_contract">
<LinkContainer <LinkContainer
to="/contract_settings" to="/contract_settings"
onClick={this.onMenuItemClick}> onClick={this.onMenuItemClick}>
<MenuItem <MenuItem eventKey="2">
eventKey="2">
{getLangText('Contract Settings')} {getLangText('Contract Settings')}
</MenuItem> </MenuItem>
</LinkContainer> </LinkContainer>
</AclProxy> </AclProxy>
<MenuItem divider /> <MenuItem divider />
<LinkContainer <LinkContainer to="/logout">
to="/logout"> <MenuItem eventKey="3">
<MenuItem
eventKey="3">
{getLangText('Log out')} {getLangText('Log out')}
</MenuItem> </MenuItem>
</LinkContainer> </LinkContainer>
</DropdownButton> </DropdownButton>
); );
navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
} navRoutesLinks = (
else { <NavRoutesLinks
routes={routes}
userAcl={currentUser.acl}
navbar
right />
);
} else {
account = ( account = (
<LinkContainer <LinkContainer to="/login">
to="/login">
<NavItem> <NavItem>
{getLangText('LOGIN')} {getLangText('LOGIN')}
</NavItem> </NavItem>
</LinkContainer> </LinkContainer>
); );
signup = ( signup = (
<LinkContainer <LinkContainer to="/signup">
to="/signup">
<NavItem> <NavItem>
{getLangText('SIGNUP')} {getLangText('SIGNUP')}
</NavItem> </NavItem>
@ -211,8 +185,7 @@ let Header = React.createClass({
toggleNavKey={0} toggleNavKey={0}
fixedTop={true} fixedTop={true}
className="hidden-print"> className="hidden-print">
<CollapsibleNav <CollapsibleNav eventKey={0}>
eventKey={0}>
<Nav navbar left> <Nav navbar left>
{this.getPoweredBy()} {this.getPoweredBy()}
</Nav> </Nav>

View File

@ -54,8 +54,7 @@ let PRApp = React.createClass({
}, },
render() { render() {
const { children, history, routes } = this.props; const { children, currentUser, history, routes, whitelabel } = this.props;
const { currentUser, whitelabel } = this.state;
const subdomain = getSubdomain(); const subdomain = getSubdomain();
// Add the current user and whitelabel settings to all child routes // Add the current user and whitelabel settings to all child routes
@ -69,10 +68,16 @@ let PRApp = React.createClass({
let style = {}; let style = {};
let header; let header;
if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) { if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
header = <Hero currentUser={currentUser} />; header = (<Hero currentUser={currentUser} />);
style = { paddingTop: '0 !important' }; style = { paddingTop: '0 !important' };
} else if(currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) { } else if(currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
header = <Header routes={routes} />; header = (
<Header
currentUser={currentUser}
routes={routes}
whitelabel={whitelabel}
/>
);
} else { } else {
style = { paddingTop: '0 !important' }; style = { paddingTop: '0 !important' };
} }

View File

@ -53,8 +53,7 @@ let PrizeApp = React.createClass({
}, },
render() { render() {
const { history, routes, children } = this.props; const { children, currentUser, history, routes, whitelabel } = this.props;
const { currentUser, whitelabel } = this.state;
const subdomain = getSubdomain(); const subdomain = getSubdomain();
// The second element of routes is always the active component object, where we can // The second element of routes is always the active component object, where we can
@ -64,9 +63,14 @@ let PrizeApp = React.createClass({
let header = null; let header = null;
// if the path of the current activeRoute is not defined, then this is the IndexRoute // if the path of the current activeRoute is not defined, then this is the IndexRoute
if (!path || history.isActive('/login') || history.isActive('/signup')) { if (!path || history.isActive('/login') || history.isActive('/signup')) {
header = <Hero />; header = (<Hero />);
} else { } else {
header = <Header routes={routes}/>; header = (
<Header
currentUser={currentUser}
routes={routes}
whitelabel={whitelabel} />
);
} }
return ( return (

View File

@ -52,8 +52,7 @@ let WalletApp = React.createClass({
}, },
render() { render() {
const { history, routes, children } = this.props; const { children, currentUser, history, routes, whitelabel } = this.props;
const { currentUser, whitelabel } = this.state;
const subdomain = getSubdomain(); const subdomain = getSubdomain();
// The second element of routes is always the active component object, where we can // The second element of routes is always the active component object, where we can
@ -66,7 +65,12 @@ let WalletApp = React.createClass({
&& (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) { && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
header = (<div className="hero"/>); header = (<div className="hero"/>);
} else { } else {
header = (<Header routes={routes} />); header = (
<Header
currentUser={currentUser}
routes={routes}
whitelabel={whitelabel} />
);
} }
// In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however, // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,