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

import React from 'react';
import Flux from '../../lib/flux';
import lodash from 'lodash';
import StreamerModeEnabled from '../StreamerModeEnabled';
import Card from '../../uikit/Card';
import PrefixInput from '../../uikit/PrefixInput';
import Button from '../../uikit/Button';
import FormText, {Types as FormTextTypes} from '../../uikit/form/FormText';
import Text from '../../uikit/Text';
import FormSection from '../../uikit/form/FormSection';
import FormTitle, {Tags as FormTitleTags} from '../../uikit/form/FormTitle';
import Spinner from '../../uikit/Spinner';
import SettingsNotice from '../common/SettingsNotice';
import GuildSettingsStore from '../../stores/GuildSettingsStore';
import StreamerModeStore from '../../stores/StreamerModeStore';
import GuildSettingsVanityURLStore from '../../stores/GuildSettingsVanityURLStore';
import {setCode, saveCode, resetCode, close} from '../../actions/GuildSettingsVanityURLActionCreators';
import {getInviteURL} from '../../utils/InstantInviteUtils';
import i18n from '../../i18n';
import './GuildSettingsVanityURL.styl';

const VANITY_URL_PREFIX = 'https://discord.gg/';
const VANITY_URL_MAX_LENGTH = 25;

export const GuildSettingsVanityURLNotice = Flux.connectStores(
  [GuildSettingsStore, GuildSettingsVanityURLStore],
  () => {
    const vanityURLCode = GuildSettingsVanityURLStore.vanityURLCode;
    const guildId = GuildSettingsStore.getGuildId();

    return {
      vanityURLCode,
      guildId,
      onReset() {
        resetCode();
      },
      onSave() {
        saveCode(guildId, vanityURLCode);
      },
    };
  }
)(SettingsNotice);

type Props = {
  vanityURLCode: ?string,
  guildId: string,
  hasError: boolean,
  hide: boolean,
};

type State = {
  isRemoving: boolean,
};

class GuildSettingsVanityURL extends React.PureComponent {
  props: Props;
  state: State;

  constructor(props: Props) {
    super(props);

    lodash.bindAll(this, ['renderInfo', 'renderEditCard', 'handleRemoveVanityURL', 'handleInviteCodeChange']);

    this.state = {
      isRemoving: false,
    };
  }

  componentWillUnmount() {
    close();
  }

  renderEditCard() {
    const {isRemoving} = this.state;
    const {hasError, originalVanityURLCode, vanityURLCode} = this.props;

    if (vanityURLCode == null) {
      return <Spinner />;
    }

    return (
      <Card editable className="edit-vanity-url-card">
        <FormTitle>{i18n.Messages.INVITE_URL}</FormTitle>
        <PrefixInput
          prefix={VANITY_URL_PREFIX}
          value={vanityURLCode}
          onChange={this.handleInviteCodeChange}
          maxLength={VANITY_URL_MAX_LENGTH}
          autoFocus
          error={hasError}
        />
        {originalVanityURLCode != null && originalVanityURLCode.length > 0
          ? <Button
              className="remove-vanity-url-button margin-top-20"
              onClick={this.handleRemoveVanityURL}
              submitting={isRemoving}
              look={Button.Looks.LINK}
              size={Button.Sizes.MIN}
              color={Button.Colors.RED}>
              {i18n.Messages.REMOVE_VANITY_URL}
            </Button>
          : null}
      </Card>
    );
  }

  renderInfo() {
    const {hasError, originalVanityURLCode} = this.props;

    if (hasError) {
      return (
        <Text size={Text.Sizes.MEDIUM} color={Text.Colors.RED} className="margin-top-20">
          {i18n.Messages.CHANGE_VANITY_URL_ERROR}
        </Text>
      );
    } else if (originalVanityURLCode != null && originalVanityURLCode.length > 0) {
      const url = getInviteURL(originalVanityURLCode);
      return (
        <FormText className="margin-top-20" type={FormTextTypes.LABEL_DESCRIPTOR}>
          {i18n.Messages.VANITY_URL_HELP_EXTENDED_LINK.format({
            urlText: url,
            urlValue: url,
          })}
        </FormText>
      );
    }
  }

  handleRemoveVanityURL() {
    setCode('');
  }

  handleInviteCodeChange(value) {
    setCode(value.replace(/ /g, '-'));
  }

  render() {
    if (this.props.hide) {
      return <StreamerModeEnabled />;
    }

    return (
      <FormSection className="guild-settings-vanity-url" tag={FormTitleTags.H2} title={i18n.Messages.VANITY_URL}>
        <FormText type={FormTextTypes.DESCRIPTION} className="margin-bottom-20">
          {i18n.Messages.VANITY_URL_HELP}
        </FormText>
        {this.renderEditCard()}
        {this.renderInfo()}
      </FormSection>
    );
  }
}

export default Flux.connectStores([GuildSettingsStore, GuildSettingsVanityURLStore, StreamerModeStore], () => ({
  vanityURLCode: GuildSettingsVanityURLStore.vanityURLCode,
  originalVanityURLCode: GuildSettingsVanityURLStore.originalVanityURLCode,
  guildId: GuildSettingsStore.getGuildId(),
  hasError: GuildSettingsVanityURLStore.hasError(),
  hide: StreamerModeStore.hideInstantInvites,
}))(GuildSettingsVanityURL);



// WEBPACK FOOTER //
// ./discord_app/components/guild_settings/GuildSettingsVanityURL.js