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 (
<div className="container ascribe-default-app">
<Header routes={routes} />
<Header
currentUser={currentUser}
routes={routes}
whitelabel={whitelabel} />
<AppRouteWrapper
currentUser={currentUser}
whitelabel={whitelabel}>

View File

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

View File

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

View File

@ -53,8 +53,7 @@ let PrizeApp = React.createClass({
},
render() {
const { history, routes, children } = this.props;
const { currentUser, whitelabel } = this.state;
const { children, currentUser, history, routes, whitelabel } = this.props;
const subdomain = getSubdomain();
// 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;
// if the path of the current activeRoute is not defined, then this is the IndexRoute
if (!path || history.isActive('/login') || history.isActive('/signup')) {
header = <Hero />;
header = (<Hero />);
} else {
header = <Header routes={routes}/>;
header = (
<Header
currentUser={currentUser}
routes={routes}
whitelabel={whitelabel} />
);
}
return (

View File

@ -52,8 +52,7 @@ let WalletApp = React.createClass({
},
render() {
const { history, routes, children } = this.props;
const { currentUser, whitelabel } = this.state;
const { children, currentUser, history, routes, whitelabel } = this.props;
const subdomain = getSubdomain();
// 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) {
header = (<div className="hero"/>);
} 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,