133 lines
3.5 KiB
JavaScript
133 lines
3.5 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import classnames from 'classnames';
|
|
import get from 'lodash/get';
|
|
import { FiPlus, FiUser, FiSettings } from 'react-icons/fi';
|
|
import Button from 'components/ui/Button';
|
|
import TabListItem from 'containers/TabListItem';
|
|
import { count } from 'utils';
|
|
|
|
export default class TabList extends PureComponent {
|
|
handleTabClick = (server, target) => this.props.select(server, target);
|
|
|
|
handleConnectClick = () => this.props.push('/connect');
|
|
|
|
handleSettingsClick = () => this.props.push('/settings');
|
|
|
|
render() {
|
|
const {
|
|
tab,
|
|
channels,
|
|
servers,
|
|
privateChats,
|
|
showTabList,
|
|
openModal
|
|
} = this.props;
|
|
const tabs = [];
|
|
|
|
const className = classnames('tablist', {
|
|
'off-canvas': showTabList
|
|
});
|
|
|
|
channels.forEach(server => {
|
|
const { address } = server;
|
|
const srv = servers[address];
|
|
tabs.push(
|
|
<TabListItem
|
|
key={address}
|
|
server={address}
|
|
content={srv.name}
|
|
selected={tab.server === address && !tab.name}
|
|
connected={srv.status.connected}
|
|
onClick={this.handleTabClick}
|
|
/>
|
|
);
|
|
|
|
const chanCount = count(server.channels, c => c.joined);
|
|
const chanLimit =
|
|
get(srv.features, ['CHANLIMIT', '#'], 0) || srv.features.MAXCHANNELS;
|
|
|
|
let chanLabel;
|
|
if (chanLimit > 0) {
|
|
chanLabel = (
|
|
<span>
|
|
<span className="success">{chanCount}</span>/{chanLimit}
|
|
</span>
|
|
);
|
|
} else if (chanCount > 0) {
|
|
chanLabel = <span className="success">{chanCount}</span>;
|
|
}
|
|
|
|
tabs.push(
|
|
<div
|
|
key={`${address}-chans}`}
|
|
className="tab-label"
|
|
onClick={() => openModal('channel', address)}
|
|
>
|
|
<span>CHANNELS {chanLabel}</span>
|
|
<Button title="Join Channel">+</Button>
|
|
</div>
|
|
);
|
|
|
|
server.channels.forEach(({ name, joined }) =>
|
|
tabs.push(
|
|
<TabListItem
|
|
key={address + name}
|
|
server={address}
|
|
target={name}
|
|
content={name}
|
|
joined={joined}
|
|
selected={tab.server === address && tab.name === name}
|
|
onClick={this.handleTabClick}
|
|
/>
|
|
)
|
|
);
|
|
|
|
if (privateChats[address] && privateChats[address].length > 0) {
|
|
tabs.push(
|
|
<div key={`${address}-pm}`} className="tab-label">
|
|
<span>
|
|
DIRECT MESSAGES{' '}
|
|
<span style={{ color: '#6bb758' }}>
|
|
{privateChats[address].length}
|
|
</span>
|
|
</span>
|
|
{/* <Button>+</Button> */}
|
|
</div>
|
|
);
|
|
|
|
privateChats[address].forEach(nick =>
|
|
tabs.push(
|
|
<TabListItem
|
|
key={address + nick}
|
|
server={address}
|
|
target={nick}
|
|
content={nick}
|
|
selected={tab.server === address && tab.name === nick}
|
|
onClick={this.handleTabClick}
|
|
/>
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className="tab-container">{tabs}</div>
|
|
<div className="side-buttons">
|
|
<Button
|
|
icon={FiPlus}
|
|
aria-label="Connect"
|
|
onClick={this.handleConnectClick}
|
|
/>
|
|
<Button icon={FiUser} aria-label="User" />
|
|
<Button
|
|
icon={FiSettings}
|
|
aria-label="Settings"
|
|
onClick={this.handleSettingsClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|