2017-06-08_509bba0/509bba0_unpacked_with_node_modules/discord_app/components/guild_settings/GuildSettingsWidget.js

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