<commit_before>import React from "react";
import I18n from "i18n-js";

class Screenshots extends React.Component {
  constructor() {
    super();

    this.state = {
      open: false
    };
  }

  render() {
    let screenshotsUrls = this.props.screenshotUrls;
    if (!screenshotsUrls) {
      screenshotsUrls = [];
    }
    return (
      <div className="mod-screenshots">
        {screenshotsUrls.map(this.renderScreenshotThumbnail)}
        {this.renderOpenScreenshot()}
      </div>
    );
  }

  renderScreenshotThumbnail(screenshot, index) {
    return (
      <a key={index} className="screenshot-thumb" href="#" onClick={this.showScreenshot(index)}>
        <img src={screenshot} />
      </a>
    );
  }

  showScreenshot(index) {
    return function(event) {
      event.preventDefault();
      event.stopPropagation();
      this.setState({ open: true, index: index });
    }.bind(this);
  }

  renderOpenScreenshot() {
    if (this.state.open) {
      return (
        <div className="lightbox-overlay">
          <a href="#" className="close-btn" onClick={this.closeScreenshot}>{I18n.t("apps.detail.close_screenshot")}</a>
          <a href="#" onClick={this.closeScreenshot}>
            <img src={this.props.screenshotUrls[this.state.index]}/>
          </a>
        </div>
      );
    }

    return null;
  }

  closeScreenshot(event) {
    event.preventDefault();
    event.stopPropagation();
    this.setState({ open: false });
  }
}

Screenshots.propTypes = {
  screenshotUrls: React.PropTypes.arrayOf(React.PropTypes.string)
};

export default Screenshots;
<commit_msg>Bind this on the screenshot component<commit_after>import React from "react";
import I18n from "i18n-js";

class Screenshots extends React.Component {
  constructor() {
    super();

    this.state = {
      open: false
    };
  }

  render() {
    let screenshotsUrls = this.props.screenshotUrls;
    if (!screenshotsUrls) {
      screenshotsUrls = [];
    }
    return (
      <div className="mod-screenshots">
        {screenshotsUrls.map(this.renderScreenshotThumbnail.bind(this))}
        {this.renderOpenScreenshot()}
      </div>
    );
  }

  renderScreenshotThumbnail(screenshot, index) {
    return (
      <a key={index} className="screenshot-thumb" href="#" onClick={this.showScreenshot(index)}>
        <img src={screenshot} />
      </a>
    );
  }

  showScreenshot(index) {
    return function(event) {
      event.preventDefault();
      event.stopPropagation();
      this.setState({ open: true, index: index });
    }.bind(this);
  }

  renderOpenScreenshot() {
    if (this.state.open) {
      return (
        <div className="lightbox-overlay">
          <a href="#" className="close-btn" onClick={this.closeScreenshot.bind(this)}>{I18n.t("apps.detail.close_screenshot")}</a>
          <a href="#" onClick={this.closeScreenshot.bind(this)}>
            <img src={this.props.screenshotUrls[this.state.index]}/>
          </a>
        </div>
      );
    }

    return null;
  }

  closeScreenshot(event) {
    event.preventDefault();
    event.stopPropagation();
    this.setState({ open: false });
  }
}

Screenshots.propTypes = {
  screenshotUrls: React.PropTypes.arrayOf(React.PropTypes.string)
};

export default Screenshots;

{'fraction_non_alphanumeric': 0.14893617021276595, 'fraction_numerical': 0.0037002775208140612, 'mean_word_length': 2.8299881936245574, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, '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': '6738303', 'n_tokens_mistral': 1121, 'n_tokens_neox': 1081, 'n_words': 171}