<commit_before>import React                            from 'react';
import ReactDOM                         from 'react-dom';

import { FillTheBlankDraggableWord }    from '../draggable_word';
import { FillTheBlankWordDropZone }     from '../drop_zones';
import Word                             from '../word';
import { beginWrap, endWrap }           from '../../../constants/icons';

export default class FillTheBlankWordChain extends React.Component {
  static propTypes = {
    linkWord: React.PropTypes.func.isRequired,
    sentenceWords: React.PropTypes.array.isRequired,
    selectedAnswer: React.PropTypes.object
  }

  constructor() {
    super();

    this.state = {
      wrapIndexes: [0]
    };

    this.wordRefs = {};
  }

  componentDidMount() {
    // We are doing this because for some reason the words have not finished
    // rendering when componentDidMount is called, so we cannot correctly
    // calculate the widths of the words. A 10ms set timeout is enough time.
    setTimeout(() => { this.wrapLines(); }, 10);
  }

  componentDidUpdate() {
    this.wrapLines();
  }

  wrapLines() {
    const lastWord = this.refs[`word-${this.props.sentenceWords.length - 1}`];
    const lastWordDOMNode = ReactDOM.findDOMNode(lastWord);
    // TODO: What needs to happen here to accommodate our test suite?
    const answerBox = ReactDOM.findDOMNode(this.refs["answer-box"]);
    const lastWordRight = lastWordDOMNode.getBoundingClientRect().right;
    const answerBoxRight = answerBox.getBoundingClientRect().right;

    if (lastWordRight > answerBoxRight) {
      let wordRight = lastWordRight;
      let i = this.props.sentenceWords.length - 1;

      while(wordRight > answerBoxRight) {
        const word = ReactDOM.findDOMNode(this.refs[`word-${--i}`]);
        wordRight = word.getBoundingClientRect().right;
      }

      this.setState({ wrapIndexes: this.state.wrapIndexes.concat(i + 1) });
    }
  }

  getLines() {
    return _.map(this.state.wrapIndexes, (wrapIndex, index) => {
      // Get the index of the first word on the next line
      let endWordIndex = this.props.sentenceWords.length;
      if(this.state.wrapIndexes[index + 1]) {
        endWordIndex = this.state.wrapIndexes[index + 1];
      }

      // get the word Ids to show on this line
      let words = _.slice(this.props.sentenceWords, wrapIndex, endWordIndex);

      words = words.map((wordHtml, wordIndex) => {
        if(wordHtml.indexOf("interaction-placeholder") >= 0) {<commit_msg>Remove comment<commit_after>import React                            from 'react';
import ReactDOM                         from 'react-dom';

import { FillTheBlankDraggableWord }    from '../draggable_word';
import { FillTheBlankWordDropZone }     from '../drop_zones';
import Word                             from '../word';
import { beginWrap, endWrap }           from '../../../constants/icons';

export default class FillTheBlankWordChain extends React.Component {
  static propTypes = {
    linkWord: React.PropTypes.func.isRequired,
    sentenceWords: React.PropTypes.array.isRequired,
    selectedAnswer: React.PropTypes.object
  }

  constructor() {
    super();

    this.state = {
      wrapIndexes: [0]
    };

    this.wordRefs = {};
  }

  componentDidMount() {
    // We are doing this because for some reason the words have not finished
    // rendering when componentDidMount is called, so we cannot correctly
    // calculate the widths of the words. A 10ms set timeout is enough time.
    setTimeout(() => { this.wrapLines(); }, 10);
  }

  componentDidUpdate() {
    this.wrapLines();
  }

  wrapLines() {
    const lastWord = this.refs[`word-${this.props.sentenceWords.length - 1}`];
    const lastWordDOMNode = ReactDOM.findDOMNode(lastWord);
    const answerBox = ReactDOM.findDOMNode(this.refs["answer-box"]);
    const lastWordRight = lastWordDOMNode.getBoundingClientRect().right;
    const answerBoxRight = answerBox.getBoundingClientRect().right;

    if (lastWordRight > answerBoxRight) {
      let wordRight = lastWordRight;
      let i = this.props.sentenceWords.length - 1;

      while(wordRight > answerBoxRight) {
        const word = ReactDOM.findDOMNode(this.refs[`word-${--i}`]);
        wordRight = word.getBoundingClientRect().right;
      }

      this.setState({ wrapIndexes: this.state.wrapIndexes.concat(i + 1) });
    }
  }

  getLines() {
    return _.map(this.state.wrapIndexes, (wrapIndex, index) => {
      // Get the index of the first word on the next line
      let endWordIndex = this.props.sentenceWords.length;
      if(this.state.wrapIndexes[index + 1]) {
        endWordIndex = this.state.wrapIndexes[index + 1];
      }

      // get the word Ids to show on this line
      let words = _.slice(this.props.sentenceWords, wrapIndex, endWordIndex);

      words = words.map((wordHtml, wordIndex) => {
        if(wordHtml.indexOf("interaction-placeholder") >= 0) {
{'fraction_non_alphanumeric': 0.118751275249949, 'fraction_numerical': 0.004488879820444807, 'mean_word_length': 2.753445635528331, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, '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': '7322642', 'n_tokens_mistral': 1474, 'n_tokens_neox': 1411, 'n_words': 348}