es6ify + remove redundant parts of x-post

client/reader/stream/x-post.jsx

@@ -1,80 +1,37 @@
 /**
  * External Dependencies
  */
-const ReactDom = require( 'react-dom' ),
-	React = require( 'react' ),
-	PureRenderMixin = require( 'react-pure-render/mixin' ),
-	classnames = require( 'classnames' ),
-	closest = require( 'component-closest' ),
-	url = require( 'url' );
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import url from 'url';
+import { localize } from 'i18n-calypso';
 
 /**
  * Internal Dependencies
  */
-const Card = require( 'components/card' ),
-	SiteAndAuthorIcon = require( 'reader/site-and-author-icon' );
+import Card from 'components/card';
+import SiteAndAuthorIcon from 'reader/site-and-author-icon';
 
-const CrossPost = React.createClass( {
+class CrossPost extends PureComponent {
 
-	mixins: [ PureRenderMixin ],
-
-	propTypes: {
+	static propTypes = {
 		post: React.PropTypes.object.isRequired,
 		isSelected: React.PropTypes.bool.isRequired,
 		xMetadata: React.PropTypes.object.isRequired,
 		xPostedTo: React.PropTypes.array,
 		handleClick: React.PropTypes.func.isRequired
-	},
-
-	handleTitleClick: function( event ) {
-		// modified clicks should let the default action open a new tab/window
-		if ( event.button > 0 || event.metaKey || event.controlKey || event.shiftKey || event.altKey ) {
-			return;
-		}
-		event.preventDefault();
-		this.props.handleClick( this.props.xMetadata );
-	},
-
-	handleCardClick: function( event ) {
-		const rootNode = ReactDom.findDOMNode( this );
-
-		if ( closest( event.target, '.should-scroll', true, rootNode ) ) {
-			setTimeout( function() {
-				window.scrollTo( 0, 0 );
-			}, 100 );
-		}
-
-		if ( closest( event.target, '.ignore-click', true, rootNode ) ) {
-			return;
-		}
-
-		// ignore clicks on anchors inside inline content
-		if ( closest( event.target, 'a', true, rootNode ) && closest( event.target, '.reader__x-post', true, rootNode ) ) {
-			return;
-		}
-
-		// if the click has modifier, ignore it
-		if ( event.metaKey || event.controlKey || event.shiftKey || event.altKey ) {
-			return;
-		}
-
-		// programattic ignore
-		if ( ! event.defaultPrevented ) { // some child handled it
-			event.preventDefault();
-			this.props.handleClick( this.props.xMetadata );
-		}
-	},
+	}
 
-	getSiteNameFromURL: function( siteURL ) {
+	getSiteNameFromURL = ( siteURL ) => {
 		return `+${ url.parse( siteURL ).hostname.split( '.' )[ 0 ] }`;
-	},
+	}
 
-	getDescription: function( authorFirstName ) {
+	getDescription = ( authorFirstName ) => {
 		let label;
 		const siteName = this.getSiteNameFromURL( this.props.xMetadata.siteURL );
 		const isCrossComment = !! this.props.xMetadata.commentURL;
 		if ( isCrossComment ) {
-			label = this.translate( '{{author}}%(authorFirstName)s{{/author}} {{label}}left a comment on %(siteName)s, cross-posted to{{/label}} {{blogNames/}}', {
+			label = this.props.translate( '{{author}}%(authorFirstName)s{{/author}} {{label}}left a comment on %(siteName)s, cross-posted to{{/label}} {{blogNames/}}', {
 				args: {
 					siteName: siteName,
 					authorFirstName: authorFirstName
@@ -86,7 +43,7 @@ const CrossPost = React.createClass( {
 				}
 			} );
 		} else {
-			label = this.translate( '{{author}}%(authorFirstName)s{{/author}} {{label}}cross-posted from %(siteName)s to{{/label}} {{blogNames/}}', {
+			label = this.props.translate( '{{author}}%(authorFirstName)s{{/author}} {{label}}cross-posted from %(siteName)s to{{/label}} {{blogNames/}}', {
 				args: {
 					siteName: siteName,
 					authorFirstName: authorFirstName
@@ -99,9 +56,9 @@ const CrossPost = React.createClass( {
 			} );
 		}
 		return label;
-	},
+	}
 
-	getXPostedToContent: function() {
+	getXPostedToContent = () => {
 		let xPostedToList = this.props.xPostedTo;
 		if ( ! xPostedToList || xPostedToList.length === 0 ) {
 			xPostedToList = [ {
@@ -115,13 +72,13 @@ const CrossPost = React.createClass( {
 					{ xPostedTo.siteName }
 					{ index + 2 < array.length ? <span>, </span> : null }
 					{ index + 2 === array.length ?
-						<span> { this.translate( 'and', { comment: 'last conjuction in a list of blognames: (blog1, blog2,) blog3 _and_ blog4' } ) } </span> : null }
+						<span> { this.props.translate( 'and', { comment: 'last conjuction in a list of blognames: (blog1, blog2,) blog3 _and_ blog4' } ) } </span> : null }
 				</span>
 			);
 		} );
-	},
+	}
 
-	render: function() {
+	render() {
 		const post = this.props.post,
 			articleClasses = classnames( {
 				reader__card: true,
@@ -135,23 +92,29 @@ const CrossPost = React.createClass( {
 		xpostTitle = xpostTitle.replace( /x-post:/i, '' );
 
 		return (
-			<Card tagName="article" onClick={ this.handleCardClick } className={ articleClasses }>
+			<Card tagName="article" onClick={ this.props.handleClick } className={ articleClasses }>
 				<SiteAndAuthorIcon
 					siteId={ this.props.post.site_ID }
 					isExternal={ this.props.post.is_external }
 					user={ post.author }
-					onClick={ this.handleTitleClick }
+					onClick={ this.props.handleClick }
 					href={ post.URL } />
 				<div className="reader__x-post">
 					{ post.title &&
 						<h1 className="reader__post-title">
-							<a className="reader__post-title-link" onClick={ this.handleTitleClick } href={ post.URL } target="_blank" rel="noopener noreferrer">{ xpostTitle }</a>
+							<a className="reader__post-title-link"
+									onClick={ this.props.handleClick }
+									href={ post.URL }
+									target="_blank"
+									rel="noopener noreferrer">
+								{ xpostTitle }
+							</a>
 						</h1>
 						}
 					{ this.getDescription( post.author.first_name ) }
 				</div>
 			</Card> );
 	}
-} );
+}
 
-module.exports = CrossPost;
+module.exports = localize( CrossPost );