<commit_before>import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import c from 'classnames';
import FlatButton from 'material-ui/FlatButton';
import {Link} from 'react-router';
import {isArray} from 'lodash';
import ChevronRightIcon from 'material-ui/svg-icons/navigation/chevron-right';
import ChevronLeftIcon from 'material-ui/svg-icons/navigation/chevron-left';
import {hashHistory} from 'react-router';

import {getFolder} from './../../redux/modules/folder';
import {getEntry, updateEntry} from './../../redux/modules/entry';
import {setSnackBarParams} from './../../redux/modules/ui';
import injectF from './../../helpers/injectF';
import resolve from './../../helpers/resolve';
import injectPush from './../../helpers/injectPush';
import TopBar from './../../components/TopBar/TopBar';
import Breadcrumb from './../Breadcrumb/Breadcrumb';
import EditEntryForm from './../../components/EditEntryForm/EditEntryForm';
import filterLastContinuousUndefinedValues from './../../helpers/filterLastContinuousUndefinedValues';
import renderContentFields from './renderContentFields';
import hasValue from './../../helpers/hasValue';
import getFontSize from './../../helpers/getFontSize';

const styles = require('./PageEntry.scss');

@connect(({main, folder, entry}) => ({
  folder: folder.get('folder'),
  entry: entry.get('entry'),
  interfaceFontSizeScalingFactor: main.get('interfaceFontSizeScalingFactor'),
  contentFontSizeScalingFactor: main.get('contentFontSizeScalingFactor'),
  nextEntryId: entry.get('nextEntryId'),
  prevEntryId: entry.get('prevEntryId'),
  importingFolderId: folder.get('importingFolderId')
}), {setSnackBarParams, updateEntry, getEntry})
@injectF
@injectPush
@resolve(({dispatch, getState}, {params}) => {
  const promises = [];
  promises.push(dispatch(getFolder({id: params.folderId})));
  promises.push(dispatch(getEntry({id: params.entryId})));
  return Promise.all(promises);
})
export default class PageEntry extends Component {

  static propTypes = {
    f: PropTypes.func.isRequired,
    folder: PropTypes.object.isRequired,
    entry: PropTypes.object.isRequired,
    interfaceFontSizeScalingFactor: PropTypes.number.isRequired,
    contentFontSizeScalingFactor: PropTypes.number.isRequired,
    nextEntryId: PropTypes.number,
    prevEntryId: PropTypes.number,
    params: PropTypes.object.isRequired,
    setSnackBarParams: PropTypes.func.isRequired,
    getEntry: PropTypes.func.isRequired,
    updateEntry: PropTypes.func.isRequired,
    push: PropTypes.func.isRequired,
    importingFolderId: PropTypes.number
  };

  componentWillReceiveProps(nextProps) {

    const {params, getEntry} = this.props;
    const {entryId} = params;
    const nextEntryId = nextProps.params.entryId;

    if (entryId !== nextEntryId) {
      getEntry({id: nextEntryId});
    }
  }

  constructor(props) {
    super(props);
    this.state = {isEditMode: false};
  }

  goToFoldersPage = () => this.props.push('/');

  renderContentFields() {
    const {entry: {data}, f, folder} = this.props;
    const {targetLanguages, contentFields} = folder.data;
    return renderContentFields({f, data, contentFields, targetLanguages});
  }

  handleSubmit = async (rawData) => {

    const {entry, updateEntry, setSnackBarParams, f} = this.props;

    const data = Object.keys(rawData).reduce((obj, prop) => {
      const value = rawData[prop];
      obj[prop] = isArray(value) ? filterLastContinuousUndefinedValues(value) : value;
      return obj;
    }, {});

    await updateEntry({
      id: entry.id,
      data
    });
    setSnackBarParams(true, f('folder-entry-has-been-updated', {sourceEntry: data.sourceEntry}));
    this.setState({isEditMode: false});
  };

  isImporting = () => {
    const {folder, importingFolderId} = this.props;
    return (folder.id === importingFolderId);
  };

  setEditMode = () => this.setState({isEditMode: true});

  renderContent() {

    const {isEditMode} = this.state;
    const {f, folder, entry, contentFontSizeScalingFactor} = this.props;

    const initialValues = {
      entryId: entry.id,
      folderId: folder.id,
      sourceEntry: entry.sourceEntry,
      ...entry.data
    };

    if (isEditMode) {
      return <EditEntryForm ref="editEntryForm" onSubmit={this.handleSubmit} folder={folder} initialValues={initialValues} />;
    }

    const tableFontSize = getFontSize(contentFontSizeScalingFactor, 1);

    return (
      <table className={styles.table} style={{fontSize: tableFontSize}}>
        <tbody>
          <tr>
            <th>{f('source-entry-lang', {lang: f(folder.data.sourceLanguage)})}</th>
            <td>{entry.sourceEntry}</td>
          </tr>
          {this.renderContentFields()}
        </tbody>
      </table>
    );
  }

