<commit_before>import React from 'react';

import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import { FormattedMessage } from 'react-intl';

import {
  Card,
  CardText,
  CardTitle,
} from 'material-ui/Card';

import jwtDecode from 'jwt-decode';

import { connect } from 'react-redux';
import { updateIntl } from 'react-intl-redux';

import { clearState } from '../utils/persist';

import theme from '../utils/theme';
import { languages, storeLocaleForUser } from '../utils/intl';

const styles = {
  wrapper: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
    padding: theme.spacing.desktopGutter,
  },
  card: {
    margin: theme.spacing.desktopGutter,
    flex: 1,
    flexBasis: '450px',
  },
};

const Preferences = ({ activeLanguage, changeLanguage, doClearState, user }) => (
  <div style={styles.wrapper}>
    <Card style={styles.card}>
      <CardTitle
        title={<FormattedMessage id="language" />}
      />
      <CardText>
        <DropDownMenu
          value={activeLanguage}
          onChange={(event, index, locale) => changeLanguage(user, locale)}
        >
          {
            Object.keys(languages).map(language => (
              <MenuItem key={language} value={language} primaryText={languages[language].name} />
            ))
          }
        </DropDownMenu>
      </CardText>
      <CardTitle
        title={<FormattedMessage id="resetState" />}
        subtitle={<FormattedMessage id="resetStateExplanation" />}
      />
      <CardText>
        <RaisedButton label={<FormattedMessage id="resetStateButton" />} secondary onTouchTap={doClearState} />
      </CardText>
    </Card>
  </div>
);

Preferences.propTypes = {
  activeLanguage: React.PropTypes.string.isRequired,
  user: React.PropTypes.shape({
    name: React.PropTypes.string.isRequired,
    scope: React.PropTypes.string.isRequired,
  }).isRequired,
  changeLanguage: React.PropTypes.func.isRequired,
  doClearState: React.PropTypes.func.isRequired,
};

Preferences.defaultProps = {
  user: {
    name: 'Default',
    scope: 'user',
  },
};

export default connect(
  state => ({
    activeLanguage: state.intl.locale,
    user: state.auth.data.token && jwtDecode(state.auth.data.token),
  }),
  dispatch => ({
    changeLanguage: (user, locale) => {
      storeLocaleForUser(user.name, locale);
      dispatch(updateIntl({
        locale,
        messages: languages[locale].translations,
      }));
    },
    doClearState: () => {
      clearState(true);

      // reload app
      location.reload();<commit_msg>Use user.email instead of user.name to support backend-kit<commit_after>import React from 'react';

import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import { FormattedMessage } from 'react-intl';

import {
  Card,
  CardText,
  CardTitle,
} from 'material-ui/Card';

import jwtDecode from 'jwt-decode';

import { connect } from 'react-redux';
import { updateIntl } from 'react-intl-redux';

import { clearState } from '../utils/persist';

import theme from '../utils/theme';
import { languages, storeLocaleForUser } from '../utils/intl';

const styles = {
  wrapper: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
    padding: theme.spacing.desktopGutter,
  },
  card: {
    margin: theme.spacing.desktopGutter,
    flex: 1,
    flexBasis: '450px',
  },
};

const Preferences = ({ activeLanguage, changeLanguage, doClearState, user }) => (
  <div style={styles.wrapper}>
    <Card style={styles.card}>
      <CardTitle
        title={<FormattedMessage id="language" />}
      />
      <CardText>
        <DropDownMenu
          value={activeLanguage}
          onChange={(event, index, locale) => changeLanguage(user, locale)}
        >
          {
            Object.keys(languages).map(language => (
              <MenuItem key={language} value={language} primaryText={languages[language].name} />
            ))
          }
        </DropDownMenu>
      </CardText>
      <CardTitle
        title={<FormattedMessage id="resetState" />}
        subtitle={<FormattedMessage id="resetStateExplanation" />}
      />
      <CardText>
        <RaisedButton label={<FormattedMessage id="resetStateButton" />} secondary onTouchTap={doClearState} />
      </CardText>
    </Card>
  </div>
);

Preferences.propTypes = {
  activeLanguage: React.PropTypes.string.isRequired,
  user: React.PropTypes.shape({
    email: React.PropTypes.string.isRequired,
    scope: React.PropTypes.string.isRequired,
  }).isRequired,
  changeLanguage: React.PropTypes.func.isRequired,
  doClearState: React.PropTypes.func.isRequired,
};

Preferences.defaultProps = {
  user: {
    email: 'Default user',
    scope: 'user',
  },
};

export default connect(
  state => ({
    activeLanguage: state.intl.locale,
    user: state.auth.data.token && jwtDecode(state.auth.data.token),
  }),
  dispatch => ({
    changeLanguage: (user, locale) => {
      storeLocaleForUser(user.email, locale);
      dispatch(updateIntl({
        locale,
        messages: languages[locale].translations,
      }));
    },
    doClearState: () => {
      clearState(true);

      // reload app
      location.reload();
{'fraction_non_alphanumeric': 0.14285714285714285, 'fraction_numerical': 0.0014978468451600825, 'mean_word_length': 3.059270516717325, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1048018', 'n_tokens_mistral': 1637, 'n_tokens_neox': 1616, 'n_words': 317}