Reader: clean up cardpicking logic / move off sitestore/feedstore

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>
+	);
+}