Reader janitorial: es6ifying x-post (#11651)

* Reader: es6ify x-post * Use export default in CrossPost
Automattic · Mar 3, 2017 · 6fd91a1 · 6fd91a1
1 parent 25a167b
commit 6fd91a1
Showing 1 changed file with 29 additions and 30 deletions.
diff --git a/client/reader/stream/x-post.jsx b/client/reader/stream/x-post.jsx
@@ -1,41 +1,40 @@
 /**
  * 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 ReactDom from 'react-dom';
+import classnames from 'classnames';
+import url from 'url';
+import { localize } from 'i18n-calypso';
+import closest from 'component-closest';
 
 /**
  * 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
-	},
+		handleClick: React.PropTypes.func.isRequired,
+		translate: React.PropTypes.func.isRequried,
+	}
 
-	handleTitleClick: function( event ) {
+	handleTitleClick = ( 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 ) {
+	handleCardClick = ( event ) => {
 		const rootNode = ReactDom.findDOMNode( this );
 
 		if ( closest( event.target, '.should-scroll', true, rootNode ) ) {
@@ -63,18 +62,18 @@ const CrossPost = React.createClass( {
 			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 +85,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 +98,9 @@ const CrossPost = React.createClass( {
 			} );
 		}
 		return label;
-	},
+	}
 
-	getXPostedToContent: function() {
+	getXPostedToContent = () => {
 		let xPostedToList = this.props.xPostedTo;
 		if ( ! xPostedToList || xPostedToList.length === 0 ) {
 			xPostedToList = [ {
@@ -115,13 +114,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,
@@ -152,6 +151,6 @@ const CrossPost = React.createClass( {
 				</div>
 			</Card> );
 	}
-} );
+}
 
-module.exports = CrossPost;
+export default localize( CrossPost );