112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
// @flow
|
|
import React, { Fragment } from 'react';
|
|
import { FormField } from 'component/common/form';
|
|
import BusyIndicator from 'component/common/busy-indicator';
|
|
import ChannelCreate from 'component/channelCreate';
|
|
|
|
import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
|
|
|
|
type Props = {
|
|
channel: string, // currently selected channel
|
|
channels: ?Array<ChannelClaim>,
|
|
balance: number,
|
|
onChannelChange: string => void,
|
|
createChannel: (string, number) => Promise<any>,
|
|
fetchChannelListMine: () => void,
|
|
fetchingChannels: boolean,
|
|
emailVerified: boolean,
|
|
};
|
|
|
|
type State = {
|
|
addingChannel: boolean,
|
|
};
|
|
|
|
class ChannelSection extends React.PureComponent<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
addingChannel: false,
|
|
};
|
|
|
|
(this: any).handleChannelChange = this.handleChannelChange.bind(this);
|
|
(this: any).handleChangeToNewChannel = this.handleChangeToNewChannel.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { channels, fetchChannelListMine, fetchingChannels, emailVerified } = this.props;
|
|
if (IS_WEB && !emailVerified) {
|
|
return;
|
|
}
|
|
|
|
if ((!channels || !channels.length) && !fetchingChannels) {
|
|
fetchChannelListMine();
|
|
}
|
|
}
|
|
|
|
handleChannelChange(event: SyntheticInputEvent<*>) {
|
|
const { onChannelChange } = this.props;
|
|
const channel = event.target.value;
|
|
|
|
if (channel === CHANNEL_NEW) {
|
|
this.setState({ addingChannel: true });
|
|
onChannelChange(channel);
|
|
} else {
|
|
this.setState({ addingChannel: false });
|
|
onChannelChange(channel);
|
|
}
|
|
}
|
|
|
|
handleChangeToNewChannel(props: Object) {
|
|
const { onChannelChange } = this.props;
|
|
const { newChannelName } = props;
|
|
|
|
this.setState({ addingChannel: false });
|
|
|
|
const channelName = `@${newChannelName.trim()}`;
|
|
onChannelChange(channelName);
|
|
}
|
|
|
|
render() {
|
|
const channel = this.state.addingChannel ? 'new' : this.props.channel;
|
|
const { fetchingChannels, channels = [] } = this.props;
|
|
const { addingChannel } = this.state;
|
|
|
|
return (
|
|
<Fragment>
|
|
{fetchingChannels ? (
|
|
<BusyIndicator message="Updating channels" />
|
|
) : (
|
|
<Fragment>
|
|
<div className="section">
|
|
<FormField
|
|
name="channel"
|
|
label={__('Channel')}
|
|
type="select"
|
|
onChange={this.handleChannelChange}
|
|
value={channel}
|
|
>
|
|
<option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>
|
|
{channels &&
|
|
channels.map(({ name, claim_id: claimId }) => (
|
|
<option key={claimId} value={name}>
|
|
{name}
|
|
</option>
|
|
))}
|
|
<option value={CHANNEL_NEW}>{__('New channel...')}</option>
|
|
</FormField>
|
|
</div>
|
|
{addingChannel && (
|
|
<div className="section">
|
|
<ChannelCreate onSuccess={this.handleChangeToNewChannel} />
|
|
</div>
|
|
)}
|
|
</Fragment>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ChannelSection;
|