From c714e5502b07d7b3e1e38779fea0776b716f5354 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Mon, 2 Dec 2024 15:07:12 -0500 Subject: [PATCH 1/7] Hide empty content in favor of Reader onboarding. --- client/reader/following/main.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx index c92217100b428..7215df15341cc 100644 --- a/client/reader/following/main.tsx +++ b/client/reader/following/main.tsx @@ -28,6 +28,7 @@ function FollowingStream( { ...props } ) { { ...props } className="following" streamSidebar={ () => } + showDefaultEmptyContentIfMissing={ false } > Date: Mon, 2 Dec 2024 17:04:35 -0500 Subject: [PATCH 2/7] Refactor so that both views show the same ReaderOnboarding component. --- client/reader/following/main.tsx | 14 ++- client/reader/following/style.scss | 8 ++ client/reader/recent/index.tsx | 132 ++++++++++++----------------- client/reader/recent/style.scss | 27 ------ 4 files changed, 76 insertions(+), 105 deletions(-) diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx index 7215df15341cc..0db81d6df2ef3 100644 --- a/client/reader/following/main.tsx +++ b/client/reader/following/main.tsx @@ -1,4 +1,5 @@ import config from '@automattic/calypso-config'; +import { SubscriptionManager } from '@automattic/data-stores'; import clsx from 'clsx'; import { translate } from 'i18n-calypso'; import AsyncLoad from 'calypso/components/async-load'; @@ -16,13 +17,24 @@ import './style.scss'; function FollowingStream( { ...props } ) { const { currentView } = useFollowingView(); + const { data: subscriptionsCount } = SubscriptionManager.useSubscriptionsCountQuery(); + const hasSubscriptions = subscriptionsCount?.blogs && subscriptionsCount.blogs > 0; const viewToggle = config.isEnabled( 'reader/recent-feed-overhaul' ) ? : null; + if ( ! hasSubscriptions ) { + return ( +
+ + +
+ ); + } + return ( <> { currentView === 'recent' && config.isEnabled( 'reader/recent-feed-overhaul' ) ? ( - + ) : ( { +const Recent = ( { viewToggle, hasSubscriptions }: RecentProps ) => { const dispatch = useDispatch< ThunkDispatch< AppState, void, UnknownAction > >(); const [ selectedItem, setSelectedItem ] = useState< ReaderPost | null >( null ); const isWide = useBreakpoint( WIDE_BREAKPOINT ); @@ -159,93 +158,72 @@ const Recent = ( { viewToggle }: RecentProps ) => { setIsLoading( data?.isRequesting ); }, [ data?.isRequesting ] ); - const { data: subscriptionsCount } = SubscriptionManager.useSubscriptionsCountQuery(); - const hasSubscriptions = subscriptionsCount?.blogs && subscriptionsCount.blogs > 0; - return (
{ viewToggle }
- { ! hasSubscriptions ? ( - <> -

- { translate( - '{{strong}}Welcome!{{/strong}} Follow your favorite sites and their latest posts will appear here. Read, like, and comment in a distraction-free environment. Get started by selecting your interests below:', - { - components: { - strong: , - }, - } - ) } -

- - - ) : ( - - item.postId?.toString() ?? `item-${ index }` - } - view={ view as View } - fields={ fields } - data={ shownData } - onChangeView={ ( newView: View ) => - setView( { - type: newView.type, - fields: newView.fields ?? [], - layout: view.layout, - perPage: newView.perPage, - page: newView.page, - search: newView.search, - } ) - } - paginationInfo={ view.search === '' ? defaultPaginationInfo : paginationInfo } - defaultLayouts={ { list: {} } } - isLoading={ isLoading } - selection={ selectedItem ? [ selectedItem.postId?.toString() ] : [] } - onChangeSelection={ ( newSelection: string[] ) => { - const selectedPost = data?.items?.find( - ( item: ReaderPost ) => item.postId?.toString() === newSelection[ 0 ] - ); - setSelectedItem( selectedPost || null ); - } } - /> - ) } + + item.postId?.toString() ?? `item-${ index }` + } + view={ view as View } + fields={ fields } + data={ shownData } + onChangeView={ ( newView: View ) => + setView( { + type: newView.type, + fields: newView.fields ?? [], + layout: view.layout, + perPage: newView.perPage, + page: newView.page, + search: newView.search, + } ) + } + paginationInfo={ view.search === '' ? defaultPaginationInfo : paginationInfo } + defaultLayouts={ { list: {} } } + isLoading={ isLoading } + selection={ selectedItem ? [ selectedItem.postId?.toString() ] : [] } + onChangeSelection={ ( newSelection: string[] ) => { + const selectedPost = data?.items?.find( + ( item: ReaderPost ) => item.postId?.toString() === newSelection[ 0 ] + ); + setSelectedItem( selectedPost || null ); + } } + />
- { hasSubscriptions ? ( -
- { ! ( selectedItem && getPostFromItem( selectedItem ) ) && isLoading && ( - - ) } - { ! isLoading && data?.items.length === 0 && ( - + { ! ( selectedItem && getPostFromItem( selectedItem ) ) && isLoading && ( + + ) } + { ! isLoading && data?.items.length === 0 && ( + + ) } + { data?.items.length > 0 && selectedItem && getPostFromItem( selectedItem ) && ( + <> + setSelectedItem( null ) } + layout="recent" /> - ) } - { data?.items.length > 0 && selectedItem && getPostFromItem( selectedItem ) && ( - <> - setSelectedItem( null ) } - layout="recent" - /> - - - ) } -
- ) : null } + + + ) } +
); }; diff --git a/client/reader/recent/style.scss b/client/reader/recent/style.scss index 6f7b7a46cc819..bcd9841e3a8d4 100644 --- a/client/reader/recent/style.scss +++ b/client/reader/recent/style.scss @@ -148,33 +148,6 @@ padding: $recent-feed-spacing; } } - - &.recent-feed--no-subscriptions { - max-width: none; - - .recent-feed__list-column-header { - max-width: none; - margin: 0; - padding: 16px 24px; - border-bottom: 1px solid var( --studio-gray-0 ); - - header.navigation-header { - max-width: $break-medium; - margin: 0 auto; - padding: 0; - } - } - - .recent-feed__list-column-content { - max-width: $break-medium; - margin: 0 auto; - padding: 24px 24px 0; - } - - @media ( min-width: $break-wide ) { - max-width: none; - } - } } &__post-column { From 7c03e4672cadd3cef5083cd416325f734a38d344 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Mon, 2 Dec 2024 17:46:17 -0500 Subject: [PATCH 3/7] Add back welcome message. --- client/reader/following/main.tsx | 10 ++++++++++ client/reader/following/style.scss | 4 ++++ 2 files changed, 14 insertions(+) diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx index 0db81d6df2ef3..01bc585ba8039 100644 --- a/client/reader/following/main.tsx +++ b/client/reader/following/main.tsx @@ -26,6 +26,16 @@ function FollowingStream( { ...props } ) { return (
+

+ { translate( + '{{strong}}Welcome!{{/strong}} Follow your favorite sites and their latest posts will appear here. Read, like, and comment in a distraction-free environment. Get started by selecting your interests below:', + { + components: { + strong: , + }, + } + ) } +

); diff --git a/client/reader/following/style.scss b/client/reader/following/style.scss index d8054aeb11c23..adfebf1f0e1cf 100644 --- a/client/reader/following/style.scss +++ b/client/reader/following/style.scss @@ -198,4 +198,8 @@ max-width: $break-medium; margin: 0 auto; padding: 16px 24px; + + .navigation-header { + padding-bottom: 0; + } } From 8d0bd5851e81a8cbfe4a932ce39bc1fa1ba2162d Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Mon, 2 Dec 2024 17:52:09 -0500 Subject: [PATCH 4/7] Remove hasSubscriptions prop, not needed. --- client/reader/following/main.tsx | 2 +- client/reader/recent/index.tsx | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx index 01bc585ba8039..d2229a092dd31 100644 --- a/client/reader/following/main.tsx +++ b/client/reader/following/main.tsx @@ -44,7 +44,7 @@ function FollowingStream( { ...props } ) { return ( <> { currentView === 'recent' && config.isEnabled( 'reader/recent-feed-overhaul' ) ? ( - + ) : ( { +const Recent = ( { viewToggle }: RecentProps ) => { const dispatch = useDispatch< ThunkDispatch< AppState, void, UnknownAction > >(); const [ selectedItem, setSelectedItem ] = useState< ReaderPost | null >( null ); const isWide = useBreakpoint( WIDE_BREAKPOINT ); @@ -160,11 +159,7 @@ const Recent = ( { viewToggle, hasSubscriptions }: RecentProps ) => { return (
-
+
{ viewToggle }
From 5d7f75d4c3d18c06a01e4978448a96d6c0d04856 Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Tue, 3 Dec 2024 09:34:01 -0500 Subject: [PATCH 5/7] Show Reader Onboarding if the user is only subscribed to their own sites. --- client/reader/following/main.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx index d2229a092dd31..ce323c78046ca 100644 --- a/client/reader/following/main.tsx +++ b/client/reader/following/main.tsx @@ -2,6 +2,7 @@ import config from '@automattic/calypso-config'; import { SubscriptionManager } from '@automattic/data-stores'; import clsx from 'clsx'; import { translate } from 'i18n-calypso'; +import { useMemo } from 'react'; import AsyncLoad from 'calypso/components/async-load'; import BloganuaryHeader from 'calypso/components/bloganuary-header'; import NavigationHeader from 'calypso/components/navigation-header'; @@ -18,11 +19,26 @@ import './style.scss'; function FollowingStream( { ...props } ) { const { currentView } = useFollowingView(); const { data: subscriptionsCount } = SubscriptionManager.useSubscriptionsCountQuery(); - const hasSubscriptions = subscriptionsCount?.blogs && subscriptionsCount.blogs > 0; + const { data: siteSubscriptions } = SubscriptionManager.useSiteSubscriptionsQuery(); + const hasNonSelfSubscriptions = useMemo( () => { + if ( ! subscriptionsCount?.blogs || subscriptionsCount.blogs === 0 ) { + return false; + } + + // If we have site subscriptions data, filter out self-owned blogs + if ( siteSubscriptions?.subscriptions ) { + const nonSelfSubscriptions = siteSubscriptions.subscriptions.filter( + ( sub ) => ! sub.is_owner + ); + return nonSelfSubscriptions.length > 0; + } + + return subscriptionsCount.blogs > 0; + }, [ subscriptionsCount?.blogs, siteSubscriptions ] ); const viewToggle = config.isEnabled( 'reader/recent-feed-overhaul' ) ? : null; - if ( ! hasSubscriptions ) { + if ( ! hasNonSelfSubscriptions ) { return (
@@ -50,7 +66,6 @@ function FollowingStream( { ...props } ) { { ...props } className="following" streamSidebar={ () => } - showDefaultEmptyContentIfMissing={ false } > Date: Tue, 3 Dec 2024 10:17:07 -0500 Subject: [PATCH 6/7] Prevent the flash of onboarding before the streams load. --- client/reader/following/main.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx index ce323c78046ca..eb79edfe0e7d8 100644 --- a/client/reader/following/main.tsx +++ b/client/reader/following/main.tsx @@ -18,14 +18,23 @@ import './style.scss'; function FollowingStream( { ...props } ) { const { currentView } = useFollowingView(); - const { data: subscriptionsCount } = SubscriptionManager.useSubscriptionsCountQuery(); - const { data: siteSubscriptions } = SubscriptionManager.useSiteSubscriptionsQuery(); + const { data: subscriptionsCount, isLoading: isLoadingCount } = + SubscriptionManager.useSubscriptionsCountQuery(); + const { data: siteSubscriptions, isLoading: isLoadingSiteSubscriptions } = + SubscriptionManager.useSiteSubscriptionsQuery(); + + const isLoading = isLoadingCount || isLoadingSiteSubscriptions; + const hasNonSelfSubscriptions = useMemo( () => { + if ( isLoading ) { + return true; + } + if ( ! subscriptionsCount?.blogs || subscriptionsCount.blogs === 0 ) { return false; } - // If we have site subscriptions data, filter out self-owned blogs + // If we have site subscriptions data, filter out self-owned blogs. if ( siteSubscriptions?.subscriptions ) { const nonSelfSubscriptions = siteSubscriptions.subscriptions.filter( ( sub ) => ! sub.is_owner @@ -34,11 +43,11 @@ function FollowingStream( { ...props } ) { } return subscriptionsCount.blogs > 0; - }, [ subscriptionsCount?.blogs, siteSubscriptions ] ); + }, [ subscriptionsCount?.blogs, siteSubscriptions, isLoading ] ); const viewToggle = config.isEnabled( 'reader/recent-feed-overhaul' ) ? : null; - if ( ! hasNonSelfSubscriptions ) { + if ( ! isLoading && ! hasNonSelfSubscriptions ) { return (
From 4ecd61751482976b6de5b14ce30a05de3e4f236b Mon Sep 17 00:00:00 2001 From: Allison Levine Date: Tue, 3 Dec 2024 11:23:06 -0500 Subject: [PATCH 7/7] Remove redundant isLoading check. --- client/reader/following/main.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/reader/following/main.tsx b/client/reader/following/main.tsx index eb79edfe0e7d8..92454de48957f 100644 --- a/client/reader/following/main.tsx +++ b/client/reader/following/main.tsx @@ -26,11 +26,7 @@ function FollowingStream( { ...props } ) { const isLoading = isLoadingCount || isLoadingSiteSubscriptions; const hasNonSelfSubscriptions = useMemo( () => { - if ( isLoading ) { - return true; - } - - if ( ! subscriptionsCount?.blogs || subscriptionsCount.blogs === 0 ) { + if ( ! subscriptionsCount?.blogs || subscriptionsCount?.blogs === 0 ) { return false; } @@ -43,7 +39,7 @@ function FollowingStream( { ...props } ) { } return subscriptionsCount.blogs > 0; - }, [ subscriptionsCount?.blogs, siteSubscriptions, isLoading ] ); + }, [ subscriptionsCount, siteSubscriptions ] ); const viewToggle = config.isEnabled( 'reader/recent-feed-overhaul' ) ? : null;