Move SyncModalMode piece of state to Redux

Author: epeicher

src/modules/sync/index.tsx

@@ -127,18 +127,13 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 	const { __ } = useI18n();
 	const dispatch = useAppDispatch();
 	const isModalOpen = useRootSelector( connectedSitesSelectors.selectIsModalOpen );
+	const reduxModalMode = useRootSelector( connectedSitesSelectors.selectModalMode );
 	const { connectedSites } = useConnectedSitesData();
 	const { syncSites, isFetching, refetchSites } = useSyncSitesData();
 	const { connectSite, disconnectSite } = useConnectedSitesOperations();
 	const { pushSite, pullSite } = useSyncSites();
 
-	const [ modalState, setModalState ] = useState< {
-		mode: SyncModalMode | null;
-		selectedRemoteSite: SyncSite | null;
-	} >( {
-		mode: null,
-		selectedRemoteSite: null,
-	} );
+	const [ selectedRemoteSite, setSelectedRemoteSite ] = useState< SyncSite | null >( null );
 
 	const { isAuthenticated } = useAuth();
 
@@ -164,13 +159,11 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 	};
 
 	const handleLaunchSite = () => {
-		setModalState( ( prev ) => ( { ...prev, mode: 'push' } ) );
-		dispatch( connectedSitesActions.openModal() );
+		dispatch( connectedSitesActions.openModal( 'push' ) );
 	};
 
 	const handleImportSite = () => {
-		setModalState( ( prev ) => ( { ...prev, mode: 'pull' } ) );
-		dispatch( connectedSitesActions.openModal() );
+		dispatch( connectedSitesActions.openModal( 'pull' ) );
 	};
 
 	const handleSiteSelection = async ( siteId: number, mode: SyncModalMode | null ) => {
@@ -193,19 +186,13 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 		await handleConnect( selectedSiteFromList );
 
 		if ( mode === 'push' || mode === 'pull' ) {
-			setModalState( ( prev ) => ( {
-				...prev,
-				mode: mode,
-				selectedRemoteSite: selectedSiteFromList,
-			} ) );
+			dispatch( connectedSitesActions.setModalMode( mode ) );
+			setSelectedRemoteSite( selectedSiteFromList );
 		} else {
-			setModalState( ( prev ) => ( { ...prev, mode: null } ) );
+			dispatch( connectedSitesActions.setModalMode( null ) );
 		}
 	};
 
