1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 09:50:31 +01:00
onion/js/components/header.js
2015-09-01 18:38:24 +02:00

147 lines
4.5 KiB
JavaScript

'use strict';
import React from 'react';
import Router from 'react-router';
import Nav from 'react-bootstrap/lib/Nav';
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 UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store';
import WhitelabelActions from '../actions/whitelabel_actions';
import WhitelabelStore from '../stores/whitelabel_store';
import EventActions from '../actions/event_actions';
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';
let Header = React.createClass({
propTypes: {
showAddWork: React.PropTypes.bool,
routes: React.PropTypes.element
},
mixins: [Router.State],
getDefaultProps() {
return {
showAddWork: true
};
},
getInitialState() {
return mergeOptions(
WhitelabelStore.getState(),
UserStore.getState()
);
},
componentDidMount() {
UserActions.fetchCurrentUser();
UserStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel();
WhitelabelStore.listen(this.onChange);
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange);
},
getLogo(){
let logo = (
<span>
<span>ascribe </span>
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
</span>);
if (this.state.whitelabel && this.state.whitelabel.logo){
logo = <img className="img-brand" src={this.state.whitelabel.logo} />;
}
return logo;
},
getPoweredBy(){
if (this.state.whitelabel && this.state.whitelabel.logo) {
return (
<li>
<a className="pull-right" href="https://www.ascribe.io/" target="_blank">
<span id="powered">{getLangText('powered by')} </span>
<span>ascribe </span>
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
</a>
</li>
);
}
return null;
},
onChange(state) {
this.setState(state);
if(this.state.currentUser && this.state.currentUser.email) {
EventActions.profileDidLoad.defer(this.state.currentUser);
}
},
render() {
let account;
let signup;
let navRoutesLinks;
if (this.state.currentUser.username){
account = (
<DropdownButton
eventKey="1"
title={this.state.currentUser.username}>
<MenuItemLink eventKey="2" to="settings">{getLangText('Account Settings')}</MenuItemLink>
<MenuItem divider />
<MenuItemLink eventKey="3" to="logout">{getLangText('Log out')}</MenuItemLink>
</DropdownButton>
);
navRoutesLinks = <NavRoutesLinks routes={this.props.routes} navbar right/>;
}
else {
account = <NavItemLink to="login">{getLangText('LOGIN')}</NavItemLink>;
signup = <NavItemLink to="signup">{getLangText('SIGNUP')}</NavItemLink>;
}
return (
<div>
<Navbar
brand={
this.getLogo()
}
toggleNavKey={0}
fixedTop={true}>
<CollapsibleNav eventKey={0}>
<Nav navbar left>
{this.getPoweredBy()}
</Nav>
<Nav navbar right>
<HeaderNotificationDebug show={false}/>
{account}
{signup}
</Nav>
<HeaderNotifications />
{navRoutesLinks}
</CollapsibleNav>
</Navbar>
</div>
);
}
});
export default Header;