2017-06-08_509bba0/509bba0_unpacked_with_node_modules/discord_app/components/user_settings/UserSettingsPrivacySafety.js

import React from 'react';
import Flux from '../../lib/flux';
import i18n from '../../i18n';
import UserSettingsStore from '../../stores/UserSettingsStore';
import GuildStore from '../../stores/GuildStore';
import FormSection from '../../uikit/form/FormSection';
import SwitchItem from '../../uikit/SwitchItem';
import UserSettingsActionCreators from '../../actions/UserSettingsActionCreators';
import ModalActionCreators from '../../actions/ModalActionCreators';
import FormTitle, {Tags} from '../../uikit/form/FormTitle';
import RadioGroup from '../../uikit/RadioGroup';
import FormText, {Types} from '../../uikit/form/FormText';
import ConfirmModal from '../ConfirmModal';
// import FormDivider from '../../uikit/form/FormDivider';
import {ExplicitContentFilterTypes} from '../../Constants';
import {Colors} from '../../../discord_common/js/Constants';

import type {FriendSourceFlags} from '../../flow/Server';

const FriendSourceFlagKeys = {
  ALL: 'all',
  FRIENDS: 'mutual_friends',
  GUILDS: 'mutual_guilds',
};

class UserSettingsPrivacySafety extends React.PureComponent {
  constructor(props) {
    super(props);
    (this: any).handleChangeDefaultGuildsRestricted = this.handleChangeDefaultGuildsRestricted.bind(this);
    const {defaultGuildsRestricted} = props;
    this.state = {defaultGuildsRestricted};
  }

  componentWillReceiveProps({defaultGuildsRestricted}) {
    if (defaultGuildsRestricted !== this.props.defaultGuildsRestricted) {
      this.setState({defaultGuildsRestricted});
    }
  }

  hasPermittedSourceFlag(sourceFlag: string) {
    const {friendSourceFlags} = this.props;
    const has = flag => friendSourceFlags[flag] === true;

    return has(FriendSourceFlagKeys.ALL) ? true : has(sourceFlag);
  }

  onFieldChange(type: string, checked: boolean) {
    const {friendSourceFlags} = this.props;

    let newFlags;

    if (type === FriendSourceFlagKeys.ALL) {
      if (checked) {
        newFlags = {
          [FriendSourceFlagKeys.ALL]: true,
          [FriendSourceFlagKeys.FRIENDS]: true,
          [FriendSourceFlagKeys.GUILDS]: true,
        };
      } else {
        newFlags = {
          [FriendSourceFlagKeys.ALL]: false,
          [FriendSourceFlagKeys.FRIENDS]: true,
          [FriendSourceFlagKeys.GUILDS]: true,
        };
      }
    } else if (checked) {
      // If all are on, turn all on too
      let turnAllOn = false;
      switch (type) {
        case FriendSourceFlagKeys.FRIENDS:
          turnAllOn = friendSourceFlags[FriendSourceFlagKeys.GUILDS] === true;
          break;
        default:
          turnAllOn = friendSourceFlags[FriendSourceFlagKeys.FRIENDS] === true;
          break;
      }

      newFlags = {
        ...friendSourceFlags,
        [FriendSourceFlagKeys.ALL]: turnAllOn,
        [type]: true,
      };
    } else {
      newFlags = {
        ...friendSourceFlags,
        [FriendSourceFlagKeys.ALL]: false,
        [type]: false,
      };
    }

    this.updatePermittedFriendSourceFlags(newFlags);
  }

  updatePermittedFriendSourceFlags(friendSourceFlags: FriendSourceFlags) {
    UserSettingsActionCreators.updateRemoteSettings({friendSourceFlags});
  }

  handleExplicitContentFilterChange({value}) {
    UserSettingsActionCreators.updateRemoteSettings({explicitContentFilter: value});
  }

  handleChangeDefaultGuildsRestricted({target: {checked: defaultGuildsRestricted}}) {
    defaultGuildsRestricted = !defaultGuildsRestricted;
    this.setState({defaultGuildsRestricted}, () => this.showGuildRestrictionModal(defaultGuildsRestricted));
  }

  showGuildRestrictionModal(defaultGuildsRestricted) {
    ModalActionCreators.push(props => {
      return (
        <ConfirmModal
          header={i18n.Messages.USER_DM_SETTINGS}
          confirmText={i18n.Messages.YES_TEXT}
          cancelText={i18n.Messages.NO_TEXT}
          onConfirm={() => {
            UserSettingsActionCreators.updateRemoteSettings({
              defaultGuildsRestricted,
              restrictedGuilds: defaultGuildsRestricted ? Object.keys(GuildStore.getGuilds()) : [],
            });
          }}
          onCancel={() => {
            UserSettingsActionCreators.updateRemoteSettings({defaultGuildsRestricted});
          }}
          {...props}>
          <p>{i18n.Messages.USER_DM_SETTINGS_QUESTION}</p>
        </ConfirmModal>
      );
    });
  }

