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

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 { useInitializeSyncStates } from 'src/hooks/sync-sites/use-initialize-sync-states';
+import { useListenDeepLinkConnection } from 'src/hooks/sync-sites/use-listen-deep-link-connection';
 import { useLocalizationSupport } from 'src/hooks/use-localization-support';
 import { useSidebarVisibility } from 'src/hooks/use-sidebar-visibility';
 import { useSiteDetails } from 'src/hooks/use-site-details';
@@ -33,6 +35,10 @@ export default function App() {
 	const isEmpty = ! loadingSites && ! localSites.length;
 	const shouldShowWhatsNew = showWhatsNew && ! isEmpty;
 
+	// Initialize sync states and listen for deep link connections
+	useInitializeSyncStates();
+	useListenDeepLinkConnection();
+
 	useEffect( () => {
 		void getIpcApi().setupAppMenu( { needsOnboarding } );
 	}, [ needsOnboarding ] );

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

@@ -12,7 +12,8 @@ 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 { useSyncPull } from 'src/hooks/sync-sites/use-sync-pull';
+import { useSyncPush } from 'src/hooks/sync-sites/use-sync-push';
 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';
@@ -343,7 +344,8 @@ const ImportSite = ( {
 export function ContentTabImportExport( { selectedSite }: ContentTabImportExportProps ) {
 	const { __ } = useI18n();
 	const [ isSupported, setIsSupported ] = useState< boolean | null >( null );
-	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
+	const { isSiteIdPulling } = useSyncPull();
+	const { isSiteIdPushing } = useSyncPush();
 	const { user } = useAuth();
 	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
 		localSiteId: selectedSite.id,

src/components/delete-site.tsx

@@ -1,7 +1,8 @@
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
-import { useSyncSites } from 'src/hooks/sync-sites/sync-sites-context';
+import { useSyncPull } from 'src/hooks/sync-sites/use-sync-pull';
+import { useSyncPush } from 'src/hooks/sync-sites/use-sync-push';
 import { useDeleteSite } from 'src/hooks/use-delete-site';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 
@@ -13,7 +14,8 @@ const DeleteSite = ( { onClose }: DeleteSiteProps ) => {
 	const { __ } = useI18n();
 	const { selectedSite, isDeleting } = useSiteDetails();
 	const { handleDeleteSite } = useDeleteSite();
-	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
+	const { isSiteIdPulling } = useSyncPull();
+	const { isSiteIdPushing } = useSyncPush();
 	const isThisSiteSyncing =
 		isSiteIdPulling( selectedSite?.id ?? '' ) || isSiteIdPushing( selectedSite?.id ?? '' );
 

src/components/publish-site-button.tsx

@@ -1,7 +1,8 @@
 import { cloudUpload } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useCallback } from 'react';
-import { useSyncSites } from 'src/hooks/sync-sites';
+import { useSyncPull } from 'src/hooks/sync-sites/use-sync-pull';
+import { useSyncPush } from 'src/hooks/sync-sites/use-sync-push';
 import { useAuth } from 'src/hooks/use-auth';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { generateCheckoutUrl } from 'src/lib/generate-checkout-url';
@@ -17,7 +18,8 @@ export const PublishSiteButton = () => {
 		localSiteId: selectedSite?.id,
 		userId: user?.id,
 	} );
-	const { isAnySitePulling, isAnySitePushing } = useSyncSites();
+	const { isAnySitePulling } = useSyncPull();
+	const { isAnySitePushing } = useSyncPush();
 	const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
 
 	const handlePublishClick = useCallback( () => {

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>

src/components/site-management-actions.tsx

@@ -3,7 +3,7 @@ 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 { useSyncPull } from 'src/hooks/sync-sites/use-sync-pull';
 import { useImportExport } from 'src/hooks/use-import-export';
 
 export interface SiteManagementActionProps {
@@ -21,7 +21,7 @@ export const SiteManagementActions = ( {
 }: SiteManagementActionProps ) => {
 	const { __ } = useI18n();
 	const { isSiteImporting } = useImportExport();
-	const { isSiteIdPulling } = useSyncSites();
+	const { isSiteIdPulling } = useSyncPull();
 
 	if ( ! selectedSite ) {
 		return null;

src/components/site-menu.tsx

@@ -4,7 +4,8 @@ import { Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
 import { Tooltip } from 'src/components/tooltip';
-import { useSyncSites } from 'src/hooks/sync-sites';
+import { useSyncPull } from 'src/hooks/sync-sites/use-sync-pull';
+import { useSyncPush } from 'src/hooks/sync-sites/use-sync-push';
 import { useContentTabs } from 'src/hooks/use-content-tabs';
 import { useDeleteSite } from 'src/hooks/use-delete-site';
 import { useImportExport } from 'src/hooks/use-import-export';
@@ -118,7 +119,8 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 	const { selectedSite, setSelectedSiteId, loadingServer, isSiteDeleting } = useSiteDetails();
 	const isSelected = site === selectedSite;
 	const { isSiteImporting, isSiteExporting } = useImportExport();
-	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
+	const { isSiteIdPulling } = useSyncPull();
+	const { isSiteIdPushing } = useSyncPush();
 	const { data: editor } = useGetUserEditorQuery();
 	const { data: terminal } = useGetUserTerminalQuery();
 	const isImporting = isSiteImporting( site.id );

src/components/tests/app.test.tsx

@@ -2,7 +2,6 @@ import { configureStore } from '@reduxjs/toolkit';
 import { render, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 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';
@@ -107,9 +106,7 @@ describe( 'App', () => {
 		);
 		return render(
 			<Provider store={ store }>
-				<ContentTabsProvider>
-					<SyncSitesProvider>{ component }</SyncSitesProvider>
-				</ContentTabsProvider>
+				<ContentTabsProvider>{ component }</ContentTabsProvider>
 			</Provider>
 		);
 	};

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

@@ -3,7 +3,6 @@ import { userEvent } from '@testing-library/user-event';
 import { act } from 'react';
 import { Provider } from 'react-redux';
 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';
@@ -48,9 +47,7 @@ beforeEach( () => {
 const renderWithProvider = ( children: React.ReactElement ) => {
 	return render(
 		<Provider store={ store }>
-			<ContentTabsProvider>
-				<SyncSitesProvider>{ children }</SyncSitesProvider>
-			</ContentTabsProvider>
+			<ContentTabsProvider>{ children }</ContentTabsProvider>
 		</Provider>
 	);
 };

src/components/tests/header.test.tsx

@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { Provider } from 'react-redux';
 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>
 	);

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

@@ -2,7 +2,6 @@ import { render, act, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { Provider } from 'react-redux';
 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';
@@ -101,9 +100,7 @@ jest.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>
 	);
 };

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

@@ -1,7 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 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';
@@ -73,9 +72,7 @@ describe( 'SiteContentTabs', () => {
 	const renderWithProvider = ( component: React.ReactElement ) => {
 		return render(
 			<Provider store={ store }>
-				<ContentTabsProvider>
-					<SyncSitesProvider>{ component }</SyncSitesProvider>
-				</ContentTabsProvider>
+				<ContentTabsProvider>{ component }</ContentTabsProvider>
 			</Provider>
 		);
 	};

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

@@ -5,7 +5,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';
@@ -54,9 +53,7 @@ describe( 'SiteManagementActions', () => {
 	const renderWithProvider = ( children: React.ReactElement ) => {
 		return render(
 			<Provider store={ store }>
-				<ContentTabsProvider>
-					<SyncSitesProvider>{ children }</SyncSitesProvider>
-				</ContentTabsProvider>
+				<ContentTabsProvider>{ children }</ContentTabsProvider>
 			</Provider>
 		);
 	};

src/hooks/sync-sites/index.ts

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