184 lines
5.9 KiB
JavaScript
Executable file
184 lines
5.9 KiB
JavaScript
Executable file
import React from 'react';
|
|
import lodash from 'lodash';
|
|
import Flux from '../../lib/flux';
|
|
import Flex from '../../uikit/Flex';
|
|
import FormSection from '../../uikit/form/FormSection';
|
|
import FormText, {Types as FormTextTypes} from '../../uikit/form/FormText';
|
|
import FormDivider from '../../uikit/form/FormDivider';
|
|
import FormItem from '../../uikit/form/FormItem';
|
|
import SwitchItem from '../../uikit/SwitchItem';
|
|
import Select from '../../uikit/Select';
|
|
import FormTitle, {Tags} from '../../uikit/form/FormTitle';
|
|
import CopyInput from '../common/CopyInput';
|
|
import StreamerModeEnabled from '../StreamerModeEnabled';
|
|
import GuildSettingsStore from '../../stores/GuildSettingsStore';
|
|
import ChannelStore from '../../stores/ChannelStore';
|
|
import StreamerModeStore from '../../stores/StreamerModeStore';
|
|
import GuildSettingsActionCreators from '../../actions/GuildSettingsActionCreators';
|
|
import i18n from '../../i18n';
|
|
|
|
const NO_INSTANT_INVITE_SENTINEL = 'NO_INSTANT_INVITE';
|
|
|
|
class GuildSettingsWidget extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
internalEnabled: props.widgetEnabled,
|
|
};
|
|
|
|
(this: any).renderToggle = this.renderToggle.bind(this);
|
|
(this: any).renderChannelSelect = this.renderChannelSelect.bind(this);
|
|
(this: any).renderAPIInfo = this.renderAPIInfo.bind(this);
|
|
(this: any).renderWidget = this.renderWidget.bind(this);
|
|
(this: any).handleToggleWidget = this.handleToggleWidget.bind(this);
|
|
(this: any).handleChannelSelect = this.handleChannelSelect.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.widgetEnabled !== this.state.internalEnabled) {
|
|
this.setState({internalEnabled: nextProps.widgetEnabled});
|
|
}
|
|
}
|
|
|
|
renderToggle() {
|
|
return (
|
|
<SwitchItem className="margin-bottom-40" value={this.state.internalEnabled} onChange={this.handleToggleWidget}>
|
|
{i18n.Messages.GUILD_SETTINGS_WIDGET_ENABLE_WIDGET}
|
|
</SwitchItem>
|
|
);
|
|
}
|
|
|
|
renderChannelSelect() {
|
|
const {channels, widgetChannelId, guildId} = this.props;
|
|
|
|
const options = lodash(channels)
|
|
.filter(channel => channel['guild_id'] === guildId)
|
|
.map(channel => {
|
|
return {
|
|
value: channel.id,
|
|
label: channel.toString(true),
|
|
};
|
|
})
|
|
.value();
|
|
const noInvite = {value: NO_INSTANT_INVITE_SENTINEL, label: i18n.Messages.NO_INSTANT_INVITE};
|
|
options.unshift(noInvite);
|
|
|
|
const value = widgetChannelId || noInvite;
|
|
|
|
return (
|
|
<FormItem title={i18n.Messages.FORM_LABEL_INSTANT_INVITE_CHANNEL}>
|
|
<Select
|
|
className="margin-bottom-20"
|
|
options={options}
|
|
value={value}
|
|
onChange={this.handleChannelSelect}
|
|
searchable={false}
|
|
clearable={false}
|
|
/>
|
|
<FormText type={FormTextTypes.DESCRIPTION}>
|
|
{i18n.Messages.FORM_HELP_INSTANT_INVITE_CHANNEL}
|
|
</FormText>
|
|
</FormItem>
|
|
);
|
|
}
|
|
|
|
renderAPIInfo() {
|
|
const {guildId} = this.props;
|
|
const jsonEndPoint = `${location.protocol}${process.env.API_ENDPOINT}/guilds/${guildId}/widget.json`;
|
|
|
|
return (
|
|
<Flex>
|
|
<Flex.Child>
|
|
<FormItem title={i18n.Messages.FORM_LABEL_SERVER_ID}>
|
|
<CopyInput value={guildId} />
|
|
</FormItem>
|
|
</Flex.Child>
|
|
<Flex.Child>
|
|
<FormItem title={i18n.Messages.FORM_LABEL_JSON_API}>
|
|
<CopyInput value={jsonEndPoint} />
|
|
</FormItem>
|
|
</Flex.Child>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
renderWidget() {
|
|
const {guildId} = this.props;
|
|
const widgetURL = `${location.protocol}${process.env.WIDGET_ENDPOINT}?id=${guildId}&theme=dark`;
|
|
const widgetHTML = `<iframe src="${widgetURL}" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>`; // eslint-disable-line
|
|
return (
|
|
<Flex direction={Flex.Direction.VERTICAL}>
|
|
<FormTitle>
|
|
{i18n.Messages.FORM_LABEL_PREMADE_WIDGET}
|
|
</FormTitle>
|
|
<Flex>
|
|
<Flex.Child basis="50%">
|
|
<FormItem>
|
|
<CopyInput value={widgetHTML} />
|
|
<FormText type={FormTextTypes.DESCRIPTION}>
|
|
{i18n.Messages.GUILD_SETTINGS_WIDGET_EMBED_HELP.format()}
|
|
</FormText>
|
|
</FormItem>
|
|
</Flex.Child>
|
|
<Flex.Child basis="50%">
|
|
<img src={require('../../images/guild_settings/img_server_widget.svg')} />
|
|
</Flex.Child>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
if (this.props.hide) {
|
|
return <StreamerModeEnabled />;
|
|
}
|
|
|
|
return (
|
|
<FormSection
|
|
className="guild-settings-widget"
|
|
tag={Tags.H2}
|
|
title={i18n.Messages.GUILD_SETTINGS_TITLE_SERVER_WIDGET}>
|
|
{this.renderToggle()}
|
|
{this.renderChannelSelect()}
|
|
<FormDivider className="margin-top-40 margin-bottom-40" />
|
|
{this.renderAPIInfo()}
|
|
<FormDivider className="margin-top-40 margin-bottom-40" />
|
|
{this.renderWidget()}
|
|
</FormSection>
|
|
);
|
|
}
|
|
|
|
handleToggleWidget(e: Event) {
|
|
const {guildId, widgetChannelId} = this.props;
|
|
const enabled = e.currentTarget.checked;
|
|
this.setState({internalEnabled: enabled});
|
|
GuildSettingsActionCreators.updateEmbed(guildId, enabled, widgetChannelId);
|
|
}
|
|
|
|
handleChannelSelect({value: channelId}) {
|
|
const {guildId, widgetEnabled} = this.props;
|
|
|
|
if (channelId === NO_INSTANT_INVITE_SENTINEL) {
|
|
channelId = null;
|
|
}
|
|
GuildSettingsActionCreators.updateEmbed(guildId, widgetEnabled, channelId);
|
|
}
|
|
}
|
|
|
|
export default Flux.connectStores([GuildSettingsStore, StreamerModeStore], () => {
|
|
const {guild, embedChannelId, embedEnabled} = GuildSettingsStore.getProps();
|
|
|
|
return {
|
|
widgetChannelId: embedChannelId,
|
|
widgetEnabled: embedEnabled,
|
|
channels: ChannelStore.getChannels(),
|
|
guildId: guild.id,
|
|
hide: StreamerModeStore.enabled,
|
|
};
|
|
})(GuildSettingsWidget);
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/guild_settings/GuildSettingsWidget.js
|