Change Header and parents for loading UserStore from top level app

js/components/ascribe_app.js

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

js/components/header.js

@@ -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 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 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)
+        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() {
-        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
+                        <MenuItem eventKey="2">
-                            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
+                            <MenuItem eventKey="2">
-                                eventKey="2">
                                 {getLangText('Contract Settings')}
                             </MenuItem>
                         </LinkContainer>
                     </AclProxy>
                     <MenuItem divider />
-                    <LinkContainer
+                    <LinkContainer to="/logout">
-                        to="/logout">
+                        <MenuItem eventKey="3">
-                        <MenuItem
-                            eventKey="3">
                             {getLangText('Log out')}
                         </MenuItem>
                     </LinkContainer>
                 </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 = (
-                <LinkContainer
+                <LinkContainer to="/login">
-                    to="/login">
                     <NavItem>
                         {getLangText('LOGIN')}
                     </NavItem>
                 </LinkContainer>
             );
             signup = (
-                <LinkContainer
+                <LinkContainer to="/signup">
-                    to="/signup">
                     <NavItem>
                         {getLangText('SIGNUP')}
                     </NavItem>
@@ -211,13 +185,12 @@ let Header = React.createClass({
                     toggleNavKey={0}
                     fixedTop={true}
                     className="hidden-print">
-                    <CollapsibleNav
+                    <CollapsibleNav eventKey={0}>
-                        eventKey={0}>
                         <Nav navbar left>
                             {this.getPoweredBy()}
                         </Nav>
                         <Nav navbar right>
-                            <HeaderNotificationDebug show={false}/>
+                            <HeaderNotificationDebug show={false} />
                             {account}
                             {signup}
                         </Nav>

js/components/whitelabel/prize/portfolioreview/pr_app.js

@@ -54,8 +54,7 @@ let PRApp = React.createClass({
     },
 
     render() {
-        const { children, history, routes } = this.props;
+        const { children, currentUser, history, routes, whitelabel } = this.props;
-        const { currentUser, whitelabel } = this.state;
         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' };
         }

js/components/whitelabel/prize/simple_prize/prize_app.js

@@ -53,8 +53,7 @@ let PrizeApp = React.createClass({
     },
 
     render() {
-        const { history, routes, children } = this.props;
+        const { children, currentUser, history, routes, whitelabel } = this.props;
-        const { currentUser, whitelabel } = this.state;
         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 (

js/components/whitelabel/wallet/wallet_app.js

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