<commit_before>const React = require("react");
const LinkMenu = require("content-src/components/LinkMenu/LinkMenu");
const shortURL = require("content-src/lib/short-url");
const {FormattedMessage} = require("react-intl");
const cardContextTypes = require("./types");
const {actionCreators: ac, actionTypes: at} = require("common/Actions.jsm");

/**
 * Card component.
 * Cards are found within a Section component and contain information about a link such
 * as preview image, page title, page description, and some context about if the page
 * was visited, bookmarked, trending etc...
 * Each Section can make an unordered list of Cards which will create one instane of
 * this class. Each card will then get a context menu which reflects the actions that
 * can be done on this Card.
 */
class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showContextMenu: false, activeCard: null};
    this.onMenuButtonClick = this.onMenuButtonClick.bind(this);
    this.onMenuUpdate = this.onMenuUpdate.bind(this);
    this.onLinkClick = this.onLinkClick.bind(this);
  }
  onMenuButtonClick(event) {
    event.preventDefault();
    this.setState({
      activeCard: this.props.index,
      showContextMenu: true
    });
  }
  onLinkClick(event) {
    event.preventDefault();
    this.props.dispatch(ac.SendToMain({type: at.OPEN_LINK, data: this.props.link}));
    this.props.dispatch(ac.UserEvent({
      event: "CLICK",
      source: this.props.eventSource,
      action_position: this.props.index
    }));
  }
  onMenuUpdate(showContextMenu) {
    this.setState({showContextMenu});
  }
  render() {
    const {index, link, dispatch, contextMenuOptions} = this.props;
    const isContextMenuOpen = this.state.showContextMenu && this.state.activeCard === index;
    const hostname = shortURL(link);
    const {icon, intlID} = cardContextTypes[link.type];

    return (<li className={`card-outer${isContextMenuOpen ? " active" : ""}`}>
      <a href={link.url} onClick={this.onLinkClick}>
        <div className="card">
          {link.image && <div className="card-preview-image" style={{backgroundImage: `url(${link.image})`}} />}
          <div className="card-details">
            <div className="card-host-name"> {hostname} </div>
            <div className={`card-text${link.image ? "" : " full-height"}`}>
              <h4 className="card-title" dir="auto"> {link.title} </h4>
              <p className="card-description" dir="auto"> {link.description} </p>
            </div>
            <div className="card-context">
              <span className={`card-context-icon icon icon-${icon}`} />
              <div className="card-context-label"><FormattedMessage id={intlID} defaultMessage="Visited" /></div>
            </div>
          </div>
        </div>
      </a>
      <button className="context-menu-button"
        onClick={this.onMenuButtonClick}>
        <span className="sr-only">{`Open context menu for ${link.title}`}</span>
      </button>
      <LinkMenu
        dispatch={dispatch}
        index={index}
        onUpdate={this.onMenuUpdate}
        options={link.context_menu_options || contextMenuOptions}
        site={link}
        visible={isContextMenuOpen} />
   </li>);
  }
}
module.exports = Card;<commit_msg>fix(systemaddon): Closes #3016 Add SOURCE to LinkMenu telemetry pings<commit_after>const React = require("react");
const LinkMenu = require("content-src/components/LinkMenu/LinkMenu");
const shortURL = require("content-src/lib/short-url");
const {FormattedMessage} = require("react-intl");
const cardContextTypes = require("./types");
const {actionCreators: ac, actionTypes: at} = require("common/Actions.jsm");

/**
 * Card component.
 * Cards are found within a Section component and contain information about a link such
 * as preview image, page title, page description, and some context about if the page
 * was visited, bookmarked, trending etc...
 * Each Section can make an unordered list of Cards which will create one instane of
 * this class. Each card will then get a context menu which reflects the actions that
 * can be done on this Card.
 */
class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showContextMenu: false, activeCard: null};
    this.onMenuButtonClick = this.onMenuButtonClick.bind(this);
    this.onMenuUpdate = this.onMenuUpdate.bind(this);
    this.onLinkClick = this.onLinkClick.bind(this);
  }
  onMenuButtonClick(event) {
    event.preventDefault();
    this.setState({
      activeCard: this.props.index,
      showContextMenu: true
    });
  }
  onLinkClick(event) {
    event.preventDefault();
    this.props.dispatch(ac.SendToMain({type: at.OPEN_LINK, data: this.props.link}));
    this.props.dispatch(ac.UserEvent({
      event: "CLICK",
      source: this.props.eventSource,
      action_position: this.props.index
    }));
  }
  onMenuUpdate(showContextMenu) {
    this.setState({showContextMenu});
  }
  render() {
    const {index, link, dispatch, contextMenuOptions, eventSource} = this.props;
    const isContextMenuOpen = this.state.showContextMenu && this.state.activeCard === index;
    const hostname = shortURL(link);
    const {icon, intlID} = cardContextTypes[link.type];

    return (<li className={`card-outer${isContextMenuOpen ? " active" : ""}`}>
      <a href={link.url} onClick={this.onLinkClick}>
        <div className="card">
          {link.image && <div className="card-preview-image" style={{backgroundImage: `url(${link.image})`}} />}
          <div className="card-details">
            <div className="card-host-name"> {hostname} </div>
            <div className={`card-text${link.image ? "" : " full-height"}`}>
              <h4 className="card-title" dir="auto"> {link.title} </h4>
              <p className="card-description" dir="auto"> {link.description} </p>
            </div>
            <div className="card-context">
              <span className={`card-context-icon icon icon-${icon}`} />
              <div className="card-context-label"><FormattedMessage id={intlID} defaultMessage="Visited" /></div>
            </div>
          </div>
        </div>
      </a>
      <button className="context-menu-button"
        onClick={this.onMenuButtonClick}>
        <span className="sr-only">{`Open context menu for ${link.title}`}</span>
      </button>
      <LinkMenu
        dispatch={dispatch}
        index={index}
        source={eventSource}
        onUpdate={this.onMenuUpdate}
        options={link.context_menu_options || contextMenuOptions}
        site={link}
        visible={isContextMenuOpen} />
   </li>);
  }
}
module.exports = Card;
{'fraction_non_alphanumeric': 0.14414685525127896, 'fraction_numerical': 0.0012037315678603672, 'mean_word_length': 3.280103026400515, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, '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': '7144033', 'n_tokens_mistral': 1931, 'n_tokens_neox': 1937, 'n_words': 449}