Move pull and push states from SyncSitesProvider to a new Redux slice

apps/studio/src/components/app.tsx

@@ -9,6 +9,8 @@ import { NoStudioSites } from 'src/components/no-studio-sites';
 import { SiteContentTabs } from 'src/components/site-content-tabs';
 import TopBar from 'src/components/top-bar';
 import WindowsTitlebar from 'src/components/windows-titlebar';
+import { useListenDeepLinkConnection } from 'src/hooks/sync-sites/use-listen-deep-link-connection';
+import { useAuth } from 'src/hooks/use-auth';
 import { useLocalizationSupport } from 'src/hooks/use-localization-support';
 import { useSidebarVisibility } from 'src/hooks/use-sidebar-visibility';
 import { useSiteDetails } from 'src/hooks/use-site-details';
@@ -19,8 +21,9 @@ import { Onboarding } from 'src/modules/onboarding';
 import { useOnboarding } from 'src/modules/onboarding/hooks/use-onboarding';
 import { UserSettings } from 'src/modules/user-settings';
 import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
-import { useRootSelector } from 'src/stores';
+import { useAppDispatch, useRootSelector } from 'src/stores';
 import { selectOnboardingLoading } from 'src/stores/onboarding-slice';
+import { syncOperationsThunks } from 'src/stores/sync';
 import 'src/index.css';
 
 export default function App() {
@@ -32,6 +35,17 @@ export default function App() {
 	const { sites: localSites, loadingSites } = useSiteDetails();
 	const isEmpty = ! loadingSites && ! localSites.length;
 	const shouldShowWhatsNew = showWhatsNew && ! isEmpty;
+	const { client } = useAuth();
+	const dispatch = useAppDispatch();
+
+	// Initialize sync states from in-progress server operations
+	useEffect( () => {
+		if ( client ) {
+			void dispatch( syncOperationsThunks.initializeSyncStates( { client } ) );
+		}
+	}, [ client, dispatch ] );
+
+	useListenDeepLinkConnection();
 
 	useEffect( () => {
 		void getIpcApi().setupAppMenu( { needsOnboarding } );

apps/studio/src/components/content-tab-import-export.tsx

@@ -12,14 +12,15 @@ import { LearnMoreLink } from 'src/components/learn-more';
 import ProgressBar from 'src/components/progress-bar';
 import { Tooltip } from 'src/components/tooltip';
 import { ACCEPTED_IMPORT_FILE_TYPES } from 'src/constants';
-import { useSyncSites } from 'src/hooks/sync-sites/sync-sites-context';
 import { useAuth } from 'src/hooks/use-auth';
 import { useConfirmationDialog } from 'src/hooks/use-confirmation-dialog';
 import { useDragAndDropFile } from 'src/hooks/use-drag-and-drop-file';
 import { useImportExport } from 'src/hooks/use-import-export';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
+import { useRootSelector } from 'src/stores';
+import { syncOperationsSelectors } from 'src/stores/sync';
 import { useGetConnectedSitesForLocalSiteQuery } from 'src/stores/sync/connected-sites';
 
 interface ContentTabImportExportProps {
@@ -343,14 +344,21 @@ const ImportSite = ( {
 export function ContentTabImportExport( { selectedSite }: ContentTabImportExportProps ) {
 	const { __ } = useI18n();
 	const [ isSupported, setIsSupported ] = useState< boolean | null >( null );
-	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
 	const { user } = useAuth();
 	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
 		localSiteId: selectedSite.id,
 		userId: user?.id,
 	} );
-	const isPulling = connectedSites.some( ( site ) => isSiteIdPulling( selectedSite.id, site.id ) );
-	const isPushing = connectedSites.some( ( site ) => isSiteIdPushing( selectedSite.id, site.id ) );
+	const isPulling = useRootSelector( ( state ) =>
+		connectedSites.some( ( site ) =>
+			syncOperationsSelectors.selectIsSiteIdPulling( selectedSite.id, site.id )( state )
+		)
+	);
+	const isPushing = useRootSelector( ( state ) =>
+		connectedSites.some( ( site ) =>
+			syncOperationsSelectors.selectIsSiteIdPushing( selectedSite.id, site.id )( state )
+		)
+	);
 	const isThisSiteSyncing = isPulling || isPushing;
 
 	useEffect( () => {

apps/studio/src/components/publish-site-button.tsx

@@ -1,12 +1,13 @@
 import { cloudUpload } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useCallback } from 'react';
-import { useSyncSites } from 'src/hooks/sync-sites';
 import { useAuth } from 'src/hooks/use-auth';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { generateCheckoutUrl } from 'src/lib/generate-checkout-url';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { ConnectButton } from 'src/modules/sync/components/connect-button';
+import { useRootSelector } from 'src/stores';
+import { syncOperationsSelectors } from 'src/stores/sync';
 import { useGetConnectedSitesForLocalSiteQuery } from 'src/stores/sync/connected-sites';
 
 export const PublishSiteButton = () => {
@@ -17,7 +18,8 @@ export const PublishSiteButton = () => {
 		localSiteId: selectedSite?.id,
 		userId: user?.id,
 	} );
-	const { isAnySitePulling, isAnySitePushing } = useSyncSites();
+	const isAnySitePulling = useRootSelector( syncOperationsSelectors.selectIsAnySitePulling );
+	const isAnySitePushing = useRootSelector( syncOperationsSelectors.selectIsAnySitePushing );
 	const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
 
 	const handlePublishClick = useCallback( () => {

apps/studio/src/components/root.tsx

@@ -9,7 +9,6 @@ import AuthProvider from 'src/components/auth-provider';
 import CrashTester from 'src/components/crash-tester';
 import ErrorBoundary from 'src/components/error-boundary';
 import { WordPressStyles } from 'src/components/wordpress-styles';
-import { SyncSitesProvider } from 'src/hooks/sync-sites/sync-sites-context';
 import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { FeatureFlagsProvider } from 'src/hooks/use-feature-flags';
 import { ImportExportProvider } from 'src/hooks/use-import-export';
@@ -43,9 +42,7 @@ const Root = () => {
 										<ThemeDetailsProvider>
 											<OnboardingProvider>
 												<ImportExportProvider>
-													<SyncSitesProvider>
-														<App />
-													</SyncSitesProvider>
+													<App />
 												</ImportExportProvider>
 											</OnboardingProvider>
 										</ThemeDetailsProvider>

apps/studio/src/components/settings-site-menu.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from '@wordpress/components';
-import { useSyncSites } from 'src/hooks/sync-sites';
 import { useSiteDetails } from 'src/hooks/use-site-details';
+import { useRootSelector } from 'src/stores';
+import { syncOperationsSelectors } from 'src/stores/sync';
 
 type SettingsMenuItemProps = {
 	onClick: () => void;
@@ -14,12 +15,16 @@ export const SettingsMenuItem = ( {
 	isDestructive = false,
 }: SettingsMenuItemProps ) => {
 	const { isDeleting, sites, selectedSite } = useSiteDetails();
-	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
+	const isPulling = useRootSelector(
+		syncOperationsSelectors.selectIsSiteIdPulling( selectedSite?.id ?? '' )
+	);
+	const isPushing = useRootSelector(
+		syncOperationsSelectors.selectIsSiteIdPushing( selectedSite?.id ?? '' )
+	);
 	if ( ! selectedSite ) {
 		return null;
 	}
-	const isThisSiteSyncing =
-		isSiteIdPulling( selectedSite.id ) || isSiteIdPushing( selectedSite.id );
+	const isThisSiteSyncing = isPulling || isPushing;
 	const isAddingSite = sites.some( ( site ) => site.isAddingSite );
 	const isDisabled = isDeleting || isThisSiteSyncing || isAddingSite;
 

apps/studio/src/components/site-management-actions.tsx

@@ -3,8 +3,9 @@ import { useI18n } from '@wordpress/react-i18n';
 import { ActionButton } from 'src/components/action-button';
 import { PublishSiteButton } from 'src/components/publish-site-button';
 import { Tooltip } from 'src/components/tooltip';
-import { useSyncSites } from 'src/hooks/sync-sites';
 import { useImportExport } from 'src/hooks/use-import-export';
+import { useRootSelector } from 'src/stores';
+import { syncOperationsSelectors } from 'src/stores/sync';
 
 export interface SiteManagementActionProps {
 	onStop: ( id: string ) => Promise< void >;
@@ -21,14 +22,15 @@ export const SiteManagementActions = ( {
 }: SiteManagementActionProps ) => {
 	const { __ } = useI18n();
 	const { isSiteImporting } = useImportExport();
-	const { isSiteIdPulling } = useSyncSites();
+	const isPulling = useRootSelector(
+		syncOperationsSelectors.selectIsSiteIdPulling( selectedSite?.id ?? '' )
+	);
 
 	if ( ! selectedSite ) {
 		return null;
 	}
 
 	const isImporting = isSiteImporting( selectedSite.id );
-	const isPulling = isSiteIdPulling( selectedSite.id );
 	const disabled = isImporting || isPulling;
 
 	let buttonLabelOnDisabled: string = __( 'Importing…' );

apps/studio/src/components/site-menu.tsx

@@ -5,7 +5,6 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useState } from 'react';
 import { XDebugIcon } from 'src/components/icons/xdebug-icon';
 import { Tooltip } from 'src/components/tooltip';
-import { useSyncSites } from 'src/hooks/sync-sites';
 import { useContentTabs } from 'src/hooks/use-content-tabs';
 import { useDeleteSite } from 'src/hooks/use-delete-site';
 import { useImportExport } from 'src/hooks/use-import-export';
@@ -15,7 +14,9 @@ import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { supportedEditorConfig } from 'src/modules/user-settings/lib/editor';
 import { getTerminalName } from 'src/modules/user-settings/lib/terminal';
+import { useRootSelector } from 'src/stores';
 import { useGetUserEditorQuery, useGetUserTerminalQuery } from 'src/stores/installed-apps-api';
+import { syncOperationsSelectors } from 'src/stores/sync';
 
 interface SiteMenuProps {
 	className?: string;
@@ -158,13 +159,12 @@ function SiteItem( {
 		useSiteDetails();
 	const isSelected = site === selectedSite;
 	const { isSiteImporting, isSiteExporting } = useImportExport();
-	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
 	const { data: editor } = useGetUserEditorQuery();
 	const { data: terminal } = useGetUserTerminalQuery();
 	const isImporting = isSiteImporting( site.id );
 	const isExporting = isSiteExporting( site.id );
-	const isPulling = isSiteIdPulling( site.id );
-	const isPushing = isSiteIdPushing( site.id );
+	const isPulling = useRootSelector( syncOperationsSelectors.selectIsSiteIdPulling( site.id ) );
+	const isPushing = useRootSelector( syncOperationsSelectors.selectIsSiteIdPushing( site.id ) );
 	const isSyncing = isPulling || isPushing;
 	const isDeleting = isSiteDeleting( site.id );
 	const showSpinner =

apps/studio/src/components/tests/app.test.tsx

@@ -3,7 +3,6 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { vi, type Mock } from 'vitest';
 import App from 'src/components/app';
-import { SyncSitesProvider } from 'src/hooks/sync-sites';
 import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { useOnboarding } from 'src/modules/onboarding/hooks/use-onboarding';
@@ -109,9 +108,7 @@ describe( 'App', () => {
 		} );
 		return render(
 			<Provider store={ store }>
-				<ContentTabsProvider>
-					<SyncSitesProvider>{ component }</SyncSitesProvider>
-				</ContentTabsProvider>
+				<ContentTabsProvider>{ component }</ContentTabsProvider>
 			</Provider>
 		);
 	};

apps/studio/src/components/tests/content-tab-import-export.test.tsx

@@ -4,7 +4,6 @@ import { act } from 'react';
 import { Provider } from 'react-redux';
 import { vi } from 'vitest';
 import { ContentTabImportExport } from 'src/components/content-tab-import-export';
-import { SyncSitesProvider } from 'src/hooks/sync-sites';
 import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { useImportExport } from 'src/hooks/use-import-export';
 import { useSiteDetails } from 'src/hooks/use-site-details';
@@ -49,9 +48,7 @@ beforeEach( () => {
 const renderWithProvider = ( children: React.ReactElement ) => {
 	return render(
 		<Provider store={ store }>
-			<ContentTabsProvider>
-				<SyncSitesProvider>{ children }</SyncSitesProvider>
-			</ContentTabsProvider>
+			<ContentTabsProvider>{ children }</ContentTabsProvider>
 		</Provider>
 	);
 };

apps/studio/src/components/tests/header.test.tsx

@@ -3,7 +3,6 @@ import { userEvent } from '@testing-library/user-event';
 import { Provider } from 'react-redux';
 import { vi, beforeAll, type Mock } from 'vitest';
 import Header from 'src/components/header';
-import { SyncSitesProvider } from 'src/hooks/sync-sites';
 import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { SiteDetailsProvider } from 'src/hooks/use-site-details';
 import { getIpcApi } from 'src/lib/get-ipc-api';
@@ -46,9 +45,7 @@ const renderWithProvider = ( children: React.ReactElement ) => {
 	return render(
 		<Provider store={ store }>
 			<ContentTabsProvider>
-				<SyncSitesProvider>
-					<SiteDetailsProvider>{ children }</SiteDetailsProvider>
-				</SyncSitesProvider>
+				<SiteDetailsProvider>{ children }</SiteDetailsProvider>
 			</ContentTabsProvider>
 		</Provider>
 	);

apps/studio/src/components/tests/main-sidebar.test.tsx

@@ -3,7 +3,6 @@ import { userEvent } from '@testing-library/user-event';
 import { Provider } from 'react-redux';
 import { vi } from 'vitest';
 import MainSidebar from 'src/components/main-sidebar';
-import { SyncSitesProvider } from 'src/hooks/sync-sites';
 import { useAuth } from 'src/hooks/use-auth';
 import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { store } from 'src/stores';
@@ -102,9 +101,7 @@ vi.mock( 'src/hooks/use-site-details', () => ( {
 const renderWithProvider = ( children: React.ReactElement ) => {
 	return render(
 		<Provider store={ store }>
-			<ContentTabsProvider>
-				<SyncSitesProvider>{ children }</SyncSitesProvider>
-			</ContentTabsProvider>
+			<ContentTabsProvider>{ children }</ContentTabsProvider>
 		</Provider>
 	);
 };

apps/studio/src/components/tests/site-content-tabs.test.tsx

@@ -2,7 +2,6 @@ import { act, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { vi } from 'vitest';
 import { SiteContentTabs } from 'src/components/site-content-tabs';
-import { SyncSitesProvider } from 'src/hooks/sync-sites';
 import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { store } from 'src/stores';
@@ -76,9 +75,7 @@ describe( 'SiteContentTabs', () => {
 	const renderWithProvider = ( component: React.ReactElement ) => {
 		return render(
 			<Provider store={ store }>
-				<ContentTabsProvider>
-					<SyncSitesProvider>{ component }</SyncSitesProvider>
-				</ContentTabsProvider>
+				<ContentTabsProvider>{ component }</ContentTabsProvider>
 			</Provider>
 		);
 	};

apps/studio/src/components/tests/site-management-actions.test.tsx

@@ -6,7 +6,6 @@ import {
 	SiteManagementActionProps,
 	SiteManagementActions,
 } from 'src/components/site-management-actions';
-import { SyncSitesProvider } from 'src/hooks/sync-sites';
 import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
 import { store } from 'src/stores';
 import { connectedSitesApi } from 'src/stores/sync/connected-sites';
@@ -55,9 +54,7 @@ describe( 'SiteManagementActions', () => {
 	const renderWithProvider = ( children: React.ReactElement ) => {
 		return render(
 			<Provider store={ store }>
-				<ContentTabsProvider>
-					<SyncSitesProvider>{ children }</SyncSitesProvider>
-				</ContentTabsProvider>
+				<ContentTabsProvider>{ children }</ContentTabsProvider>
 			</Provider>
 		);
 	};

apps/studio/src/hooks/sync-sites/index.ts

@@ -1 +1,2 @@
-export * from './sync-sites-context';
+export { useLastSyncTimeText } from './use-last-sync-time-text';
+export type { GetLastSyncTimeText } from './use-last-sync-time-text';