Move Sync connected sites to redux slice (#1680)

* Refactor connected sites to use redux slice.
* Remove useSiteSyncManagement
* Update tests to use the Redux store
* No user-facing changes

Author: sejas

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

@@ -19,6 +19,7 @@ import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { getLocalizedLink } from 'src/lib/get-localized-link';
 import { useI18nLocale } from 'src/stores';
+import { useConnectedSitesData } from 'src/stores/sync';
 
 interface ContentTabImportExportProps {
 	selectedSite: SiteDetails;
@@ -318,7 +319,8 @@ const ImportSite = ( {
 export function ContentTabImportExport( { selectedSite }: ContentTabImportExportProps ) {
 	const { __ } = useI18n();
 	const [ isSupported, setIsSupported ] = useState< boolean | null >( null );
-	const { isSiteIdPulling, isSiteIdPushing, connectedSites } = useSyncSites();
+	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
+	const { connectedSites } = useConnectedSitesData();
 	const isPulling = connectedSites.some( ( site ) => isSiteIdPulling( selectedSite.id, site.id ) );
 	const isPushing = connectedSites.some( ( site ) => isSiteIdPushing( selectedSite.id, site.id ) );
 	const isThisSiteSyncing = isPulling || isPushing;

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

@@ -1,11 +1,20 @@
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
+import { Provider } from 'react-redux';
 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';
+
+jest.mock( 'src/lib/get-ipc-api', () => ( {
+	getIpcApi: () => ( {
+		getConnectedWpcomSites: jest.fn().mockResolvedValue( [] ),
+		updateSingleConnectedWpcomSite: jest.fn().mockResolvedValue( {} ),
+	} ),
+} ) );
 
 const defaultProps = {
 	onStart: jest.fn(),
@@ -18,9 +27,11 @@ describe( 'SiteManagementActions', () => {
 	} );
 	const renderWithProvider = ( children: React.ReactElement ) => {
 		return render(
-			<ContentTabsProvider>
-				<SyncSitesProvider>{ children }</SyncSitesProvider>
-			</ContentTabsProvider>
+			<Provider store={ store }>
+				<ContentTabsProvider>
+					<SyncSitesProvider>{ children }</SyncSitesProvider>
+				</ContentTabsProvider>
+			</Provider>
 		);
 	};
 	it( 'should not render when selectedSite is undefined', () => {

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

@@ -1,15 +1,12 @@
 import { __, sprintf } from '@wordpress/i18n';
 import React, { createContext, useCallback, useContext, useState } from 'react';
 import { useListenDeepLinkConnection } from 'src/hooks/sync-sites/use-listen-deep-link-connection';
-import {
-	UseSiteSyncManagement,
-	useSiteSyncManagement,
-} from 'src/hooks/sync-sites/use-site-sync-management';
 import { PullStates, UseSyncPull, useSyncPull } from 'src/hooks/sync-sites/use-sync-pull';
 import { PushStates, UseSyncPush, useSyncPush } from 'src/hooks/sync-sites/use-sync-push';
 import { useFormatLocalizedTimestamps } from 'src/hooks/use-format-localized-timestamps';
 import { getIpcApi } from 'src/lib/get-ipc-api';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import { useAppDispatch } from 'src/stores';
+import { useConnectedSitesData, useSyncSitesData, connectedSitesActions } from 'src/stores/sync';
 
 type GetLastSyncTimeText = ( timestamp: string | null, type: 'pull' | 'push' ) => string;
 type UpdateSiteTimestamp = (
@@ -18,26 +15,17 @@ type UpdateSiteTimestamp = (
 	type: 'pull' | 'push'
 ) => Promise< void >;
 
-type IsSyncSitesSelectorOpen = boolean | { disconnectSiteId?: number };
-
 export type SyncSitesContextType = Omit< UseSyncPull, 'pullStates' > &
 	Omit< UseSyncPush, 'pushStates' > &
-	Omit< UseSiteSyncManagement, 'loadConnectedSites' > & {
+	ReturnType< typeof useSyncSitesData > & {
 		getLastSyncTimeText: GetLastSyncTimeText;
-		isSyncSitesSelectorOpen: IsSyncSitesSelectorOpen;
-		setIsSyncSitesSelectorOpen: ( open: IsSyncSitesSelectorOpen ) => void;
-		closeSyncSitesSelector: () => void;
 	};
 
 const SyncSitesContext = createContext< SyncSitesContextType | undefined >( undefined );
 
 export function SyncSitesProvider( { children }: { children: React.ReactNode } ) {
 	const { formatRelativeTime } = useFormatLocalizedTimestamps();
 	const [ pullStates, setPullStates ] = useState< PullStates >( {} );
-	const [ connectedSites, setConnectedSites ] = useState< SyncSite[] >( [] );
-	const [ isSyncSitesSelectorOpen, setIsSyncSitesSelectorOpen ] =
-		useState< IsSyncSitesSelectorOpen >( false );
-	const closeSyncSitesSelector = useCallback( () => setIsSyncSitesSelectorOpen( false ), [] );
 
 	const getLastSyncTimeText = useCallback< GetLastSyncTimeText >(
 		( timestamp, type ) => {
@@ -57,10 +45,13 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 		[ formatRelativeTime ]
 	);
 
+	const { connectedSites } = useConnectedSitesData();
+	const dispatch = useAppDispatch();
+
 	const updateSiteTimestamp = useCallback< UpdateSiteTimestamp >(
-		async ( siteId, localSiteId, type ) => {
+		async ( siteId, localSiteIdParam, type ) => {
 			const site = connectedSites.find(
-				( { id, localSiteId: siteLocalId } ) => siteId === id && localSiteId === siteLocalId
+				( { id, localSiteId: siteLocalId } ) => siteId === id && localSiteIdParam === siteLocalId
 			);
 
 			if ( ! site ) {
@@ -74,14 +65,18 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				};
 
 				await getIpcApi().updateSingleConnectedWpcomSite( updatedSite );
-				setConnectedSites( ( sites ) =>
-					sites.map( ( s ) => ( s.id === site.id ? updatedSite : s ) )
+
+				dispatch(
+					connectedSitesActions.updateSite( {
+						localSiteId: localSiteIdParam,
+						site: updatedSite,
+					} )
 				);
 			} catch ( error ) {
 				console.error( 'Failed to update timestamp:', error );
 			}
 		},
-		[ connectedSites ]
+		[ connectedSites, dispatch ]
 	);
 
 	const { pullSite, isAnySitePulling, isSiteIdPulling, clearPullState, getPullState } = useSyncPull(
@@ -103,14 +98,8 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 		}
 	);
 
-	const { connectSite, disconnectSite, syncSites, isFetching, refetchSites } =
-		useSiteSyncManagement( {
-			connectedSites,
-			setConnectedSites,
-			closeSyncSitesSelector,
-		} );
-
-	useListenDeepLinkConnection( { connectSite, refetchSites } );
+	const { syncSites, isFetching, refetchSites } = useSyncSitesData();
+	useListenDeepLinkConnection( { refetchSites } );
 
 	return (
 		<SyncSitesContext.Provider
@@ -119,9 +108,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				isAnySitePulling,
 				isSiteIdPulling,
 				clearPullState,
-				connectedSites,
-				connectSite,
-				disconnectSite,
 				syncSites,
 				refetchSites,
 				isFetching,
@@ -132,9 +118,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				isSiteIdPushing,
 				clearPushState,
 				getLastSyncTimeText,
-				isSyncSitesSelectorOpen,
-				setIsSyncSitesSelectorOpen,
-				closeSyncSitesSelector,
 			} }
 		>
 			{ children }

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

@@ -2,14 +2,14 @@ import { SyncSitesContextType } from 'src/hooks/sync-sites/sync-sites-context';
 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 { useConnectedSitesOperations } from 'src/stores/sync';
 
 export function useListenDeepLinkConnection( {
-	connectSite,
 	refetchSites,
 }: {
-	connectSite: SyncSitesContextType[ 'connectSite' ];
 	refetchSites: SyncSitesContextType[ 'refetchSites' ];
 } ) {
+	const { connectSite } = useConnectedSitesOperations();
 	const { selectedSite, setSelectedSiteId } = useSiteDetails();
 	const { setSelectedTab, selectedTab } = useContentTabs();