import React from 'react';
import Flux from '../../lib/flux';
import i18n from '../../i18n';
import AvatarUtils from '../../utils/AvatarUtils';
import Alert from '../Alert';
import Platforms from '../../lib/Platforms';
import Tooltip from '../common/Tooltip';
import {FormSection, FormTitle, FormTitleTags, FormText, FormTextTypes, FormDivider} from '../../uikit/form';
import Flex from '../../uikit/Flex';
import Spinner from '../../uikit/Spinner';
import Select from '../../uikit/Select';
import Integration from '../../uikit/Integration';
import EmptyState, {EmptyStateText, EmptyStateImage} from '../../uikit/EmptyState';
import Switch from '../../uikit/Switch';
import moment from 'moment';
import UserSettingsStore from '../../stores/UserSettingsStore';
import EmojiStore from '../../stores/EmojiStore';
import GuildSettingsStore from '../../stores/GuildSettingsStore';
import ModalActionCreators from '../../actions/ModalActionCreators';
import UserSettingsModalActionCreators from '../../actions/UserSettingsModalActionCreators';
import GuildSettingsActionCreators from '../../actions/GuildSettingsActionCreators';
import {GuildSettingsSections, UserSettingsSections} from '../../Constants';
import '../../styles/guild_settings_integrations.styl';
const SUB_EXPIRE_BEHAVIOR_OPTIONS = [
{value: '0', label: i18n.Messages.REMOVE_SYNCED_ROLE},
{value: '1', label: i18n.Messages.KICK_FROM_SERVER},
];
const SUB_GRACE_PERIOD_OPTIONS = [1, 3, 7, 14, 30].map(days => {
return {
value: `${days}`,
label: i18n.Messages.N_DAYS.format({days}),
};
});
class IntegrationItem extends React.PureComponent {
constructor(props) {
super(props);
(this: any).handleToggleEnabled = this.handleToggleEnabled.bind(this);
(this: any).handleExpireBehaviorChange = this.handleExpireBehaviorChange.bind(this);
(this: any).handleExpireGracePeriodChange = this.handleExpireGracePeriodChange.bind(this);
(this: any).handleSync = this.handleSync.bind(this);
(this: any).handleShowRole = this.handleShowRole.bind(this);
(this: any).handleToggleEmotes = this.handleToggleEmotes.bind(this);
}
renderTwitchEmoticons(platform) {
const {guild, integration} = this.props;
let syncedEmoji = null;
const emojis = EmojiStore.getGuildEmoji(guild.id);
if (integration['enable_emoticons'] && emojis) {
const emoticons = Object.values(emojis)
.sort((a, b) => a.name.localeCompare(b.name))
.filter(emoji => !emoji.roles.length || emoji.roles.indexOf(integration['role_id']) >= 0)
.map((emoji, index) => {
return (
);
});
if (emoticons.length > 0) {
syncedEmoji =
{emoticons}
;
}
}
return (
{i18n.Messages.ENABLE_TWITCH_EMOJI_SYNC}
{syncedEmoji}
);
}
renderSyncDetails(formLabelSyncedSubs, numSubscribers) {
const {guild, integration} = this.props;
const role = guild.getRole(integration['role_id']);
let roleLink;
if (role != null) {
roleLink = {role.name};
} else {
roleLink = i18n.Messages.NONE;
}
return (
{i18n.Messages.FORM_LABEL_SYNCED_ROLE}
{roleLink}
{formLabelSyncedSubs}
{numSubscribers.format({subscribers: integration['subscriber_count']})}
{i18n.Messages.LAST_SYNC.format({datetime: moment(integration['synced_at']).calendar()})}
);
}
renderExpireToggles(formLabelExpireBehavior) {
const {integration} = this.props;
return (
{formLabelExpireBehavior}
{i18n.Messages.FORM_LABEL_EXPIRE_GRACE_PERIOD}
);
}
render() {
const {integration, theme} = this.props;
const {enabled, syncing} = integration;
const platform = Platforms.get(integration.type);
let channelName;
let channelURL;
let formLabelExpireBehavior;
let formLabelSyncedSubs;
let numSubscribers;
let syncEmoticons;
switch (integration.type) {
case 'youtube':
channelName = integration.account.name;
channelURL = `gaming.youtube.com/channel/${integration.account.id}`;
formLabelExpireBehavior = i18n.Messages.FORM_LABEL_SPONSOR_EXPIRE_BEHAVIOR;
formLabelSyncedSubs = i18n.Messages.FORM_LABEL_SYNCED_SPONSORS;
numSubscribers = i18n.Messages.NUM_SPONSORS;
syncEmoticons = null;
break;
case 'twitch':
default:
channelName = channelURL = `twitch.tv/${integration.name}`;
formLabelExpireBehavior = i18n.Messages.FORM_LABEL_SUB_EXPIRE_BEHAVIOR;
formLabelSyncedSubs = i18n.Messages.FORM_LABEL_SYNCED_SUBS;
numSubscribers = i18n.Messages.NUM_SUBSCRIBERS;
syncEmoticons = this.renderTwitchEmoticons(platform);
}
let options;
if (enabled) {
options = (
{this.renderSyncDetails(formLabelSyncedSubs, numSubscribers)}
{this.renderExpireToggles(formLabelExpireBehavior)}
{syncEmoticons}
);
}
return (
{options}
);
}
// Handlers
handleToggleEnabled() {
const {guild, integration} = this.props;
if (integration.syncing) return;
if (!integration.enabled) {
GuildSettingsActionCreators.enableIntegration(guild.id, integration.type, integration.id);
} else {
ModalActionCreators.push(props => {
const confirmText = integration['expire_behavior'] === 0
? i18n.Messages.REMOVE_SYNCED_ROLE
: i18n.Messages.KICK_FROM_SERVER;
return (
GuildSettingsActionCreators.disableIntegration(guild.id, integration.id)}
{...props}
/>
);
});
}
}
handleExpireBehaviorChange(expireBehavior) {
const {guild, integration} = this.props;
GuildSettingsActionCreators.updateIntegration(
guild.id,
integration.id,
parseInt(expireBehavior.value),
integration['expire_grace_period'],
integration['enable_emoticons']
);
}
handleExpireGracePeriodChange(expireGracePeriod) {
const {guild, integration} = this.props;
GuildSettingsActionCreators.updateIntegration(
guild.id,
integration.id,
integration['expire_behavior'],
parseInt(expireGracePeriod.value),
integration['enable_emoticons']
);
}
handleSync() {
const {guild, integration} = this.props;
GuildSettingsActionCreators.syncIntegration(guild.id, integration.id);
}
handleShowRole() {
const {integration} = this.props;
GuildSettingsActionCreators.setSection(GuildSettingsSections.ROLES);
GuildSettingsActionCreators.selectRole(integration['role_id']);
}
handleToggleEmotes(e) {
const {guild, integration} = this.props;
GuildSettingsActionCreators.updateIntegration(
guild.id,
integration.id,
integration['expire_behavior'],
integration['expire_grace_period'],
e.currentTarget.checked
);
}
}
class GuildSettingsIntegrations extends React.PureComponent {
render() {
const {guild, integrations, theme} = this.props;
let content;
if (integrations == null) {
content = ;
} else if (integrations.length === 0) {
content = (
{i18n.Messages.NO_INTEGRATIONS_LABEL}
);
} else {
content = integrations.map((integration, i) =>
);
}
return (
{i18n.Messages.INTEGRATIONS_PRO_TIP.format({streamkitURL: 'https://discordapp.com/streamkit'})}
{content}
);
}
// Handlers
handleConnect() {
UserSettingsModalActionCreators.open(UserSettingsSections.CONNECTIONS);
}
}
export default Flux.connectStores([GuildSettingsStore, UserSettingsStore], () => {
const {guild, integrations} = GuildSettingsStore.getProps();
return {
guild,
integrations,
theme: UserSettingsStore.theme,
};
})(GuildSettingsIntegrations);
// WEBPACK FOOTER //
// ./discord_app/components/guild_settings/GuildSettingsIntegrations.js