Reader: clean up cardpicking logic / move off sitestore/feedstore (#1…

…1618)

* Simplify CardPicking logic to only exist within PostLifecycle

before this PR, the logic of which card to choose was split between post lifcycle, stream, and search stream.
they also often had their own adapters.  This is one step towards simplifying it by moving all of the selection to postlifecycle.
there is still more work to do here

* split out empty search rec to its own file

* small style change

* revert changes to util

* removed unecessarily changed line

* omit isRecommendation from postKey before searching

* refs made by keyToString, fix onClick handler for CC

* unmodify prop

* put a gap higher up

* fixed gaps

* rejigger blocks to work with new blockedSites prop

* Addressed PR feedback

* also remove changes to wpcom.Undocumented

* transform items first

client/blocks/reader-combined-card/post.jsx

@@ -35,8 +35,8 @@ class ReaderCombinedCardPost extends React.Component {
 	}
 
 	handleCardClick = ( event ) => {
-		const rootNode = ReactDom.findDOMNode( this ),
-			selection = window.getSelection && window.getSelection();
+		const rootNode = ReactDom.findDOMNode( this );
+		const selection = window.getSelection && window.getSelection();
 
 		// if the click has modifier or was not primary, ignore it
 		if ( event.button > 0 || event.metaKey || event.controlKey || event.shiftKey || event.altKey ) {

client/lib/feed-stream-store/post-key.js

@@ -7,8 +7,8 @@ export function keyForPost( post ) {
 	}
 	if ( post.is_external ) {
 		return {
-			feedId: post.feed_ID,
-			postId: post.ID
+			feedId: post.feed_ID || post.site_ID,
+			postId: post.feed_item_ID || post.ID
 		};
 	}
 	return {
@@ -39,19 +39,19 @@ export function keysAreEqual( a, b ) {
 	return a.blogId === b.blogId;
 }
 
-// TODO add support for CombinedCard postKeys + Recs etc.
 export function keyToString( postKey ) {
-	if (
-			! postKey ||
-			postKey.isRecommendationBlock ||
-			postKey.isGap ||
-			postKey.isRecommendation ||
-			postKey.isCombination
-		) {
+	if ( ! postKey || postKey.isGap ) {
 		return null;
 	}
 
 	const feedId = postKey.feedId ? `&feedId=${ postKey.feedId }` : '';
 	const blogId = postKey.blogId ? `&feedId=${ postKey.blogId }` : '';
+
+	if ( postKey.isCombination ) {
+		return `postId=${ postKey.postIds[ 0 ] }${ feedId }${ blogId } `;
+	} else if ( postKey.isRecommendationBlock ) {
+		return `rec-${ postKey.index }`;
+	}
+
 	return `postId=${ postKey.postId }${ feedId }${ blogId } `;
 }

client/reader/search-stream/index.jsx

@@ -2,7 +2,7 @@
  * External Dependencies
  */
 import React, { Component } from 'react';
-import { initial, flatMap, trim, debounce } from 'lodash';
+import { initial, flatMap, trim, debounce, identity } from 'lodash';
 import { localize } from 'i18n-calypso';
 
 /**
@@ -16,94 +16,13 @@ import Stream from 'reader/stream';
 import EmptyContent from './empty';
 import HeaderBack from 'reader/header-back';
 import SearchInput from 'components/search';
-import SiteStore from 'lib/reader-site-store';
-import FeedStore from 'lib/feed-store';
-import { recordTrackForPost, recordAction, recordTrack } from 'reader/stats';
+import { recordAction, recordTrack } from 'reader/stats';
 import SuggestionProvider from './suggestion-provider';
 import Suggestion from './suggestion';
-import ReaderPostCard from 'blocks/reader-post-card';
 import { RelatedPostCard } from 'blocks/reader-related-card-v2';
-import {
-	EMPTY_SEARCH_RECOMMENDATIONS,
-	SEARCH_RESULTS,
-} from 'reader/follow-button/follow-sources';
-
-function RecommendedPosts( { post, site } ) {
-	function handlePostClick() {
-		recordTrackForPost( 'calypso_reader_recommended_post_clicked', post, {
-			recommendation_source: 'empty-search',
-		} );
-		recordAction( 'search_page_rec_post_click' );
-	}
-
-	function handleSiteClick() {
-		recordTrackForPost( 'calypso_reader_recommended_site_clicked', post, {
-			recommendation_source: 'empty-search',
-		} );
-		recordAction( 'search_page_rec_site_click' );
-	}
-
-	if ( ! site ) {
-		site = { title: post.site_name, };
-	}
-
-	return (
-		<div className="search-stream__recommendation-list-item" key={ post.global_ID }>
-			<RelatedPostCard post={ post } site={ site }
-				onSiteClick={ handleSiteClick }
-				onPostClick={ handlePostClick }
-				followSource={ EMPTY_SEARCH_RECOMMENDATIONS } />
-		</div>
-	);
-}
-
-const SearchCardAdapter = ( isRecommendations ) => class extends Component {
-	state = this.getStateFromStores();
-
-	getStateFromStores( props = this.props ) {
-		return {
-			site: SiteStore.get( props.post.site_ID ),
-			feed: props.post.feed_ID ? FeedStore.get( props.post.feed_ID ) : null
-		};
-	}
-
-	componentWillReceiveProps( nextProps ) {
-		this.setState( this.getStateFromStores( nextProps ) );
-	}
-
-	onCardClick = ( post ) => {
-		recordTrackForPost( 'calypso_reader_searchcard_clicked', post );
-		this.props.handleClick();
-	}
-
-	onCommentClick = () => {
-		this.props.handleClick( { comments: true } );
-	}
-
-	render() {
-		let CardComponent;
-
-		if ( isRecommendations ) {
-			CardComponent = RecommendedPosts;
-		} else {
-			CardComponent = ReaderPostCard;
-		}
-
-		return <CardComponent
-			post={ this.props.post }
-			site={ this.props.site }
-			feed={ this.props.feed }
-			onClick={ this.onCardClick }
-			followSource={ SEARCH_RESULTS }
-			onCommentClick={ this.onCommentClick }
-			showPrimaryFollowButton={ this.props.showPrimaryFollowButtonOnCards }
-			postKey={ this.props.postKey }
-		/>;
-	}
-};
+import { SEARCH_RESULTS, } from 'reader/follow-button/follow-sources';
 
 class SearchStream extends Component {
-
 	static propTypes = {
 		query: React.PropTypes.string,
 	};
@@ -148,11 +67,6 @@ class SearchStream extends Component {
 		window.scrollTo( 0, 0 );
 	}
 
-	cardFactory = () => {
-		const isRecommendations = ! this.props.query;
-		return SearchCardAdapter( isRecommendations );
-	}
-
 	handleStreamMounted = ( ref ) => {
 		this.streamRef = ref;
 	}
@@ -215,6 +129,9 @@ class SearchStream extends Component {
 		const { query, suggestions } = this.props;
 		const emptyContent = <EmptyContent query={ query } />;
 		const sortOrder = this.props.postsStore && this.props.postsStore.sortOrder;
+		const transformStreamItems = ( ! query || query === '' )
+			? postKey => ( { ...postKey, isRecommendation: true } )
+			: identity;
 
 		let searchPlaceholderText = this.props.searchPlaceholderText;
 		if ( ! searchPlaceholderText ) {
@@ -246,14 +163,16 @@ class SearchStream extends Component {
 		} );
 
 		return (
-			<Stream { ...this.props }
+			<Stream
+				{ ...this.props }
+				followSource={ SEARCH_RESULTS }
 				listName={ this.props.translate( 'Search' ) }
 				emptyContent={ emptyContent }
 				showFollowInHeader={ true }
-				cardFactory={ this.cardFactory }
 				placeholderFactory={ this.placeholderFactory }
 				className="search-stream"
 				shouldCombineCards={ true }
+				transformStreamItems={ transformStreamItems }
 			>
 				{ this.props.showBack && <HeaderBack /> }
 				<DocumentHead title={ documentTitle } />

client/reader/stream/empty-search-recommended-post.jsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { RelatedPostCard } from 'blocks/reader-related-card-v2';
+import { recordTrackForPost, recordAction } from 'reader/stats';
+import { EMPTY_SEARCH_RECOMMENDATIONS, } from 'reader/follow-button/follow-sources';
+
+export default function EmptySearchRecommendedPost( { post } ) {
+	function handlePostClick() {
+		recordTrackForPost( 'calypso_reader_recommended_post_clicked', post, {
+			recommendation_source: 'empty-search',
+		} );
+		recordAction( 'search_page_rec_post_click' );
+	}
+
+	function handleSiteClick() {
+		recordTrackForPost( 'calypso_reader_recommended_site_clicked', post, {
+			recommendation_source: 'empty-search',
+		} );
+		recordAction( 'search_page_rec_site_click' );
+	}
+
+	const site = { title: post.site_name, };
+
+	return (
+		<div className="search-stream__recommendation-list-item" key={ post.global_ID }>
+			<RelatedPostCard post={ post } site={ site }
+				onSiteClick={ handleSiteClick } onPostClick={ handlePostClick } followSource={ EMPTY_SEARCH_RECOMMENDATIONS } />
+		</div>
+	);
+}