Fix: keyboard clicks on gaps. also es6ify

client/reader/list-gap/index.jsx

@@ -1,51 +1,44 @@
 /**
  * External Dependencies
  */
-var React = require( 'react' ),
-	classnames = require( 'classnames' );
+import React from 'react';
+import classnames from 'classnames';
+import { localize } from 'i18n-calypso';
 
 /**
  * Internal Dependencies
  */
-var FeedStreamStoreActions = require( 'lib/feed-stream-store/actions' ),
-	stats = require( 'reader/stats' );
+import { handleGapClicked } from 'reader/utils';
 
-var Gap = React.createClass( {
+class Gap extends React.Component {
 
-	propTypes: {
+	static propTypes = {
 		gap: React.PropTypes.object.isRequired,
 		store: React.PropTypes.object.isRequired,
 		selected: React.PropTypes.bool
-	},
+	};
 
-	getInitialState: function() {
-		return { isFilling: false };
-	},
+	state = { isFilling: false };
 
-	render: function() {
-		var classes = classnames( {
+	handleClick = () => {
+		this.setState( { isFilling: true } );
+		handleGapClicked( this.props.gap, this.props.store.id );
+	}
+
+	render() {
+		const classes = classnames( {
 			'reader-list-gap': true,
 			'is-filling': this.state.isFilling,
 			'is-selected': this.props.selected
 		} );
+		const { translate } = this.props;
 
 		return (
 			<div className={ classes } onClick={ this.handleClick } >
-				<button type="button" className="button reader-list-gap__button">{ this.translate( 'Load More Posts' ) }</button>
+				<button type="button" className="button reader-list-gap__button">{ translate( 'Load More Posts' ) }</button>
 			</div>
 		);
-	},
-
-	handleClick: function() {
-		FeedStreamStoreActions.fillGap( this.props.store.id, this.props.gap );
-		this.setState( { isFilling: true } );
-		stats.recordAction( 'fill_gap' );
-		stats.recordGaEvent( 'Clicked Fill Gap' );
-		stats.recordTrack( 'calypso_reader_filled_gap', {
-			stream: this.props.store.id
-		} );
 	}
+}
 
-} );
-
-module.exports = Gap;
+export default localize( Gap );

client/reader/stream/index.jsx

@@ -223,7 +223,6 @@ class ReaderStream extends React.Component {
 		const selectedPostKey = this.props.postsStore.getSelectedPostKey();
 		showSelectedPost( {
 			store: this.props.postsStore,
-			selectedGap: selectedPostKey.isGap && selectedPostKey,
 			postKey: selectedPostKey,
 		} );
 	}

client/reader/utils.js

@@ -14,6 +14,8 @@ import FeedDisplayHelper from 'reader/lib/feed-display-helper';
 import PostStore from 'lib/feed-post-store';
 import XPostHelper, { isXPost } from 'reader/xpost-helper';
 import { setLastStoreId } from 'reader/controller-helper';
+import { fillGap } from 'lib/feed-stream-store/actions';
+import { recordAction, recordGaEvent, recordTrack } from 'reader/stats';
 
 export function siteNameFromSiteAndPost( site, post ) {
 	let siteName;
@@ -75,15 +77,15 @@ export function isPostNotFound( post ) {
 	return post.statusCode === 404;
 }
 
-export function showSelectedPost( { store, replaceHistory, selectedGap, postKey, comments } ) {
+export function showSelectedPost( { store, replaceHistory, postKey, comments } ) {
 	if ( ! postKey ) {
 		return;
 	}
 
 	setLastStoreId( store && store.id );
 
 	if ( postKey.isGap === true ) {
-		return selectedGap.handleClick();
+		return handleGapClicked( postKey, store.id );
 	}
 
 	// rec block
@@ -133,6 +135,17 @@ export function showFullXPost( xMetadata ) {
 	}
 }
 
+export function handleGapClicked( postKey, storeId ) {
+	if ( ! postKey || ! postKey.isGap || ! storeId ) {
+		return;
+	}
+
+	fillGap( storeId, postKey );
+	recordAction( 'fill_gap' );
+	recordGaEvent( 'Clicked Fill Gap' );
+	recordTrack( 'calypso_reader_filled_gap', { stream: storeId } );
+}
+
 export function showFullPost( { post, replaceHistory, comments } ) {
 	const hashtag = comments ? '#comments' : '';
 	let query = '';