1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
onion/js/components/header.js
2015-06-17 17:48:23 +02:00

97 lines
3.0 KiB
JavaScript

'use strict';
import React from 'react';
import Router from 'react-router';
import UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store';
import apiUrls from '../constants/api_urls.js';
//import PieceListActions from '../actions/piece_list_actions';
import requests from '../utils/requests';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavItem from 'react-bootstrap/lib/NavItem';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
import LoginModal from '../components/ascribe_modal/modal_login';
import SignupModal from '../components/ascribe_modal/modal_signup';
import { getLangText } from '../utils/lang_utils';
let Link = Router.Link;
let Header = React.createClass({
//mixins: [Router.Navigation],
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserActions.fetchCurrentUser();
UserStore.listen(this.onChange);
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
handleLogout(){
requests
.get(apiUrls.users_logout)
.then(this.refreshData);
},
onChange(state) {
this.setState(state);
},
refreshData(){
location.reload();
},
render() {
let account = null;
let signup = null;
if (this.state.currentUser.username){
account = (
<DropdownButton eventKey="1" title={this.state.currentUser.username}>
<MenuItemLink to="settings">{getLangText('Account Settings')}</MenuItemLink>
<li className="divider"></li>
<MenuItem eventKey="2" href="/art/faq/">{getLangText('FAQ')}</MenuItem>
<MenuItem eventKey="3" href="/art/terms/">{getLangText('Terms of Service')}</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4" href="#" onClick={this.handleLogout}>{getLangText('Log out')}</MenuItem>
</DropdownButton>
);
}
else {
account = (
<LoginModal
button={<NavItem to="pieces">LOGIN</NavItem>}
handleSuccess={this.refreshData}/>);
signup = (
<SignupModal
button={<NavItem to="pieces">SIGNUP</NavItem>} />);
}
return (
<Navbar>
<Nav>
<Link className="navbar-brand" to="pieces" path="/?page=1">
<span>ascribe </span>
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
</Link>
</Nav>
<Nav right>
{account}
{signup}
</Nav>
</Navbar>
);
}
});
export default Header;