diff --git a/client/blocks/reader-post-options-menu/reader-post-ellipsis-menu.jsx b/client/blocks/reader-post-options-menu/reader-post-ellipsis-menu.jsx
index 1dc5e6e7235d..2d31e4039e7f 100644
--- a/client/blocks/reader-post-options-menu/reader-post-ellipsis-menu.jsx
+++ b/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 {
) }
@@ -413,5 +425,6 @@ export default connect(
requestMarkAsSeenBlog,
requestMarkAsUnseenBlog,
recordReaderTracksEvent,
+ successNotice,
}
)( localize( ReaderPostEllipsisMenu ) );
diff --git a/client/blocks/reader-suggested-follows/index.jsx b/client/blocks/reader-suggested-follows/index.jsx
index 30c670b76b44..d36ff08c2668 100644
--- a/client/blocks/reader-suggested-follows/index.jsx
+++ b/client/blocks/reader-suggested-follows/index.jsx
@@ -1,4 +1,5 @@
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';
@@ -6,10 +7,28 @@ 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 (
@@ -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"
>
@@ -52,7 +65,11 @@ export const SuggestedFollowItem = ( { site, followSource } ) => {
-
+
>
) }
diff --git a/client/blocks/reader-suggested-follows/style.scss b/client/blocks/reader-suggested-follows/style.scss
index 999d6e6c3daa..bd8519e2ec00 100644
--- a/client/blocks/reader-suggested-follows/style.scss
+++ b/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 {
diff --git a/client/reader/site-subscriptions-manager/unsubscribed-feeds-search-list/index.tsx b/client/reader/site-subscriptions-manager/unsubscribed-feeds-search-list/index.tsx
index 4f9de94f7f39..9480ca0ac684 100644
--- a/client/reader/site-subscriptions-manager/unsubscribed-feeds-search-list/index.tsx
+++ b/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,
} )
);