[DRAFT] Reader: random fixes

client/blocks/reader-post-options-menu/reader-post-ellipsis-menu.jsx

@@ -16,6 +16,7 @@ import { isAutomatticTeamMember } from 'calypso/reader/lib/teams';
 import { isConversationFollowable } from 'calypso/reader/post/capabilities';
 import * as stats from 'calypso/reader/stats';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import { successNotice } from 'calypso/state/notices/actions';
 import * as PostUtils from 'calypso/state/posts/utils';
 import { recordReaderTracksEvent } from 'calypso/state/reader/analytics/actions';
 import { hasReaderFollowOrganization } from 'calypso/state/reader/follows/selectors';
@@ -65,9 +66,20 @@ class ReaderPostEllipsisMenu extends Component {
 		posts: [],
 	};
 
-	openSuggestedFollowsModal = ( shouldOpen ) => {
-		if ( shouldOpen ) {
-			this.props.openSuggestedFollows( shouldOpen );
+	onFollowToggle = ( isFollowing ) => {
+		const { post, translate } = this.props;
+		const displayName = post.site_name || post.feed_URL || post.site_URL;
+
+		this.props.successNotice(
+			isFollowing
+				? translate( 'Success! You are now subscribed to "%s".', { args: displayName } )
+				: translate( 'Success! You are now unsubscribed from "%s".', { args: displayName } ),
+			{ duration: 2000 }
+		);
+
+		if ( isFollowing ) {
+			this.props.openSuggestedFollows( isFollowing );
+			this.onMenuToggle();
 		}
 	};
 
@@ -298,12 +310,12 @@ class ReaderPostEllipsisMenu extends Component {
 					<ReaderFollowButton
 						tagName={ PopoverMenuItem }
 						feedId={ feedId }
-						siteId={ siteId }
+						siteId={ post.is_external ? null : siteId }
 						siteUrl={ post.feed_URL || post.site_URL }
 						followSource={ followSource }
 						iconSize={ 24 }
 						followingLabel={ translate( 'Subscribed' ) }
-						onFollowToggle={ this.openSuggestedFollowsModal }
+						onFollowToggle={ this.onFollowToggle }
 						railcar={ post.railcar }
 					/>
 				) }
@@ -413,5 +425,6 @@ export default connect(
 		requestMarkAsSeenBlog,
 		requestMarkAsUnseenBlog,
 		recordReaderTracksEvent,
+		successNotice,
 	}
 )( localize( ReaderPostEllipsisMenu ) );

client/blocks/reader-suggested-follows/index.jsx

@@ -1,15 +1,34 @@
 import './style.scss';
+import { useTranslate } from 'i18n-calypso';
 import React from 'react';
 import { SiteIcon } from 'calypso/blocks/site-icon';
 import FollowButton from 'calypso/reader/follow-button';
 import { formatUrlForDisplay } from 'calypso/reader/lib/feed-display-helper';
 import { getStreamUrl } from 'calypso/reader/route';
 import { recordAction, recordGaEvent } from 'calypso/reader/stats';
 import { useDispatch } from 'calypso/state';
