Reader: Show login prompts on all logged out reader streams

In #101923 we have added the functionality to show Login Prompt on selected reader streams, now we are updating this logic to show the login prompt on all reader streams which includes.

- /discover
- /search
- /tag/:tag_name
- All future pages that uses ReaderStream component

Author: mehmoodak

client/reader/discover/discover-stream.js

@@ -105,7 +105,6 @@ const DiscoverStream = ( props ) => {
 		showBack: false, // We will instead add this through the header section, since not all discover tabs have a stream to render the back button.
 		sidebarTabTitle: isDefaultTab ? translate( 'Sites' ) : translate( 'Related' ),
 		selectedStreamName: selectedTab,
-		disableInfiniteScroll: ! isLoggedIn,
 	};
 
 	const HeaderAndNavigation = () => {

client/reader/reader.const.ts

@@ -0,0 +1 @@
+export const MAX_POSTS_FOR_LOGGED_OUT_USERS: number = 10;

client/reader/search-stream/index.jsx

@@ -49,11 +49,6 @@ class SearchStream extends React.Component {
 	static propTypes = {
 		query: PropTypes.string,
 		streamKey: PropTypes.string,
-		disableInfiniteScroll: PropTypes.bool,
-	};
-
-	static defaultProps = {
-		disableInfiniteScroll: false,
 	};
 
 	state = {
@@ -241,7 +236,6 @@ class SearchStream extends React.Component {
 									query={ query }
 									sort={ pickSort( sortOrder ) }
 									onReceiveSearchResults={ this.setSearchFeeds }
-									disableInfiniteScroll={ this.props.disableInfiniteScroll }
 								/>
 							) }
 							{ ! query && (
@@ -263,7 +257,6 @@ class SearchStream extends React.Component {
 									query={ query }
 									sort={ pickSort( sortOrder ) }
 									onReceiveSearchResults={ this.setSearchFeeds }
-									disableInfiniteScroll={ this.props.disableInfiniteScroll }
 								/>
 							) ) || (
 								<ReaderPopularSitesSidebar

client/reader/search-stream/site-results.jsx

@@ -7,6 +7,8 @@ import withDimensions from 'calypso/lib/with-dimensions';
 import ReaderInfiniteStream from 'calypso/reader/components/reader-infinite-stream';
 import { siteRowRenderer } from 'calypso/reader/components/reader-infinite-stream/row-renderers';
 import { SEARCH_RESULTS_SITES } from 'calypso/reader/follow-sources';
+import { MAX_POSTS_FOR_LOGGED_OUT_USERS } from 'calypso/reader/reader.const';
+import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
 import {
 	requestFeedSearch,
 	SORT_BY_RELEVANCE,
@@ -18,8 +20,6 @@ import {
 } from 'calypso/state/reader/feed-searches/selectors';
 import { getFeed } from 'calypso/state/reader/feeds/selectors';
 
-const MIN_DESIRED_SITE_RESULTS = 10;
-
 class SiteResults extends Component {
 	static propTypes = {
 		query: PropTypes.string,
@@ -29,15 +29,10 @@ class SiteResults extends Component {
 		searchResults: PropTypes.array,
 		searchResultsCount: PropTypes.number,
 		width: PropTypes.number.isRequired,
-		disableInfiniteScroll: PropTypes.bool,
-	};
-
-	static defaultProps = {
-		disableInfiniteScroll: false,
 	};
 
 	fetchNextPage = ( offset ) => {
-		if ( this.props.disableInfiniteScroll && offset > MIN_DESIRED_SITE_RESULTS ) {
+		if ( this.isLoginPromptVisible( offset ) ) {
 			return;
 		}
 
@@ -50,12 +45,17 @@ class SiteResults extends Component {
 	};
 
 	hasNextPage = ( offset ) => {
-		if ( this.props.disableInfiniteScroll && offset > MIN_DESIRED_SITE_RESULTS ) {
+		if ( this.isLoginPromptVisible( offset ) ) {
 			return false;
 		}
 		return offset < this.props.searchResultsCount;
 	};
 
+	isLoginPromptVisible( offset ) {
+		// Show login prompt for all logged out users after few posts.
+		return ! this.props.isLoggedIn && offset > MAX_POSTS_FOR_LOGGED_OUT_USERS;
+	}
+
 	render() {
 		const { query, searchResults, width, sort } = this.props;
 		const isEmpty = query?.length > 0 && searchResults?.length === 0;
@@ -136,6 +136,7 @@ export default connect(
 			ownProps.onReceiveSearchResults( feedResults );
 		}
 		return {
+			isLoggedIn: isUserLoggedIn( state ),
 			searchResults: searchResults,
 			searchResultsCount: getReaderFeedsCountForQuery( state, {
 				query: ownProps.query,

client/reader/search/controller.js

@@ -88,7 +88,6 @@ const exported = {
 							onSortChange={ reportSortChange }
 							searchType={ show }
 							trendingTags={ context.params.trendingTags }
-							disableInfiniteScroll={ ! context.store.getState().currentUser.user }
 						/>
 					</div>
 				</div>

client/reader/stream/index.jsx

@@ -1,3 +1,4 @@
+import './style.scss';
 import { isDefaultLocale } from '@automattic/i18n-utils';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
@@ -21,6 +22,7 @@ import { isEditorIframeFocused } from 'calypso/reader/components/quick-post/util
 import ReaderMain from 'calypso/reader/components/reader-main';
 import { shouldShowLikes } from 'calypso/reader/like-helper';
 import { keysAreEqual, keyToString } from 'calypso/reader/post-key';
+import { MAX_POSTS_FOR_LOGGED_OUT_USERS } from 'calypso/reader/reader.const';
 import ReaderStreamLoginPrompt from 'calypso/reader/stream/login-prompt';
 import UpdateNotice from 'calypso/reader/update-notice';
 import { showSelectedPost, getStreamType } from 'calypso/reader/utils';
@@ -56,7 +58,6 @@ import { CustomerCouncilBanner } from './customer-council-banner';
 import EmptyContent from './empty';
 import PostLifecycle from './post-lifecycle';
 import PostPlaceholder from './post-placeholder';
-import './style.scss';
 
 // minimal size for the two-column layout to show without cut off
 // 64 is padding, 8 is margin
@@ -91,7 +92,6 @@ class ReaderStream extends Component {
 		useCompactCards: PropTypes.bool,
 		fixedHeaderHeight: PropTypes.number,
 		selectedStreamName: PropTypes.string,
-		disableInfiniteScroll: PropTypes.bool,
 		isLoggedIn: PropTypes.bool,
 	};
 
@@ -108,7 +108,6 @@ class ReaderStream extends Component {
 		showBack: true,
 		suppressSiteNameLink: false,
 		useCompactCards: false,
-		disableInfiniteScroll: false,
 		isLoggedIn: false,
 	};
 
@@ -488,7 +487,7 @@ class ReaderStream extends Component {
 	};
 
 	fetchNextPage = ( options, props = this.props ) => {
-		if ( this.props.disableInfiniteScroll && this.props.items.length > 10 ) {
+		if ( this.isLoginPromptVisible() ) {
 			return;
 		}
 
@@ -503,6 +502,11 @@ class ReaderStream extends Component {
 		props.requestPage( { feedId: selectedFeedId, streamKey, pageHandle, localeSlug } );
 	};
 
+	isLoginPromptVisible = () => {
+		// Show login prompt for all logged out users after few posts.
+		return ! this.props.isLoggedIn && this.props.items.length > MAX_POSTS_FOR_LOGGED_OUT_USERS;
+	};
+
 	showUpdates = () => {
 		const { streamKey } = this.props;
 		this.props.onUpdatesShown();
@@ -755,11 +759,9 @@ class ReaderStream extends Component {
 				{ showingStream && items.length ? this.props.intro?.() : null }
 				{ body }
 				{ showingStream && items.length && ! isRequesting ? <ListEnd /> : null }
-				{ this.props.disableInfiniteScroll &&
-					! this.props.isLoggedIn &&
-					this.props.items.length > 0 && (
-						<ReaderStreamLoginPrompt redirectPath={ window.location.pathname } />
-					) }
+				{ this.isLoginPromptVisible() && (
+					<ReaderStreamLoginPrompt redirectPath={ window.location.pathname } />
+				) }
 			</TopLevel>
 		);
 	}