Implement RTK Query approach for fetching wpcom sites

src/components/publish-site-button.tsx

@@ -1,53 +1,79 @@
 import { cloudUpload } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
-import Button from 'src/components/button';
-import { Tooltip } from 'src/components/tooltip';
+import { useCallback } from 'react';
 import { useSyncSites } from 'src/hooks/sync-sites';
 import { useAuth } from 'src/hooks/use-auth';
 import { useContentTabs } from 'src/hooks/use-content-tabs';
 import { useSiteDetails } from 'src/hooks/use-site-details';
+import { ConnectButton } from 'src/modules/sync/components/connect-button';
 import { useAppDispatch } from 'src/stores';
 import {
 	connectedSitesActions,
 	useGetConnectedSitesForLocalSiteQuery,
 } from 'src/stores/sync/connected-sites';
+import { useGetWpComSitesQuery } from 'src/stores/sync/wpcom-sites';
 
-export const PublishSiteButton = () => {
+export const PublishSiteButton = ( {
+	redirectToSync = true,
+}: {
+	redirectToSync?: boolean;
+} = {} ) => {
 	const { __ } = useI18n();
 	const dispatch = useAppDispatch();
 	const { setSelectedTab } = useContentTabs();
-	const { user } = useAuth();
+	const { user, isAuthenticated } = useAuth();
 	const { selectedSite } = useSiteDetails();
 	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
 		localSiteId: selectedSite?.id,
 		userId: user?.id,
 	} );
 	const { isAnySitePulling, isAnySitePushing } = useSyncSites();
+	const connectedSiteIds = connectedSites.map( ( { id } ) => id );
+	const {
+		isUninitialized: isUninitializedSyncSites,
+		isFetching: isFetchingSyncSites,
+		refetch: refetchWpComSites,
+	} = useGetWpComSitesQuery( { connectedSiteIds, userId: user?.id } );
 	const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
-	const handlePublishClick = () => {
-		setSelectedTab( 'sync' );
+
+	const handlePublishClick = useCallback( () => {
+		if ( redirectToSync ) {
+			setSelectedTab( 'sync' );
+		}
+		if ( isAuthenticated && ! isUninitializedSyncSites ) {
+			// Refetch sites on the background but ignore errors
+			void refetchWpComSites();
+		}
 		dispatch( connectedSitesActions.openModal( 'push' ) );
-	};
+	}, [
+		redirectToSync,
+		setSelectedTab,
+		dispatch,
+		isAuthenticated,
+		isUninitializedSyncSites,
+		refetchWpComSites,
+	] );
 
-	if ( connectedSites.length !== 0 ) return null;
+	// Don't show the button if there are already connected sites
+	// (only when redirectToSync is true, meaning it's used outside the sync tab)
+	if ( redirectToSync && connectedSites.length !== 0 ) return null;
 
 	return (
-		<Tooltip
-			disabled={ ! isAnySiteSyncing }
-			text={ __(
-				'Another site is syncing. Please wait for the sync to finish before you publish your site.'
-			) }
-			placement="left"
+		<ConnectButton
+			variant="primary"
+			icon={ cloudUpload }
+			connectSite={ handlePublishClick }
+			disabled={ isAnySiteSyncing }
+			isBusy={ isFetchingSyncSites }
+			tooltipText={
+				isAnySiteSyncing
+					? __(
+							'Another site is syncing. Please wait for the sync to finish before you publish your site.'
+					  )
+					: __( 'Publishing your site requires an internet connection.' )
+			}
 		>
-			<Button
-				variant="primary"
-				disabled={ isAnySiteSyncing }
-				aria-label={ __( 'Publish site' ) }
-				onClick={ handlePublishClick }
-				icon={ cloudUpload }
-			>
-				{ __( 'Publish site' ) }
-			</Button>
-		</Tooltip>
+			{ __( 'Publish site' ) }
+		</ConnectButton>
 	);
 };

src/hooks/sync-sites/sync-sites-context.tsx

@@ -10,22 +10,16 @@ import {
 	mapImportResponseToPushState,
 } from 'src/hooks/sync-sites/use-sync-push';
 import { useAuth } from 'src/hooks/use-auth';
-import { useFetchWpComSites } from 'src/hooks/use-fetch-wpcom-sites';
 import { useFormatLocalizedTimestamps } from 'src/hooks/use-format-localized-timestamps';
-import { useSiteDetails } from 'src/hooks/use-site-details';
 import { useSyncStatesProgressInfo } from 'src/hooks/use-sync-states-progress-info';
 import { getIpcApi } from 'src/lib/get-ipc-api';
-import {
-	useGetConnectedSitesForLocalSiteQuery,
-	useUpdateSiteTimestampMutation,
-} from 'src/stores/sync/connected-sites';
+import { useUpdateSiteTimestampMutation } from 'src/stores/sync/connected-sites';
 import type { ImportResponse } from 'src/hooks/use-sync-states-progress-info';
 
 type GetLastSyncTimeText = ( timestamp: string | null, type: 'pull' | 'push' ) => string;
 
 export type SyncSitesContextType = Omit< UseSyncPull, 'pullStates' > &
-	Omit< UseSyncPush, 'pushStates' > &
-	ReturnType< typeof useFetchWpComSites > & {
+	Omit< UseSyncPush, 'pushStates' > & {
 		getLastSyncTimeText: GetLastSyncTimeText;
 	};
 
@@ -53,13 +47,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 		[ formatRelativeTime ]
 	);
 
