dispatch/client/src/js/components/TabList.jsx
2015-06-10 00:59:41 +02:00

82 lines
1.9 KiB
JavaScript

var React = require('react');
var Reflux = require('reflux');
var TabListItem = require('./TabListItem.jsx');
var channelStore = require('../stores/channel');
var privateChatStore = require('../stores/privateChat');
var serverStore = require('../stores/server');
var routeActions = require('../actions/route');
var tabActions = require('../actions/tab');
var PureMixin = require('../mixins/pure');
var TabList = React.createClass({
mixins: [
PureMixin,
Reflux.connect(serverStore, 'servers'),
Reflux.connect(channelStore, 'channels'),
Reflux.connect(privateChatStore, 'privateChats')
],
handleConnectClick() {
routeActions.navigate('connect');
tabActions.hideMenu();
},
handleSettingsClick() {
routeActions.navigate('settings');
tabActions.hideMenu();
},
render() {
var className = this.props.menuToggled ? 'tablist off-canvas' : 'tablist';
var tabs = [];
this.state.channels.forEach((server, address) => {
tabs.push(
<TabListItem
key={address}
server={address}
channel={null}
name={this.state.servers.getIn([address, 'name'])}>
</TabListItem>
);
server.forEach((channel, name) => {
tabs.push(
<TabListItem
key={address + name}
server={address}
channel={name}
name={name}>
</TabListItem>
);
});
if (this.state.privateChats.has(address)) {
this.state.privateChats.get(address).forEach(nick => {
tabs.push(
<TabListItem
key={address + nick}
server={address}
channel={nick}
name={nick}>
</TabListItem>
);
});
}
});
return (
<div className={className}>
<button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
<div className="tab-container">{tabs}</div>
<div className="side-buttons">
<i className="icon-user"></i>
<i className="icon-cog" onClick={this.handleSettingsClick}></i>
</div>
</div>
);
}
});
module.exports = TabList;