From da0224900c44e7ca37bdfb6a4ffa5cd651fff3d2 Mon Sep 17 00:00:00 2001
From: "Jake F - @samouri" <samouri@users.noreply.github.com>
Date: Tue, 28 Mar 2017 16:00:28 -0400
Subject: [PATCH] Fix: keyboard clicks on gaps.  also es6ify

---
 client/reader/list-gap/index.jsx | 45 ++++++++++++++------------------
 client/reader/stream/index.jsx   |  1 -
 client/reader/utils.js           | 17 ++++++++++--
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/client/reader/list-gap/index.jsx b/client/reader/list-gap/index.jsx
index ae8d002a7a76f..1dfdd5caf8495 100644
--- a/client/reader/list-gap/index.jsx
+++ b/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 );
diff --git a/client/reader/stream/index.jsx b/client/reader/stream/index.jsx
index 95f8aac72008e..528e18a83cf63 100644
--- a/client/reader/stream/index.jsx
+++ b/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,
 		} );
 	}
diff --git a/client/reader/utils.js b/client/reader/utils.js
index fe17f4034665b..c709e51b5c026 100644
--- a/client/reader/utils.js
+++ b/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,7 +77,7 @@ 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;
 	}
@@ -83,7 +85,7 @@ export function showSelectedPost( { store, replaceHistory, selectedGap, postKey,
 	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 = '';