371 lines
11 KiB
JavaScript
371 lines
11 KiB
JavaScript
|
/* @flow */
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||
|
|
import Animated from '../lib/animated';
|
||
|
|
import Select from 'react-select';
|
||
|
|
import i18n from '../i18n';
|
||
|
|
import InstantInvite from './InstantInvite';
|
||
|
|
import Flux from '../lib/flux';
|
||
|
|
import AnalyticsUtils from '../utils/AnalyticsUtils';
|
||
|
|
import InstantInviteActionCreators from '../actions/InstantInviteActionCreators';
|
||
|
|
import InstantInviteStore from '../stores/InstantInviteStore';
|
||
|
|
import StreamerModeStore from '../stores/StreamerModeStore';
|
||
|
|
import InstantInviteUtils from '../utils/InstantInviteUtils';
|
||
|
|
import GuildChannelStore from '../stores/views/GuildChannelStore';
|
||
|
|
import TransitionGroup from '../lib/transitions/TransitionGroup';
|
||
|
|
import Checkbox from './common/Checkbox';
|
||
|
|
import InvitePeriodExperimentStore from '../stores/experiments/InvitePeriodExperimentStore';
|
||
|
|
import createExperimentContainer from './experiments/ExperimentContainer';
|
||
|
|
import Spinner from './common/Spinner';
|
||
|
|
import Tooltip from './common/Tooltip';
|
||
|
|
import {ChannelTypes, ExperimentTypes, ExperimentBuckets} from '../Constants';
|
||
|
|
import '../styles/instant_invite_modal.styl';
|
||
|
|
|
||
|
|
const LOCATION = 'Invite Modal';
|
||
|
|
const MAX_AGE_OPTIONS = InstantInviteUtils.getMaxAgeOptions;
|
||
|
|
const MAX_USES_OPTIONS = InstantInviteUtils.getMaxUsesOptions;
|
||
|
|
|
||
|
|
function createAnimationMixin(reverse = false, duration = 250, easing = Animated.Easing.inOut(Animated.Easing.cubic)) {
|
||
|
|
return {
|
||
|
|
getInitialState() {
|
||
|
|
return {
|
||
|
|
opacity: new Animated.Value(0),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidAppear() {
|
||
|
|
this.state.opacity.setValue(1);
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillEnter(callback) {
|
||
|
|
Animated.timing(this.state.opacity, {toValue: 1, duration, easing}).start(callback);
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillLeave(callback) {
|
||
|
|
Animated.timing(this.state.opacity, {toValue: 0, duration, easing}).start(callback);
|
||
|
|
},
|
||
|
|
|
||
|
|
getAnimatedStyle() {
|
||
|
|
return {
|
||
|
|
opacity: this.state.opacity,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const BasicInstantInviteModal = React.createClass({
|
||
|
|
mixins: [createAnimationMixin()],
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {invite, guild, hide, maxAge, handleExpiresChange, showAdvanced} = this.props;
|
||
|
|
|
||
|
|
let doesNotExpire = false;
|
||
|
|
let instantInvite;
|
||
|
|
let expireText;
|
||
|
|
if (!invite) {
|
||
|
|
instantInvite = <Spinner />;
|
||
|
|
} else {
|
||
|
|
instantInvite = (
|
||
|
|
<InstantInvite code={invite.code} copyText={i18n.Messages.COPY} hidden={hide} location={LOCATION} />
|
||
|
|
);
|
||
|
|
|
||
|
|
doesNotExpire = maxAge == MAX_AGE_OPTIONS[0].value;
|
||
|
|
if (doesNotExpire) {
|
||
|
|
expireText = i18n.Messages.INVITE_LINKS_NEVER_EXPIRES;
|
||
|
|
} else if (maxAge == MAX_AGE_OPTIONS[1].value) {
|
||
|
|
expireText = i18n.Messages.INVITE_LINKS_EXPIRE_AFTER_BY_DEFAULT;
|
||
|
|
} else {
|
||
|
|
expireText = i18n.Messages.INVITE_LINKS_EXPIRE_AFTER_1_DAY;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Animated.form id="instant-invite-modal" className="form" style={this.getAnimatedStyle()}>
|
||
|
|
<div className="form-header">
|
||
|
|
<header>
|
||
|
|
{i18n.Messages.INVITE_TO_SERVER_NAME.format({guildName: guild.name})}
|
||
|
|
</header>
|
||
|
|
<div className="blurb">
|
||
|
|
{i18n.Messages.SHARE_INVITE_LINK_FOR_ACCESS}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="form-inner">
|
||
|
|
{instantInvite}
|
||
|
|
<div className="expire-text">{expireText}</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="form-actions">
|
||
|
|
<Checkbox checked={doesNotExpire} onChange={handleExpiresChange}>
|
||
|
|
{i18n.Messages.SET_INVITE_LINK_NEVER_EXPIRE}
|
||
|
|
</Checkbox>
|
||
|
|
<Tooltip text={i18n.Messages.LINK_SETTINGS}>
|
||
|
|
<button className="advanced" onClick={showAdvanced} />
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
</Animated.form>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const AdvancedInstantInviteModal = React.createClass({
|
||
|
|
mixins: [createAnimationMixin(true)],
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
maxAge,
|
||
|
|
maxUses,
|
||
|
|
temporary,
|
||
|
|
handleTemporaryChange,
|
||
|
|
handleGenerateNewLink,
|
||
|
|
hideAdvanced,
|
||
|
|
handleMaxUsesChange,
|
||
|
|
handleExpireAfterChange,
|
||
|
|
} = this.props;
|
||
|
|
const maxAgeValue = MAX_AGE_OPTIONS.find(age => age.value == maxAge);
|
||
|
|
const maxUsesValue = MAX_USES_OPTIONS.find(uses => uses.value == maxUses);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Animated.form id="instant-invite-modal-advanced" className="form" style={this.getAnimatedStyle()}>
|
||
|
|
<div className="form-inner">
|
||
|
|
<div className="control-groups">
|
||
|
|
<div className="control-group">
|
||
|
|
<label>{i18n.Messages.EXPIRE_AFTER}</label>
|
||
|
|
<Select
|
||
|
|
value={maxAgeValue}
|
||
|
|
clearable={false}
|
||
|
|
searchable={false}
|
||
|
|
options={MAX_AGE_OPTIONS}
|
||
|
|
onChange={handleExpireAfterChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="control-group">
|
||
|
|
<label>{i18n.Messages.MAX_NUMBER_OF_USES}</label>
|
||
|
|
<Select
|
||
|
|
value={maxUsesValue}
|
||
|
|
clearable={false}
|
||
|
|
searchable={false}
|
||
|
|
options={MAX_USES_OPTIONS}
|
||
|
|
onChange={handleMaxUsesChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="control-group">
|
||
|
|
<Checkbox checked={temporary} onChange={handleTemporaryChange}>
|
||
|
|
{i18n.Messages.GRANT_TEMPORARY_MEMBERSHIP}
|
||
|
|
</Checkbox>
|
||
|
|
<div className="help-text">
|
||
|
|
{i18n.Messages.TEMPORARY_MEMBERSHIP_EXPLANATION}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="form-actions">
|
||
|
|
<button type="button" className="btn btn-default" onClick={hideAdvanced}>
|
||
|
|
{i18n.Messages.CANCEL}
|
||
|
|
</button>
|
||
|
|
<button type="submit" className="btn btn-primary" onClick={handleGenerateNewLink}>
|
||
|
|
{i18n.Messages.GENERATE_A_NEW_LINK}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Animated.form>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const InstantInviteModal = React.createClass({
|
||
|
|
mixins: [Flux.LazyStoreListenerMixin(InstantInviteStore, StreamerModeStore), PureRenderMixin],
|
||
|
|
|
||
|
|
getInitialState() {
|
||
|
|
return {
|
||
|
|
showAdvanced: false,
|
||
|
|
maxUses: MAX_USES_OPTIONS[0].value,
|
||
|
|
temporary: false,
|
||
|
|
channel: this.getChannel(),
|
||
|
|
...this.getStateFromStores(),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
getStateFromStores() {
|
||
|
|
const invite = InstantInviteStore.getInvite(this.getChannel().id);
|
||
|
|
const maxAge = invite ? invite.maxAge : MAX_AGE_OPTIONS[1].value;
|
||
|
|
const savedMaxAge = maxAge == MAX_USES_OPTIONS[0].value ? MAX_AGE_OPTIONS[1].value : MAX_AGE_OPTIONS[0].value;
|
||
|
|
|
||
|
|
return {
|
||
|
|
invite,
|
||
|
|
maxAge,
|
||
|
|
savedMaxAge,
|
||
|
|
hide: StreamerModeStore.hideInstantInvites,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
const validate = this.state.invite ? this.state.invite.code : null;
|
||
|
|
const experimentBucket = this.props.experiment ? this.props.experiment.bucket : 0;
|
||
|
|
|
||
|
|
const maxAge = (experimentBucket => {
|
||
|
|
switch (experimentBucket) {
|
||
|
|
case ExperimentBuckets.TREATMENT_1:
|
||
|
|
case ExperimentBuckets.TREATMENT_2:
|
||
|
|
return MAX_AGE_OPTIONS[5].value; // 1 Day
|
||
|
|
default:
|
||
|
|
return MAX_AGE_OPTIONS[1].value;
|
||
|
|
}
|
||
|
|
})(experimentBucket);
|
||
|
|
|
||
|
|
InstantInviteActionCreators.createInvite(
|
||
|
|
this.state.channel.id,
|
||
|
|
{
|
||
|
|
validate,
|
||
|
|
max_age: maxAge, // eslint-disable-line camelcase
|
||
|
|
},
|
||
|
|
'InstantInviteModal Mount'
|
||
|
|
);
|
||
|
|
|
||
|
|
let {source} = this.props;
|
||
|
|
if (source != null) {
|
||
|
|
if (window.inviteButtonSource) {
|
||
|
|
source = window.inviteButtonSource;
|
||
|
|
window.inviteButtonSource = undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
AnalyticsUtils.track('open_popout', {
|
||
|
|
Type: 'Instant Invite Modal',
|
||
|
|
Source: source,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getChannel() {
|
||
|
|
const {channel, guild} = this.props;
|
||
|
|
|
||
|
|
if (channel) {
|
||
|
|
return channel;
|
||
|
|
}
|
||
|
|
if (this.state && this.state.channel) {
|
||
|
|
return this.state.channel;
|
||
|
|
}
|
||
|
|
|
||
|
|
const channels = GuildChannelStore.getChannels(guild.id)[ChannelTypes.GUILD_TEXT];
|
||
|
|
return channels.find(channel => channel.channel.id == guild.id).channel;
|
||
|
|
},
|
||
|
|
|
||
|
|
handleExpiresChange() {
|
||
|
|
this.createInvite(this.state.savedMaxAge, this.state.maxUses, this.state.temporary, 'InstantInviteModal');
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
maxAge: this.state.savedMaxAge,
|
||
|
|
savedMaxAge: this.state.maxAge,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
handleExpireAfterChange(value: string) {
|
||
|
|
this.setState({
|
||
|
|
maxAge: value,
|
||
|
|
savedMaxAge: value == MAX_AGE_OPTIONS[0].value ? MAX_AGE_OPTIONS[1].value : MAX_AGE_OPTIONS[0].value,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
handleMaxUsesChange(value: string) {
|
||
|
|
this.setState({
|
||
|
|
maxUses: value,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
handleTemporaryChange(e: Event) {
|
||
|
|
this.setState({
|
||
|
|
// $FlowFixMe
|
||
|
|
temporary: e.currentTarget.checked,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
showAdvanced(e: Event) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
showAdvanced: true,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
hideAdvanced(e: Event) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
showAdvanced: false,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
handleGenerateNewLink(e: Event) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
this.createInvite(this.state.maxAge, this.state.maxUses, this.state.temporary, 'InstantInviteModal Regenerate');
|
||
|
|
this.setState({showAdvanced: false});
|
||
|
|
},
|
||
|
|
|
||
|
|
createInvite(maxAge: string | number, maxUses: string | number, temporary: boolean) {
|
||
|
|
InstantInviteActionCreators.createInvite(
|
||
|
|
this.state.channel.id,
|
||
|
|
{
|
||
|
|
/* eslint-disable camelcase */
|
||
|
|
max_age: parseInt(maxAge, 10),
|
||
|
|
max_uses: parseInt(maxUses, 10),
|
||
|
|
/* eslint-enable camelcase */
|
||
|
|
temporary: temporary,
|
||
|
|
},
|
||
|
|
'InstantInviteModal'
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {showAdvanced, maxAge, maxUses, temporary, hide, invite} = this.state;
|
||
|
|
const {guild} = this.props;
|
||
|
|
|
||
|
|
const content = showAdvanced
|
||
|
|
? <AdvancedInstantInviteModal
|
||
|
|
maxAge={maxAge}
|
||
|
|
maxUses={maxUses}
|
||
|
|
temporary={temporary}
|
||
|
|
handleTemporaryChange={this.handleTemporaryChange}
|
||
|
|
handleGenerateNewLink={this.handleGenerateNewLink}
|
||
|
|
handleMaxUsesChange={this.handleMaxUsesChange}
|
||
|
|
handleExpireAfterChange={this.handleExpireAfterChange}
|
||
|
|
hideAdvanced={this.hideAdvanced}
|
||
|
|
key="instant-invite-modal"
|
||
|
|
/>
|
||
|
|
: <BasicInstantInviteModal
|
||
|
|
invite={invite}
|
||
|
|
guild={guild}
|
||
|
|
hide={hide}
|
||
|
|
maxAge={maxAge}
|
||
|
|
handleExpiresChange={this.handleExpiresChange}
|
||
|
|
showAdvanced={this.showAdvanced}
|
||
|
|
key="instant-invite-modal-advanced"
|
||
|
|
/>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TransitionGroup className="instant-invite-modal theme-light" component="div">
|
||
|
|
{content}
|
||
|
|
</TransitionGroup>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const renderComponent = (props, experimentDescriptor) => {
|
||
|
|
return <InstantInviteModal {...props} experiment={experimentDescriptor} />;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default createExperimentContainer(InvitePeriodExperimentStore, {
|
||
|
|
[ExperimentTypes.NONE]: props => <InstantInviteModal {...props} />,
|
||
|
|
|
||
|
|
[ExperimentTypes.USER]: {
|
||
|
|
[ExperimentBuckets.CONTROL]: renderComponent,
|
||
|
|
[ExperimentBuckets.TREATMENT_1]: renderComponent,
|
||
|
|
[ExperimentBuckets.TREATMENT_2]: renderComponent,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// WEBPACK FOOTER //
|
||
|
|
// ./discord_app/components/InstantInviteModal.js
|