  renderFriendSettings() {
    const hasAll = this.hasPermittedSourceFlag(FriendSourceFlagKeys.ALL);

    return (
      <FormSection title={i18n.Messages.FRIEND_PERMITTED_SOURCE}>
        <SwitchItem
          className="margin-top-8 margin-bottom-20"
          value={hasAll}
          onChange={event => this.onFieldChange(FriendSourceFlagKeys.ALL, event.target.checked)}>
          {i18n.Messages.FRIEND_PERMITTED_SOURCE_ALL}
        </SwitchItem>
        <SwitchItem
          value={this.hasPermittedSourceFlag(FriendSourceFlagKeys.FRIENDS)}
          onChange={event => this.onFieldChange(FriendSourceFlagKeys.FRIENDS, event.target.checked)}>
          {i18n.Messages.FRIEND_PERMITTED_SOURCE_MUTUAL_FRIENDS}
        </SwitchItem>
        <SwitchItem
          className="margin-reset"
          value={this.hasPermittedSourceFlag(FriendSourceFlagKeys.GUILDS)}
          onChange={event => this.onFieldChange(FriendSourceFlagKeys.GUILDS, event.target.checked)}>
          {i18n.Messages.FRIEND_PERMITTED_SOURCE_MUTUAL_GUILDS}
        </SwitchItem>
      </FormSection>
    );
  }

  renderDMSafety() {
    const options = [
      {
        name: i18n.Messages.USER_EXPLICIT_CONTENT_FILTER_FRIENDS_AND_NON_FRIENDS,
        desc: i18n.Messages.USER_EXPLICIT_CONTENT_FILTER_FRIENDS_AND_NON_FRIENDS_HELP,
        value: ExplicitContentFilterTypes.FRIENDS_AND_NON_FRIENDS,
        color: Colors.STATUS_GREEN,
      },
      {
        name: i18n.Messages.USER_EXPLICIT_CONTENT_FILTER_NON_FRIENDS,
        desc: i18n.Messages.USER_EXPLICIT_CONTENT_FILTER_NON_FRIENDS_HELP,
        value: ExplicitContentFilterTypes.NON_FRIENDS,
        color: Colors.STATUS_YELLOW,
      },
      {
        name: i18n.Messages.USER_EXPLICIT_CONTENT_FILTER_DISABLED,
        desc: i18n.Messages.USER_EXPLICIT_CONTENT_FILTER_DISABLED_HELP,
        value: ExplicitContentFilterTypes.DISABLED,
        color: Colors.STATUS_RED,
      },
    ];
    return (
      <FormSection className="margin-bottom-40">
        <FormTitle tag={Tags.H5} className="margin-bottom-4">
          {i18n.Messages.USER_EXPLICIT_CONTENT_FILTER}
        </FormTitle>
        <FormText type={Types.DESCRIPTION} className="margin-bottom-8">
          {i18n.Messages.USER_EXPLICIT_CONTENT_FILTER_HELP}
        </FormText>
        <RadioGroup
          value={this.props.explicitContentFilter}
          options={options}
          onChange={this.handleExplicitContentFilterChange}
        />
      </FormSection>
    );
  }

  renderServerPrivacy() {
    return (
      <FormSection className="margin-bottom-40">
        <FormTitle tag={Tags.H5} className="margin-bottom-8">
          {i18n.Messages.USER_DM_SETTINGS}
        </FormTitle>
        <SwitchItem
          className="margin-reset"
          value={!this.state.defaultGuildsRestricted}
          note={i18n.Messages.USER_DM_SETTINGS_HELP}
          onChange={this.handleChangeDefaultGuildsRestricted}>
          {i18n.Messages.NEW_GUILDS_DM_ALLOWED}
        </SwitchItem>
      </FormSection>
    );
  }

  render() {
    return (
      <FormSection tag={Tags.H2} title={i18n.Messages.PRIVACY_AND_SAFETY}>
        {this.renderDMSafety()}
        {this.renderServerPrivacy()}
        {this.renderFriendSettings()}
      </FormSection>
    );
  }
}

function computeFlags() {
  const storedFlags = UserSettingsStore.friendSourceFlags;

  if (storedFlags[FriendSourceFlagKeys.ALL]) {
    return {
      [FriendSourceFlagKeys.ALL]: true,
      [FriendSourceFlagKeys.FRIENDS]: true,
      [FriendSourceFlagKeys.GUILDS]: true,
    };
  }

  return {
    [FriendSourceFlagKeys.ALL]: false,
    [FriendSourceFlagKeys.FRIENDS]: !!storedFlags[FriendSourceFlagKeys.FRIENDS],
    [FriendSourceFlagKeys.GUILDS]: !!storedFlags[FriendSourceFlagKeys.GUILDS],
  };
}

export default Flux.connectStores([UserSettingsStore], () => ({
  friendSourceFlags: computeFlags(),
  explicitContentFilter: UserSettingsStore.explicitContentFilter,
  defaultGuildsRestricted: UserSettingsStore.defaultGuildsRestricted,
}))(UserSettingsPrivacySafety);



// WEBPACK FOOTER //
// ./discord_app/components/user_settings/UserSettingsPrivacySafety.js