  cancelEdit = () => this.setState({isEditMode: false});<commit_msg>display pageNum in PageEntry<commit_after>import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import c from 'classnames';
import FlatButton from 'material-ui/FlatButton';
import {Link} from 'react-router';
import {isArray} from 'lodash';
import ChevronRightIcon from 'material-ui/svg-icons/navigation/chevron-right';
import ChevronLeftIcon from 'material-ui/svg-icons/navigation/chevron-left';
import {hashHistory} from 'react-router';

import {getFolder} from './../../redux/modules/folder';
import {getEntry, updateEntry} from './../../redux/modules/entry';
import {setSnackBarParams} from './../../redux/modules/ui';
import injectF from './../../helpers/injectF';
import resolve from './../../helpers/resolve';
import injectPush from './../../helpers/injectPush';
import TopBar from './../../components/TopBar/TopBar';
import Breadcrumb from './../Breadcrumb/Breadcrumb';
import EditEntryForm from './../../components/EditEntryForm/EditEntryForm';
import filterLastContinuousUndefinedValues from './../../helpers/filterLastContinuousUndefinedValues';
import renderContentFields from './renderContentFields';
import hasValue from './../../helpers/hasValue';
import getFontSize from './../../helpers/getFontSize';

const styles = require('./PageEntry.scss');

@connect(({main, folder, entry}) => ({
  folder: folder.get('folder'),
  entry: entry.get('entry'),
  interfaceFontSizeScalingFactor: main.get('interfaceFontSizeScalingFactor'),
  contentFontSizeScalingFactor: main.get('contentFontSizeScalingFactor'),
  nextEntryId: entry.get('nextEntryId'),
  prevEntryId: entry.get('prevEntryId'),
  importingFolderId: folder.get('importingFolderId')
}), {setSnackBarParams, updateEntry, getEntry})
@injectF
@injectPush
@resolve(({dispatch, getState}, {params}) => {
  const promises = [];
  promises.push(dispatch(getFolder({id: params.folderId})));
  promises.push(dispatch(getEntry({id: params.entryId})));
  return Promise.all(promises);
})
export default class PageEntry extends Component {

  static propTypes = {
    f: PropTypes.func.isRequired,
    folder: PropTypes.object.isRequired,
    entry: PropTypes.object.isRequired,
    interfaceFontSizeScalingFactor: PropTypes.number.isRequired,
    contentFontSizeScalingFactor: PropTypes.number.isRequired,
    nextEntryId: PropTypes.number,
    prevEntryId: PropTypes.number,
    params: PropTypes.object.isRequired,
    setSnackBarParams: PropTypes.func.isRequired,
    getEntry: PropTypes.func.isRequired,
    updateEntry: PropTypes.func.isRequired,
    push: PropTypes.func.isRequired,
    importingFolderId: PropTypes.number
  };

  componentWillReceiveProps(nextProps) {

    const {params, getEntry} = this.props;
    const {entryId} = params;
    const nextEntryId = nextProps.params.entryId;

    if (entryId !== nextEntryId) {
      getEntry({id: nextEntryId});
    }
  }

  constructor(props) {
    super(props);
    this.state = {isEditMode: false};
  }

  goToFoldersPage = () => this.props.push('/');

  renderContentFields() {
    const {entry: {data}, f, folder} = this.props;
    const {targetLanguages, contentFields} = folder.data;
    return renderContentFields({f, data, contentFields, targetLanguages});
  }

  handleSubmit = async (rawData) => {

    const {entry, updateEntry, setSnackBarParams, f} = this.props;

    const data = Object.keys(rawData).reduce((obj, prop) => {
      const value = rawData[prop];
      obj[prop] = isArray(value) ? filterLastContinuousUndefinedValues(value) : value;
      return obj;
    }, {});

    await updateEntry({
      id: entry.id,
      data
    });
    setSnackBarParams(true, f('folder-entry-has-been-updated', {sourceEntry: data.sourceEntry}));
    this.setState({isEditMode: false});
  };

  isImporting = () => {
    const {folder, importingFolderId} = this.props;
    return (folder.id === importingFolderId);
  };

  setEditMode = () => this.setState({isEditMode: true});

  renderContent() {

    const {isEditMode} = this.state;
    const {f, folder, entry, contentFontSizeScalingFactor} = this.props;

    const initialValues = {
      entryId: entry.id,
      folderId: folder.id,
      sourceEntry: entry.sourceEntry,
      pageNum: entry.pageNum,
      ...entry.data
    };

    if (isEditMode) {
      return <EditEntryForm ref="editEntryForm" onSubmit={this.handleSubmit} folder={folder} initialValues={initialValues} />;
    }

    const tableFontSize = getFontSize(contentFontSizeScalingFactor, 1);

    let pageNumTr;

    if (entry.pageNum) {
      pageNumTr = (
        <tr>
          <th>{f('page-num')}</th>
          <td>{entry.pageNum}</td>
        </tr>
      );
    }

    return (
      <table className={styles.table} style={{fontSize: tableFontSize}}>
        <tbody>
          <tr>
            <th>{f('source-entry-lang', {lang: f(folder.data.sourceLanguage)})}</th>
            <td>{entry.sourceEntry}</td>
          </tr>
          {pageNumTr}
          {this.renderContentFields()}
        </tbody>
      </table>
    );
  }

  cancelEdit = () => this.setState({isEditMode: false});
{'fraction_non_alphanumeric': 0.15138959070237493, 'fraction_numerical': 0.000202122283981809, 'mean_word_length': 3.8462291870714984, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 47, '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': '2872771', 'n_tokens_mistral': 2987, 'n_tokens_neox': 2979, 'n_words': 600}