<commit_before>import React from 'react';
import bem from 'js/bem';
import {QuestionTypeName} from 'js/constants';
import TextBox from 'js/components/common/textBox';

bem.SingleProcessingHeader = bem.create('single-processing-header', 'header');

/**
 * this.props.params properties
 */
type SingleProcessingHeaderProps = {
  questionType: QuestionTypeName | undefined
  questionName: string
  submissionId: string
  submissionsIds: string[]
}

/**
 * This route component is being loaded with PermProtectedRoute so we know that
 * the call to backend to get asset was already made :happy_face:
 */
export default class SingleProcessingHeader extends React.Component<SingleProcessingHeaderProps, {}> {
  constructor(props: SingleProcessingHeaderProps) {
    super(props);
  }

  onDone(evt: React.MouseEvent<HTMLButtonElement>) {
    console.log(evt)
  }

  onSubmissionIndexInputChange(newValue: string) {
    console.log(newValue);
  }

  render() {
    return (
      <bem.SingleProcessingHeader>
        <div>icon in a colorful square: {this.props.questionType}</div>

        <div>
          {this.props.submissionsIds.indexOf(this.props.submissionId) + 1} of {this.props.submissionsIds.length}
          {t('Q: ##question_name##').replace('##question_name', this.props.questionName)}
        </div>

        <div>
          <bem.KoboLightButton>
            {t('< prev')}
          </bem.KoboLightButton>

          <TextBox
            type={'number'}
            value={this.props.submissionsIds.indexOf(this.props.submissionId) + 1}
            onChange={this.onSubmissionIndexInputChange.bind(this)}
          />

          <bem.KoboLightButton>
            {t('next >')}
          </bem.KoboLightButton>
        </div>
<commit_msg>use textbox better<commit_after>import React from 'react';
import bem from 'js/bem';
import {QuestionTypeName} from 'js/constants';
import TextBox, {AvailableType} from 'js/components/common/textBox';

bem.SingleProcessingHeader = bem.create('single-processing-header', 'header');

/**
 * this.props.params properties
 */
type SingleProcessingHeaderProps = {
  questionType: QuestionTypeName | undefined
  questionName: string
  submissionId: string
  submissionsIds: string[]
}

/**
 * This route component is being loaded with PermProtectedRoute so we know that
 * the call to backend to get asset was already made :happy_face:
 */
export default class SingleProcessingHeader extends React.Component<SingleProcessingHeaderProps, {}> {
  constructor(props: SingleProcessingHeaderProps) {
    super(props);
  }

  onDone(evt: React.MouseEvent<HTMLButtonElement>) {
    console.log(evt)
  }

  onSubmissionIndexInputChange(newValue: string) {
    console.log(newValue);
  }

  /**
   * Returns the natural number (first is 1, not 0)
   */
  getCurrentSubmissionNumber(): number {
    return this.props.submissionsIds.indexOf(this.props.submissionId) + 1
  }

  render() {
    return (
      <bem.SingleProcessingHeader>
        <div>icon in a colorful square: {this.props.questionType}</div>

        <div>
          {this.getCurrentSubmissionNumber()} of {this.props.submissionsIds.length}
          {t('Q: ##question_name##').replace('##question_name', this.props.questionName)}
        </div>

        <div>
          <bem.KoboLightButton>
            {t('< prev')}
          </bem.KoboLightButton>

          <TextBox
            type={AvailableType.number}
            value={String(this.getCurrentSubmissionNumber())}
            onChange={this.onSubmissionIndexInputChange.bind(this)}
          />

          <bem.KoboLightButton>
            {t('next >')}
          </bem.KoboLightButton>
        </div>

{'fraction_non_alphanumeric': 0.12151067323481117, 'fraction_numerical': 0.0013683634373289546, 'mean_word_length': 3.196326061997704, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, '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': '6538067', 'n_tokens_mistral': 1085, 'n_tokens_neox': 1061, 'n_words': 219}