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