<commit_before>import {actionCreators as ac} from "common/Actions.jsm";
import {connect} from "react-redux";
import React from "react";
import {SpocIntersectionObserver} from "content-src/components/DiscoveryStreamComponents/SpocIntersectionObserver/SpocIntersectionObserver";

/**
 * @note exported for testing only
 */
export class ListItem extends React.PureComponent {
  // TODO performance: get feeds to send appropriately sized images rather
  // than waiting longer and scaling down on client?
  constructor(props) {
    super(props);
    this.onLinkClick = this.onLinkClick.bind(this);
  }

  onLinkClick(event) {
    if (this.props.dispatch) {
      this.props.dispatch(ac.UserEvent({
        event: "CLICK",
        source: this.props.type.toUpperCase(),
        action_position: this.props.index,
      }));

      this.props.dispatch(ac.ImpressionStats({
        source: this.props.type.toUpperCase(),
        click: 0,
        tiles: [{id: this.props.id, pos: this.props.index}],
      }));
    }
  }

  render() {
    return (
      <SpocIntersectionObserver campaignId={this.props.campaignId} dispatch={this.props.dispatch}>
        <li className="ds-list-item">
          <a className="ds-list-item-link" href={this.props.url} onClick={this.onLinkClick}>
            <div className="ds-list-item-text">
              <div className="ds-list-item-title">{this.props.title}</div>
              {this.props.excerpt && <div className="ds-list-item-excerpt">{this.props.excerpt}</div>}
              <p>
                {this.props.context && (
                  <span>
                    <span className="ds-list-item-context">{this.props.context}</span>
                    <br />
                  </span>
                )}
                <span className="ds-list-item-info">{this.props.domain}</span>
              </p>
            </div>
            <div className="ds-list-image" style={{backgroundImage: `url(${this.props.image_src})`}} />
          </a>
        </li>
      </SpocIntersectionObserver>
    );
  }
}

/**
 * @note exported for testing only
 */
export function _List(props) {
  const feed = props.data;
  if (!feed || !feed.recommendations) {<commit_msg>Fixing li (#4782)<commit_after>import {actionCreators as ac} from "common/Actions.jsm";
import {connect} from "react-redux";
import React from "react";
import {SpocIntersectionObserver} from "content-src/components/DiscoveryStreamComponents/SpocIntersectionObserver/SpocIntersectionObserver";

/**
 * @note exported for testing only
 */
export class ListItem extends React.PureComponent {
  // TODO performance: get feeds to send appropriately sized images rather
  // than waiting longer and scaling down on client?
  constructor(props) {
    super(props);
    this.onLinkClick = this.onLinkClick.bind(this);
  }

  onLinkClick(event) {
    if (this.props.dispatch) {
      this.props.dispatch(ac.UserEvent({
        event: "CLICK",
        source: this.props.type.toUpperCase(),
        action_position: this.props.index,
      }));

      this.props.dispatch(ac.ImpressionStats({
        source: this.props.type.toUpperCase(),
        click: 0,
        tiles: [{id: this.props.id, pos: this.props.index}],
      }));
    }
  }

  render() {
    return (
      <li className="ds-list-item">
        <SpocIntersectionObserver campaignId={this.props.campaignId} dispatch={this.props.dispatch}>
          <a className="ds-list-item-link" href={this.props.url} onClick={this.onLinkClick}>
            <div className="ds-list-item-text">
              <div className="ds-list-item-title">{this.props.title}</div>
              {this.props.excerpt && <div className="ds-list-item-excerpt">{this.props.excerpt}</div>}
              <p>
                {this.props.context && (
                  <span>
                    <span className="ds-list-item-context">{this.props.context}</span>
                    <br />
                  </span>
                )}
                <span className="ds-list-item-info">{this.props.domain}</span>
              </p>
            </div>
            <div className="ds-list-image" style={{backgroundImage: `url(${this.props.image_src})`}} />
          </a>
        </SpocIntersectionObserver>
      </li>
    );
  }
}

/**
 * @note exported for testing only
 */
export function _List(props) {
  const feed = props.data;
  if (!feed || !feed.recommendations) {
{'fraction_non_alphanumeric': 0.14666970802919707, 'fraction_numerical': 0.0013686131386861315, 'mean_word_length': 2.428459734167318, 'pattern_counts': {'":': 0, '<': 47, '<?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': '4554140', 'n_tokens_mistral': 1332, 'n_tokens_neox': 1291, 'n_words': 242}