-	const { selectedSite } = useSiteDetails();
-	const { user } = useAuth();
-	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
-		localSiteId: selectedSite?.id,
-		userId: user?.id,
-	} );
-
 	const [ updateSiteTimestamp ] = useUpdateSiteTimestampMutation();
 
 	const { pullSite, isAnySitePulling, isSiteIdPulling, clearPullState, getPullState, cancelPull } =
@@ -79,10 +66,7 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				updateSiteTimestamp( { siteId: remoteSiteId, localSiteId, type: 'push' } ),
 		} );
 
-	const { syncSites, isFetching, refetchSites } = useFetchWpComSites(
-		connectedSites.map( ( { id } ) => id )
-	);
-	useListenDeepLinkConnection( { refetchSites } );
+	useListenDeepLinkConnection();
 
 	const { client } = useAuth();
 	const { pushStatesProgressInfo } = useSyncStatesProgressInfo();
@@ -154,9 +138,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				isSiteIdPulling,
 				clearPullState,
 				cancelPull,
-				syncSites,
-				refetchSites,
-				isFetching,
 				getPullState,
 				getPushState,
 				pushSite,

src/hooks/sync-sites/use-listen-deep-link-connection.ts

@@ -1,21 +1,32 @@
-import { SyncSitesContextType } from 'src/hooks/sync-sites/sync-sites-context';
+import { useAuth } from 'src/hooks/use-auth';
 import { useContentTabs } from 'src/hooks/use-content-tabs';
 import { useIpcListener } from 'src/hooks/use-ipc-listener';
 import { useSiteDetails } from 'src/hooks/use-site-details';
-import { useConnectSiteMutation } from 'src/stores/sync/connected-sites';
+import {
+	useConnectSiteMutation,
+	useGetConnectedSitesForLocalSiteQuery,
+} from 'src/stores/sync/connected-sites';
+import { useGetWpComSitesQuery } from 'src/stores/sync/wpcom-sites';
 
-export function useListenDeepLinkConnection( {
-	refetchSites,
-}: {
-	refetchSites: SyncSitesContextType[ 'refetchSites' ];
-} ) {
+export function useListenDeepLinkConnection() {
 	const [ connectSite ] = useConnectSiteMutation();
 	const { selectedSite, setSelectedSiteId } = useSiteDetails();
 	const { setSelectedTab, selectedTab } = useContentTabs();
+	const { user } = useAuth();
+	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
+		localSiteId: selectedSite?.id,
+		userId: user?.id,
+	} );
+	const connectedSiteIds = connectedSites.map( ( { id } ) => id );
+	const { refetch: refetchWpComSites } = useGetWpComSitesQuery( {
+		connectedSiteIds,
+		userId: user?.id,
+	} );
 
 	useIpcListener( 'sync-connect-site', async ( _event, { remoteSiteId, studioSiteId } ) => {
 		// Fetch latest sites from network before checking
-		const latestSites = await refetchSites();
+		const result = await refetchWpComSites();
+		const latestSites = result.data ?? [];
 		const newConnectedSite = latestSites.find( ( site ) => site.id === remoteSiteId );
 		if ( newConnectedSite ) {
 			if ( selectedSite?.id && selectedSite.id !== studioSiteId ) {

src/hooks/sync-sites/use-sync-pull.ts

@@ -20,7 +20,7 @@ import {
 } from 'src/hooks/use-sync-states-progress-info';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { getHostnameFromUrl } from 'src/lib/url-utils';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncSite } from 'src/modules/sync/types';
 import type { SyncOption } from 'src/types';
 
 export type SyncBackupState = {

src/hooks/sync-sites/use-sync-push.ts

@@ -17,8 +17,8 @@ import {
 } from 'src/hooks/use-sync-states-progress-info';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { getHostnameFromUrl } from 'src/lib/url-utils';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
 import type { ImportResponse } from 'src/hooks/use-sync-states-progress-info';
+import type { SyncSite } from 'src/modules/sync/types';
 import type { SyncOption } from 'src/types';
 
 export type SyncPushState = {

src/hooks/tests/get-sync-support.test.ts

@@ -1,4 +1,4 @@
-import { getSyncSupport } from 'src/hooks/use-fetch-wpcom-sites';
+import { getSyncSupport } from 'src/modules/sync/lib/sync-support';
 
 // Mocks for site shapes
 const baseSite = {

src/hooks/tests/reconcile-connected-sites.test.ts

@@ -1,5 +1,5 @@
-import { reconcileConnectedSites } from 'src/hooks/use-fetch-wpcom-sites/reconcile-connected-sites';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import { reconcileConnectedSites } from 'src/modules/sync/lib/reconcile-connected-sites';
+import type { SyncSite } from 'src/modules/sync/types';
 
 describe( 'reconcileConnectedSites', () => {
 	test( 'should update relevant properties', () => {

src/hooks/tests/use-add-site.test.tsx

@@ -9,7 +9,7 @@ import { useSiteDetails } from 'src/hooks/use-site-details';
 import { getWordPressProvider } from 'src/lib/wordpress-provider';
 import { store } from 'src/stores';
 import { setProviderConstants } from 'src/stores/provider-constants-slice';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncSite } from 'src/modules/sync/types';
 
 jest.mock( 'src/hooks/use-site-details' );
 jest.mock( 'src/hooks/use-feature-flags' );

src/hooks/use-add-site.ts

@@ -14,7 +14,7 @@ import {
 	selectDefaultWordPressVersion,
 } from 'src/stores/provider-constants-slice';
 import { useConnectSiteMutation } from 'src/stores/sync/connected-sites';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncSite } from 'src/modules/sync/types';
 import type { Blueprint } from 'src/stores/wpcom-api';
 import type { SyncOption } from 'src/types';