165 lines
4.8 KiB
JavaScript
Executable file
165 lines
4.8 KiB
JavaScript
Executable file
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
|