Replace Subscriptions section available on Reader sidebar with Popula…

…r sites section (#96954)

* In Reader recent screen replaced `ReaderListFollowedSites` component with `ReaderPopularSitesSidebar`
* Added `title` prop in `ReaderPopularSitesSidebar` component to make `title` implementation consistent.
* Removed the unused `ReaderListFollowedSites` component.

client/reader/discover/discover-stream.js

@@ -100,25 +100,21 @@ const DiscoverStream = ( props ) => {
 	const streamSidebar = () => {
 		if ( selectedTab === FIRST_POSTS_TAB && recommendedSites?.length ) {
 			return (
-				<>
-					<h2>{ translate( 'New sites' ) }</h2>
-					<ReaderPopularSitesSidebar
-						items={ recommendedSites }
-						followSource={ READER_DISCOVER_POPULAR_SITES }
-					/>
-				</>
+				<ReaderPopularSitesSidebar
+					items={ recommendedSites }
+					followSource={ READER_DISCOVER_POPULAR_SITES }
+					title={ translate( 'New sites' ) }
+				/>
 			);
 		}
 
 		if ( ( isDefaultTab || selectedTab === 'latest' ) && recommendedSites?.length ) {
 			return (
-				<>
-					<h2>{ translate( 'Popular sites' ) }</h2>
-					<ReaderPopularSitesSidebar
-						items={ recommendedSites }
-						followSource={ READER_DISCOVER_POPULAR_SITES }
-					/>
-				</>
+				<ReaderPopularSitesSidebar
+					items={ recommendedSites }
+					followSource={ READER_DISCOVER_POPULAR_SITES }
+					title={ translate( 'Popular sites' ) }
+				/>
 			);
 		} else if ( ! ( isDefaultTab || selectedTab === 'latest' ) ) {
 			return <ReaderTagSidebar tag={ selectedTab } showFollow />;

client/reader/follow-sources.jsx → client/reader/follow-sources.ts

@@ -3,5 +3,6 @@ export const IN_STREAM_RECOMMENDATION = 'in-stream-recommendation';
 export const SEARCH_RESULTS_SITES = 'search-results-sites';
 export const READER_POST_OPTIONS_MENU = 'reader-post-options-menu';
 export const READER_SUGGESTED_FOLLOWS_DIALOG = 'reader-suggested-follows-dialog';
+export const READER_RECENT_SIDEBAR_POPULAR_SITES = 'reader-recent-sidebar-popular-sites';
 export const READER_SEARCH_POPULAR_SITES = 'reader-search-popular-sites';
 export const READER_DISCOVER_POPULAR_SITES = 'reader-discover-popular-sites';

client/reader/following/main.tsx

@@ -10,8 +10,8 @@ import withDimensions from 'calypso/lib/with-dimensions';
 import ReaderOnboarding from 'calypso/reader/onboarding';
 import SuggestionProvider from 'calypso/reader/search-stream/suggestion-provider';
 import ReaderStream, { WIDE_DISPLAY_CUTOFF } from 'calypso/reader/stream';
-import ReaderListFollowedSites from 'calypso/reader/stream/reader-list-followed-sites';
 import Recent from '../recent';
+import ReaderStreamSidebar from './reader-stream-sidebar';
 import { useFollowingView } from './view-preference';
 import ViewToggle from './view-toggle';
 import './style.scss';
@@ -70,7 +70,7 @@ function FollowingStream( { ...props } ) {
 				<ReaderStream
 					{ ...props }
 					className="following"
-					streamSidebar={ () => <ReaderListFollowedSites path={ window.location.pathname } /> }
+					streamSidebar={ () => <ReaderStreamSidebar /> }
 				>
 					<BloganuaryHeader />
 					<NavigationHeader

client/reader/following/reader-stream-sidebar.tsx

@@ -0,0 +1,54 @@
+import { translate } from 'i18n-calypso';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Dispatch } from 'redux';
+import { RecommendedSite } from 'calypso/state/data-layer/wpcom/read/recommendations/sites';
+import {
+	RecommendedSitesRequestAction,
+	requestRecommendedSites,
+} from 'calypso/state/reader/recommended-sites/actions';
+import { getReaderRecommendedSites } from 'calypso/state/reader/recommended-sites/selectors';
+import { READER_RECENT_SIDEBAR_POPULAR_SITES } from '../follow-sources';
+import ReaderPopularSitesSidebar from '../stream/reader-popular-sites-sidebar';
+
+export const RECOMMENDED_SITES_SEED = Math.floor( Math.random() * 10001 );
+
+function ReaderStreamSidebar(): JSX.Element | null {
+	const dispatch = useDispatch< Dispatch< RecommendedSitesRequestAction > >();
+	const recommendedSites = useSelector( ( state ) => {
+		return getReaderRecommendedSites< RecommendedSite >( state, RECOMMENDED_SITES_SEED ) || [];
+	} );
+
+	useEffect( () => {
+		// Avoid fetching recommended sites if they are already present in the store.
+		if ( recommendedSites.length > 0 ) {
+			return;
+		}
+
+		dispatch( requestRecommendedSites( { seed: RECOMMENDED_SITES_SEED, number: 10 } ) );
+	}, [ dispatch, recommendedSites ] );
+
+	if ( recommendedSites.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<ReaderPopularSitesSidebar
+			followSource={ READER_RECENT_SIDEBAR_POPULAR_SITES }
+			items={ recommendedSites.map( ( s ) => {
+				return {
+					blogId: s.blogId,
+					feed_ID: s.feedId,
+					feed_URL: s.feedUrl,
+					site_name: s.title,
+					site_description: s.description,
+					site_icon: s.icon,
+					url: s.url,
+				};
+			} ) }
+			title={ translate( 'Popular sites' ) }
+		/>
+	);
+}
+
+export default ReaderStreamSidebar;

client/reader/stream/reader-popular-sites-sidebar/index.tsx

@@ -4,6 +4,7 @@ import '../style.scss';
 interface PopularSitesSidebarProps {
 	followSource: string;
 	items: PopularSiteItemProp[];
+	title?: string;
 }
 
 /**
@@ -35,8 +36,10 @@ function unescape( str: string ): string {
 	return str.replace( /&#(\d+);/g, ( match, entity ) => String.fromCharCode( entity ) );
 }
 
-// create function to transform item into a site object
-const getSiteFromItem = ( item: PopularSiteItemProp ): ReaderPopularSite | null => {
+/**
+ * Converts a popular site item, provided as a prop, into a popular site object for display in the ReaderPopularSitesSidebar component.
+ */
+const getPopularSiteFromItem = ( item: PopularSiteItemProp ): ReaderPopularSite | null => {
 	if ( item.site_name === undefined || item.site_description === undefined ) {
 		return null;
 	}
@@ -52,12 +55,12 @@ const getSiteFromItem = ( item: PopularSiteItemProp ): ReaderPopularSite | null
 };
 
 const ReaderPopularSitesSidebar = ( props: PopularSitesSidebarProps ) => {
-	const { followSource, items } = props;
-	const sites = items
-		.map( ( item ): ReaderPopularSite | null => getSiteFromItem( item ) )
+	const { followSource, items, title } = props;
+	const sites: ReaderPopularSite[] = items
+		.map( ( item ): ReaderPopularSite | null => getPopularSiteFromItem( item ) )
 		.filter( ( site ): site is ReaderPopularSite => site !== null );
 
-	const popularSitesLinks = sites.map( ( site ) => (
+	const popularSitesLinks: JSX.Element[] = sites.map( ( site ) => (
 		<ConnectedReaderSubscriptionListItem
 			key={ site.feed_ID }
 			feedId={ site.feed_ID }
@@ -75,7 +78,12 @@ const ReaderPopularSitesSidebar = ( props: PopularSitesSidebarProps ) => {
 		return null;
 	}
 
-	return <div className="reader-tag-sidebar-recommended-sites">{ popularSitesLinks }</div>;
+	return (
+		<>
+			{ title && <h2 className="reader-tag-sidebar-title">{ title }</h2> }
+			<div className="reader-tag-sidebar-recommended-sites">{ popularSitesLinks }</div>
+		</>
+	);
 };
 
 export default ReaderPopularSitesSidebar;

client/state/data-layer/wpcom/read/recommendations/sites/index.ts

@@ -54,7 +54,10 @@ interface RecommendedSiteResponse {
 export interface RecommendedSite {
 	algorithm: string;
 	blogId: number;
+	description: string;
 	feedId: number;
+	feedUrl: string;
+	icon: string;
 	railcar: Railcar;
 	title: string;
 	url: string;
@@ -68,9 +71,12 @@ export const mapResponseToRecommendedSites = ( {
 		( site: RecommendedSiteResponse ): RecommendedSite => ( {
 			algorithm,
 			blogId: site.blog_id,
+			description: site.description,
 			feedId: site.feed_id,
+			feedUrl: site.feed_url,
+			icon: site.icon?.img,
 			railcar: site.railcar,
-			title: decodeEntities( site.blog_title ?? '' ),
+			title: decodeEntities( site.blog_title ?? site.name ),
 			url: site.blog_url ?? site.URL,
 		} )
 	);

client/state/data-layer/wpcom/read/recommendations/sites/test/index.ts

@@ -111,25 +111,34 @@ describe( 'recommended sites', () => {
 			const expected: RecommendedSite[] = [
 				{
 					algorithm,
-					railcar: {},
 					blogId: 19096129,
+					description: 'Description 1',
 					feedId: 185124,
+					feedUrl: 'http://bentehaarstad.wordpress.com/feed/',
+					icon: 'http://bentehaarstad.wordpress.com/favicon.ico',
+					railcar: {},
 					title: 'Bente Haarstad Photography&',
 					url: 'http://bentehaarstad.wordpress.com',
 				},
 				{
 					algorithm,
-					railcar: {},
 					blogId: 38492359,
+					description: 'Description 2',
 					feedId: 42081376,
+					feedUrl: 'http://chrisnicholaswrites.wordpress.com/feed/',
+					icon: 'http://chrisnicholaswrites.wordpress.com/favicon.ico',
+					railcar: {},
 					title: 'The Renegade Press',
 					url: 'http://chrisnicholaswrites.wordpress.com',
 				},
 				{
 					algorithm,
-					railcar: {},
 					blogId: 30436600,
+					description: 'Description 3',
 					feedId: 1098976,
+					feedUrl: 'http://makesomethingmondays.wordpress.com/feed/',
+					icon: 'http://makesomethingmondays.wordpress.com/favicon.ico',
+					railcar: {},
 					title: 'Make Something Mondays!',
 					url: 'http://makesomethingmondays.wordpress.com',
 				},