-	// Using a local variable to avoid non-null assertion operator in pushSite and pullSite
-	const selectedRemoteSite = modalState.selectedRemoteSite;
-
 	return (
 		<div className="flex flex-col h-full overflow-y-auto">
 			{ connectedSites.length > 0 ? (
@@ -218,7 +205,7 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 					<div className="sticky bottom-0 bg-white/[0.8] backdrop-blur-sm w-full px-8 py-6 mt-auto">
 						<ConnectButton
 							variant="primary"
-							connectSite={ () => dispatch( connectedSitesActions.openModal() ) }
+							connectSite={ () => dispatch( connectedSitesActions.openModal( 'connect' ) ) }
 							disableConnectButtonStyle={ true }
 						>
 							{ __( 'Connect another site' ) }
@@ -250,47 +237,37 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 
 			{ isModalOpen && (
 				<SyncSitesModalSelector
-					mode={ modalState.mode || 'connect' }
+					mode={ reduxModalMode || 'connect' }
 					isLoading={ isFetching }
 					onRequestClose={ () => {
 						dispatch( connectedSitesActions.closeModal() );
-						setModalState( ( prev ) => ( { ...prev, mode: null } ) );
 					} }
 					syncSites={ syncSites }
 					onInitialRender={ refetchSites }
 					onConnect={ async ( siteId: number ) => {
-						await handleSiteSelection( siteId, modalState.mode );
+						await handleSiteSelection( siteId, reduxModalMode );
 					} }
 					selectedSite={ selectedSite }
 				/>
 			) }
 
-			{ modalState.mode && modalState.mode !== 'connect' && selectedRemoteSite && (
+			{ reduxModalMode && reduxModalMode !== 'connect' && selectedRemoteSite && (
 				<SyncDialog
-					type={ modalState.mode }
+					type={ reduxModalMode }
 					localSite={ selectedSite }
 					remoteSite={ selectedRemoteSite }
 					onPush={ ( tree ) => {
 						const pushOptions = convertTreeToPushOptions( tree );
 						void pushSite( selectedRemoteSite, selectedSite, pushOptions );
-						setModalState( {
-							mode: null,
-							selectedRemoteSite: null,
-						} );
+						setSelectedRemoteSite( null );
 					} }
 					onPull={ ( tree ) => {
 						const pullOptions = convertTreeToPullOptions( tree );
 						void pullSite( selectedRemoteSite, selectedSite, pullOptions );
-						setModalState( {
-							mode: null,
-							selectedRemoteSite: null,
-						} );
+						setSelectedRemoteSite( null );
 					} }
 					onRequestClose={ () => {
-						setModalState( {
-							mode: null,
-							selectedRemoteSite: null,
-						} );
+						setSelectedRemoteSite( null );
 					} }
 				/>
 			) }

src/modules/sync/tests/index.test.tsx

@@ -45,11 +45,15 @@ jest.mock( 'src/stores/sync', () => ( {
 	useConnectedSitesOperations: jest.fn(),
 	connectedSitesSelectors: {
 		selectIsModalOpen: jest.fn(),
+		selectModalMode: jest.fn(),
 	},
 	connectedSitesActions: {
 		openModal: jest.fn().mockImplementation( () => {
 			return { type: 'connectedSites/openModal' };
 		} ),
+		setModalMode: jest.fn().mockImplementation( () => {
+			return { type: 'connectedSites/setModalMode' };
+		} ),
 		closeModal: jest.fn().mockImplementation( () => {
 			return { type: 'connectedSites/closeModal' };
 		} ),
@@ -190,6 +194,7 @@ describe( 'ContentTabSync', () => {
 		useAppDispatch.mockReturnValue( jest.fn() );
 
 		( connectedSitesSelectors.selectIsModalOpen as jest.Mock ).mockReturnValue( false );
+		( connectedSitesSelectors.selectModalMode as jest.Mock ).mockReturnValue( null );
 		( useRemoteFileTree as jest.Mock ).mockReturnValue( {
 			fetchChildren: jest.fn().mockResolvedValue( [
 				{
@@ -280,6 +285,7 @@ describe( 'ContentTabSync', () => {
 		fireEvent.click( importButton );
 
 		( connectedSitesSelectors.selectIsModalOpen as jest.Mock ).mockReturnValue( true );
+		( connectedSitesSelectors.selectModalMode as jest.Mock ).mockReturnValue( null );
 
 		renderWithProvider( <ContentTabSync selectedSite={ selectedSite } /> );
 		expect( screen.getByTestId( 'sync-sites-modal-selector' ) ).toBeInTheDocument();
@@ -362,6 +368,7 @@ describe( 'ContentTabSync', () => {
 		expect( importButton ).toBeInTheDocument();
 		fireEvent.click( importButton );
 		( connectedSitesSelectors.selectIsModalOpen as jest.Mock ).mockReturnValue( true );
+		( connectedSitesSelectors.selectModalMode as jest.Mock ).mockReturnValue( null );
 		renderWithProvider( <ContentTabSync selectedSite={ selectedSite } /> );
 		const createNewSiteButton = screen.getByRole( 'button', {
 			name: /Create a new WordPress.com site ↗/i,

src/stores/sync/connected-sites-slice.ts

@@ -2,13 +2,15 @@ import { createAsyncThunk, createSelector, createSlice, PayloadAction } from '@r
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { RootState } from 'src/stores';
 import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncModalMode } from 'src/modules/sync/types';
 
 type ConnectedSites = SyncSite[];
 type ModalState = false | true | { disconnectSiteId?: number };
 
 interface ConnectedSitesState {
 	sites: Record< string, ConnectedSites >; // Keyed by localSiteId for efficient lookups
 	isModalOpen: ModalState;
+	modalMode: SyncModalMode | null;
 }
 
 interface ConnectSiteParams {
@@ -24,6 +26,7 @@ interface DisconnectSiteParams {
 const initialState: ConnectedSitesState = {
 	sites: {},
 	isModalOpen: false,
+	modalMode: null,
 };
 
 export const loadAllConnectedSites = createAsyncThunk( 'connectedSites/loadAll', async () => {
@@ -96,12 +99,20 @@ const connectedSitesSlice = createSlice( {
 			delete state.sites[ action.payload ];
 		},
 
-		openModal: ( state ) => {
+		openModal: ( state, action: PayloadAction< SyncModalMode | undefined > ) => {
 			state.isModalOpen = true;
+			if ( action.payload ) {
+				state.modalMode = action.payload;
+			}
+		},
+
+		setModalMode: ( state, action: PayloadAction< SyncModalMode | null > ) => {
+			state.modalMode = action.payload;
 		},
 
 		closeModal: ( state ) => {
 			state.isModalOpen = false;
+			state.modalMode = null;
 		},
 	},
 	extraReducers: ( builder ) => {
@@ -125,6 +136,7 @@ export const connectedSitesReducer = connectedSitesSlice.reducer;
 
 export const connectedSitesSelectors = {
 	selectIsModalOpen: ( state: RootState ) => state.connectedSites.isModalOpen,
+	selectModalMode: ( state: RootState ) => state.connectedSites.modalMode,
 	selectSitesByLocalSiteId: createSelector(
 		[
 			( state: RootState ) => state.connectedSites,