149 lines
4.8 KiB
JavaScript
149 lines
4.8 KiB
JavaScript
|
import React from 'react';
|
||
|
import lodash from 'lodash';
|
||
|
import Platforms from '../lib/Platforms';
|
||
|
import DetectedPlatformAccountsStore from '../stores/DetectedPlatformAccountsStore';
|
||
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||
|
import Switch from './common/Switch';
|
||
|
import RouterUtils from '../utils/RouterUtils';
|
||
|
import FriendsActionCreators from '../actions/FriendsActionCreators';
|
||
|
import PlatformAccountsActionCreators from '../actions/PlatformAccountsActionCreators';
|
||
|
import ConnectedAccountsActionCreators from '../actions/ConnectedAccountsActionCreators';
|
||
|
import i18n from '../i18n';
|
||
|
import {Routes, FriendsSections} from '../Constants';
|
||
|
import Backdrop from './common/Backdrop';
|
||
|
import HelpdeskUtils from '../utils/HelpdeskUtils';
|
||
|
import '../styles/detected_platform_accounts_modal.styl';
|
||
|
|
||
|
const DetectedPlatformAccount = ({account, platform, connect, onToggle}) =>
|
||
|
<div className="detected-account">
|
||
|
<img className="detected-account-icon" src={platform.icon.color} />
|
||
|
<div className="detected-account-details">
|
||
|
<h3>{account.name}</h3>
|
||
|
<h4>{i18n.Messages.NUM_FRIENDS.format({friendCount: account.friendIdHashes.length})}</h4>
|
||
|
</div>
|
||
|
<Switch checked={connect} onChange={e => onToggle(account.id, e.currentTarget.checked)} />
|
||
|
</div>;
|
||
|
|
||
|
const DetectedPlatformAccountsModal = React.createClass({
|
||
|
mixins: [PureRenderMixin],
|
||
|
|
||
|
statics: {
|
||
|
modalConfig: {
|
||
|
store: DetectedPlatformAccountsStore,
|
||
|
backdropStyle: Backdrop.SOLID,
|
||
|
closable: false,
|
||
|
},
|
||
|
},
|
||
|
|
||
|
getInitialState() {
|
||
|
return {
|
||
|
noConnect: new Set(),
|
||
|
};
|
||
|
},
|
||
|
|
||
|
close() {
|
||
|
PlatformAccountsActionCreators.ignore();
|
||
|
},
|
||
|
|
||
|
handleEnable() {
|
||
|
const {detectedAccounts, analyticsLocation} = this.props;
|
||
|
const {noConnect} = this.state;
|
||
|
|
||
|
const platformTypes = new Set();
|
||
|
detectedAccounts.forEach(account => {
|
||
|
if (noConnect.has(account.id)) {
|
||
|
platformTypes.add(account.type);
|
||
|
} else {
|
||
|
ConnectedAccountsActionCreators.connect(account.type, account.id, account.name, analyticsLocation);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
RouterUtils.transitionTo(Routes.FRIENDS);
|
||
|
FriendsActionCreators.setSection(FriendsSections.ADD_FRIEND);
|
||
|
|
||
|
PlatformAccountsActionCreators.ignore(Array.from(platformTypes));
|
||
|
},
|
||
|
|
||
|
handleToggle(accountId, connect) {
|
||
|
const {noConnect} = this.state;
|
||
|
if (connect && noConnect.has(accountId)) {
|
||
|
noConnect.delete(accountId);
|
||
|
this.forceUpdate();
|
||
|
} else if (!connect && !noConnect.has(accountId)) {
|
||
|
noConnect.add(accountId);
|
||
|
this.forceUpdate();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
render() {
|
||
|
const {detectedAccounts} = this.props;
|
||
|
const {noConnect} = this.state;
|
||
|
|
||
|
const icons = lodash(detectedAccounts)
|
||
|
.map(account => Platforms.get(account.type))
|
||
|
.uniq()
|
||
|
.map(platform => <img key={platform.type} className="icon" src={platform.icon.color} />)
|
||
|
.value();
|
||
|
|
||
|
const backgroundImage = require(`../images/platforms/img_account_sync_stars${icons.length}.svg`);
|
||
|
|
||
|
let body;
|
||
|
const platformNames = lodash.uniq(detectedAccounts.map(account => Platforms.get(account.type).name));
|
||
|
const [a, b, c] = platformNames;
|
||
|
switch (platformNames.length) {
|
||
|
case 1:
|
||
|
body = i18n.Messages.ONE_PLATFORM_ACCOUNT_DETECTED.format({a});
|
||
|
break;
|
||
|
case 2:
|
||
|
body = i18n.Messages.TWO_PLATFORM_ACCOUNTS_DETECTED.format({a, b});
|
||
|
break;
|
||
|
case 3:
|
||
|
body = i18n.Messages.THREE_PLATFORM_ACCOUNTS_DETECTED.format({a, b, c});
|
||
|
break;
|
||
|
default:
|
||
|
body = i18n.Messages.FOUR_OR_MORE_PLATFORM_ACCOUNTS_DETECTED;
|
||
|
break;
|
||
|
}
|
||
|
|
||
|
const accounts = detectedAccounts.map(account =>
|
||
|
<DetectedPlatformAccount
|
||
|
key={account.id}
|
||
|
account={account}
|
||
|
platform={Platforms.get(account.type)}
|
||
|
connect={!noConnect.has(account.id)}
|
||
|
onToggle={this.handleToggle}
|
||
|
/>
|
||
|
);
|
||
|
|
||
|
return (
|
||
|
<div className="detected-platform-accounts-modal">
|
||
|
<div className="icons" style={{backgroundImage: `url(${backgroundImage})`}}>{icons}</div>
|
||
|
<div className="body">{body}</div>
|
||
|
<div className="detected-accounts">{accounts}</div>
|
||
|
<div className="divider" />
|
||
|
<div className="btn-group">
|
||
|
<button type="button" className="btn btn-default" onClick={this.close}>
|
||
|
{i18n.Messages.NOT_NOW}
|
||
|
</button>
|
||
|
<button
|
||
|
type="button"
|
||
|
className="btn btn-primary"
|
||
|
onClick={this.handleEnable}
|
||
|
disabled={detectedAccounts.length - noConnect.size === 0}>
|
||
|
{i18n.Messages.ENABLE}
|
||
|
</button>
|
||
|
</div>
|
||
|
<div className="privacy">
|
||
|
{i18n.Messages.PLATFORM_ACCOUNT_PRIVACY.format({articleURL: HelpdeskUtils.getArticleURL(226430028)})}
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
},
|
||
|
});
|
||
|
|
||
|
export default DetectedPlatformAccountsModal;
|
||
|
|
||
|
|
||
|
|
||
|
// WEBPACK FOOTER //
|
||
|
// ./discord_app/components/DetectedPlatformAccountsModal.js
|