/
Header.jsx
100 lines (84 loc) · 2.96 KB
/
Header.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Navbar, Nav, NavItem, Glyphicon, NavDropdown, MenuItem } from 'react-bootstrap'
import classnames from 'classnames'
import NotificationHub from '~/components/Notifications/Hub'
import { logout } from '~/util/Auth'
import style from './Header.scss'
import { viewModeChanged } from '~/actions'
import PermissionsChecker from './PermissionsChecker'
import { fetchBotInformation, fetchAllBots } from '../../actions'
class Header extends React.Component {
state = {
loading: true
}
componentDidMount() {
this.props.fetchAllBots()
}
handleFullscreen = () => {
const newViewMode = this.props.viewMode < 1 ? 1 : 0
this.props.viewModeChanged(newViewMode)
}
renderLogoutButton() {
if (!window.AUTH_ENABLED) {
return null
}
const url = this.props.user.avatar_url
const label = url ? <img src={url} /> : <i className="material-icons">account_circle</i>
return (
<NavDropdown className={style.account} noCaret title={label} id="account-button">
<MenuItem header>Signed in as</MenuItem>
<MenuItem disabled>✉️ {this.props.user.email}</MenuItem>
<MenuItem disabled>👤 {this.props.user.username}</MenuItem>
<MenuItem divider />
<MenuItem eventKey={1} onClick={logout}>
<b>Logout</b>
</MenuItem>
</NavDropdown>
)
}
renderFullScreenButton() {
return (
<span className={classnames(style.fullScreen, 'bp-full-screen')}>
<Glyphicon glyph="fullscreen" />
</span>
)
}
render() {
if (this.props.viewMode >= 3) {
return null
}
const classNames = classnames(style.navbar, style['app-navbar'], 'bp-navbar')
const customStyle = this.props.customStyle['bp-navbar']
return (
<Navbar className={classNames} style={customStyle}>
<Navbar.Collapse>
<Nav pullRight>
<NavItem onClick={this.handleFullscreen}>{this.renderFullScreenButton()}</NavItem>
<PermissionsChecker user={this.props.user} res="bot.logs" op="read">
<NavItem href={window.BP_BASE_PATH + '/logs'}>
<Glyphicon glyph="list-alt" />
</NavItem>
</PermissionsChecker>
<PermissionsChecker user={this.props.user} res="bot.notifications" op="read">
<NotificationHub />
</PermissionsChecker>
{this.renderLogoutButton()}
</Nav>
<Nav pullRight className="bp-navbar-module-buttons" />
</Navbar.Collapse>
</Navbar>
)
}
}
const mapStateToProps = state => ({
user: state.user,
viewMode: state.ui.viewMode,
customStyle: state.ui.customStyle,
bot: state.bot,
bots: state.bots
})
const mapDispatchToProps = dispatch =>
bindActionCreators({ viewModeChanged, fetchBotInformation, fetchAllBots }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Header)