Extract subscription logic and refresh subscriptions when the count c…

…hanges.

client/reader/following/main.tsx

@@ -1,8 +1,6 @@
 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';
@@ -12,35 +10,14 @@ import SuggestionProvider from 'calypso/reader/search-stream/suggestion-provider
 import ReaderStream, { WIDE_DISPLAY_CUTOFF } from 'calypso/reader/stream';
 import ReaderListFollowedSites from 'calypso/reader/stream/reader-list-followed-sites';
 import Recent from '../recent';
+import { useSubscriptions } from './use-subscriptions';
 import { useFollowingView } from './view-preference';
 import ViewToggle from './view-toggle';
 import './style.scss';
 
 function FollowingStream( { ...props } ) {
 	const { currentView } = useFollowingView();
-	const { data: subscriptionsCount, isLoading: isLoadingCount } =
-		SubscriptionManager.useSubscriptionsCountQuery();
-	const { data: siteSubscriptions, isLoading: isLoadingSiteSubscriptions } =
-		SubscriptionManager.useSiteSubscriptionsQuery();
-
-	const isLoading = isLoadingCount || isLoadingSiteSubscriptions;
-
-	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, siteSubscriptions ] );
-
+	const { isLoading, hasNonSelfSubscriptions } = useSubscriptions();
 	const viewToggle = config.isEnabled( 'reader/recent-feed-overhaul' ) ? <ViewToggle /> : null;
 
 	if ( ! isLoading && ! hasNonSelfSubscriptions ) {

client/reader/following/use-subscriptions.ts

@@ -0,0 +1,40 @@
+import { SubscriptionManager } from '@automattic/data-stores';
+import { useMemo, useEffect } from 'react';
+
+export function useSubscriptions() {
+	const { data: subscriptionsCount, isLoading: isLoadingCount } =
+		SubscriptionManager.useSubscriptionsCountQuery();
+	const {
+		data: siteSubscriptions,
+		isLoading: isLoadingSiteSubscriptions,
+		refetch: refetchSiteSubscriptions,
+	} = SubscriptionManager.useSiteSubscriptionsQuery();
+
+	const isLoading = isLoadingCount || isLoadingSiteSubscriptions;
+	const blogCount = subscriptionsCount?.blogs ?? 0;
+
+	const nonSelfSubscriptions = useMemo(
+		() => siteSubscriptions?.subscriptions?.filter( ( sub ) => ! sub.is_owner ) ?? [],
+		[ siteSubscriptions.subscriptions ]
+	);
+
+	const hasNonSelfSubscriptions = useMemo( () => {
+		if ( blogCount === 0 ) {
+			return false;
+		}
+		return siteSubscriptions?.subscriptions ? nonSelfSubscriptions.length > 0 : blogCount > 0;
+	}, [ blogCount, siteSubscriptions.subscriptions, nonSelfSubscriptions ] );
+
+	useEffect( () => {
+		if ( blogCount > 0 ) {
+			refetchSiteSubscriptions();
+		}
+	}, [ refetchSiteSubscriptions, blogCount ] );
+
+	return {
+		isLoading,
+		hasNonSelfSubscriptions,
+		nonSelfSubscriptions,
+		blogCount,
+	};
+}