lbry-desktop/ui/component/selectChannel/view.jsx

116 lines
3.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2020-02-18 23:48:10 +01:00
import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
2019-07-21 23:31:22 +02:00
import React, { Fragment } from 'react';
2019-02-13 17:27:20 +01:00
import { FormField } from 'component/common/form';
import ChannelCreate from 'component/channelCreate';
2018-03-26 23:32:43 +02:00
type Props = {
channel: string, // currently selected channel
channels: ?Array<ChannelClaim>,
2018-03-26 23:32:43 +02:00
balance: number,
2019-06-12 16:53:27 +02:00
onChannelChange: string => void,
2018-03-26 23:32:43 +02:00
createChannel: (string, number) => Promise<any>,
fetchChannelListMine: () => void,
fetchingChannels: boolean,
2020-02-18 23:48:10 +01:00
hideAnon: boolean,
2020-03-18 18:11:37 +01:00
hideNew: boolean,
2020-01-14 21:44:07 +01:00
label?: string,
injected?: Array<string>,
2020-01-14 15:57:34 +01:00
emailVerified: boolean,
2018-03-26 23:32:43 +02:00
};
type State = {
addingChannel: boolean,
};
class ChannelSelection extends React.PureComponent<Props, State> {
2018-03-26 23:32:43 +02:00
constructor(props: Props) {
super(props);
this.state = {
addingChannel: false,
};
(this: any).handleChannelChange = this.handleChannelChange.bind(this);
(this: any).handleChangeToNewChannel = this.handleChangeToNewChannel.bind(this);
2018-03-26 23:32:43 +02:00
}
componentDidMount() {
2019-10-28 19:53:59 +01:00
const { channels, fetchChannelListMine, fetchingChannels, emailVerified } = this.props;
if (IS_WEB && !emailVerified) {
return;
}
2019-09-24 14:57:55 +02:00
if ((!channels || !channels.length) && !fetchingChannels) {
2018-03-26 23:32:43 +02:00
fetchChannelListMine();
}
}
componentDidUpdate() {
const { channels, fetchingChannels, hideAnon } = this.props;
if (!fetchingChannels && !channels && hideAnon) {
this.setState({ addingChannel: true });
}
}
2019-05-21 02:47:23 +02:00
handleChannelChange(event: SyntheticInputEvent<*>) {
2019-06-12 16:53:27 +02:00
const { onChannelChange } = this.props;
const channel = event.target.value;
2018-03-26 23:32:43 +02:00
2019-06-12 16:53:27 +02:00
if (channel === CHANNEL_NEW) {
2018-03-26 23:32:43 +02:00
this.setState({ addingChannel: true });
2019-06-12 16:53:27 +02:00
onChannelChange(channel);
2018-03-26 23:32:43 +02:00
} else {
this.setState({ addingChannel: false });
2019-06-12 16:53:27 +02:00
onChannelChange(channel);
2018-03-26 23:32:43 +02:00
}
}
handleChangeToNewChannel(props: Object) {
const { onChannelChange } = this.props;
const { newChannelName } = props;
2018-03-26 23:32:43 +02:00
this.setState({ addingChannel: false });
2018-03-26 23:32:43 +02:00
2019-07-24 20:21:34 +02:00
const channelName = `@${newChannelName.trim()}`;
onChannelChange(channelName);
2018-03-26 23:32:43 +02:00
}
render() {
2019-06-12 16:53:27 +02:00
const channel = this.state.addingChannel ? 'new' : this.props.channel;
2020-03-18 18:11:37 +01:00
const { fetchingChannels, channels = [], hideAnon, hideNew, label, injected = [] } = this.props;
const { addingChannel } = this.state;
2018-03-26 23:32:43 +02:00
return (
2019-07-21 23:31:22 +02:00
<Fragment>
2020-02-06 19:49:05 +01:00
<FormField
name="channel"
label={label || __('Channel')}
type="select"
onChange={this.handleChannelChange}
value={channel}
>
2020-02-18 23:48:10 +01:00
{!hideAnon && <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>}
2020-02-06 19:49:05 +01:00
{channels &&
channels.map(({ name, claim_id: claimId }) => (
<option key={claimId} value={name}>
{name}
</option>
))}
{injected &&
injected.map(item => (
<option key={item} value={item}>
{item}
</option>
))}
2020-03-18 18:11:37 +01:00
{!fetchingChannels && !hideNew && <option value={CHANNEL_NEW}>{__('New channel...')}</option>}
2020-02-06 19:49:05 +01:00
</FormField>
{addingChannel && <ChannelCreate onSuccess={this.handleChangeToNewChannel} />}
2019-07-21 23:31:22 +02:00
</Fragment>
2018-03-26 23:32:43 +02:00
);
}
}
export default ChannelSelection;