+import { successNotice } from 'calypso/state/notices/actions';
 import { recordReaderTracksEvent } from 'calypso/state/reader/analytics/actions';
 
 export const SuggestedFollowItem = ( { site, followSource } ) => {
 	const dispatch = useDispatch();
+	const translate = useTranslate();
+
+	const streamUrl = getStreamUrl( site?.feed_ID, site?.blog_ID );
+	const urlForDisplay = site && site.URL ? formatUrlForDisplay( site.URL ) : '';
+
+	const onFollowToggle = ( isFollowing ) => {
+		const displayName = site.name || urlForDisplay;
+
+		dispatch(
+			successNotice(
+				isFollowing
+					? translate( 'Success! You are now subscribed to %s.', { args: displayName } )
+					: translate( 'Success! You are now unsubscribed from "%s".', { args: displayName } ),
+				{ duration: 2000 }
+			)
+		);
+	};
 
 	const onSiteClick = ( selectedSite ) => {
 		recordAction( 'clicked_reader_suggested_following_item' );
@@ -21,9 +40,6 @@ export const SuggestedFollowItem = ( { site, followSource } ) => {
 		);
 	};
 
-	const streamUrl = getStreamUrl( site?.feed_ID, site?.blog_ID );
-	const urlForDisplay = site && site.URL ? formatUrlForDisplay( site.URL ) : '';
-
 	/* eslint-disable wpcalypso/jsx-classname-namespace */
 	return (
 		<div className="reader-suggested-follow-item">
@@ -33,9 +49,6 @@ export const SuggestedFollowItem = ( { site, followSource } ) => {
 						className="reader-suggested-follow-item_link"
 						href={ streamUrl }
 						onClick={ () => onSiteClick( site ) }
-						aria-hidden="true"
-						target="_blank"
-						rel="noreferrer"
 					>
 						<span>
 							<SiteIcon iconUrl={ site.site_icon } size={ 48 } />
@@ -52,7 +65,11 @@ export const SuggestedFollowItem = ( { site, followSource } ) => {
 						</span>
 					</a>
 					<span className="reader-suggested-follow-button">
-						<FollowButton siteUrl={ site.URL } followSource={ followSource } />
+						<FollowButton
+							siteUrl={ site.URL }
+							followSource={ followSource }
+							onFollowToggle={ onFollowToggle }
+						/>
 					</span>
 				</>
 			) }

client/blocks/reader-suggested-follows/style.scss

@@ -118,18 +118,6 @@
 		.reader-suggested-follow-item_nameurl {
 			margin-bottom: 3px;
 		}
-		.reader-suggested-follow-item_nameurl::after {
-			content: "";
-			background-image: url("data:image/svg+xml,%3Csvg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23101517' stroke-linecap='square' stroke-width='1.5'%3E%3Cpath d='m5.8335 14.1666 7.3333-7.33335' stroke-linejoin='round'/%3E%3Cpath d='m6.8335 5.83325h7.3333v7.33335'/%3E%3C/g%3E%3C/svg%3E"); /* stylelint-disable function-url-quotes */
-			background-repeat: no-repeat;
-			background-size: 20px 20px;
-			display: inline-block;
-			height: 20px;
-			margin-left: 3px;
-			position: relative;
-			top: 5px;
-			width: 20px;
-		}
 	}
 
 	.reader-recommended-follows-dialog__follow-item {

client/reader/site-subscriptions-manager/unsubscribed-feeds-search-list/index.tsx

@@ -4,6 +4,7 @@ import { Reader, SubscriptionManager } from '@automattic/data-stores';
 import { useQuery } from '@tanstack/react-query';
 import { __experimentalVStack as VStack, Spinner } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
+import { useDebounce } from 'use-debounce';
 import ReaderFeedItem from 'calypso/blocks/reader-feed-item';
 import FeedPreview from 'calypso/landing/subscriptions/components/feed-preview';
 import { SOURCE_SUBSCRIPTIONS_SEARCH_RECOMMENDATION_LIST } from 'calypso/landing/subscriptions/tracks';
@@ -17,6 +18,7 @@ interface Props {
 export const UnsubscribedFeedsSearchList = ( props: Props ) => {
 	const { hideTitle = false } = props;
 	const { searchTerm } = useSiteSubscriptionsQueryProps();
+	const [ debouncedSearchTerm ] = useDebounce( searchTerm, 500 );
 	const { isPending: isUnsubscribing } = useSiteUnsubscribeMutation();
 	const translate = useTranslate();
 	const {
@@ -30,7 +32,7 @@ export const UnsubscribedFeedsSearchList = ( props: Props ) => {
 		error: searchError,
 	} = useQuery(
 		readFeedSearchQuery( {
-			query: searchTerm,
+			query: debouncedSearchTerm,
 			excludeFollowed: true,
 		} )
 	);