stash

Automattic · Jan 17, 2025 · 7ba5714 · 7ba5714
1 parent db1e8ee
commit 7ba5714
Showing 1 changed file with 49 additions and 22 deletions.
diff --git a/client/me/account/toggle-landing-page.tsx b/client/me/account/toggle-landing-page.tsx
@@ -5,6 +5,7 @@ import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { successNotice } from 'calypso/state/notices/actions';
 import { savePreference } from 'calypso/state/preferences/actions';
 import { getPreference, isSavingPreference } from 'calypso/state/preferences/selectors';
+import { useState, useEffect } from 'react';
 
 function ToggleLandingPageSettings() {
 	const translate = useTranslate();
@@ -17,40 +18,66 @@ function ToggleLandingPageSettings() {
 	);
 	const isSaving = useSelector( isSavingPreference );
 
-	// Determine the selected option
-	const getSelectedOption = () => {
+	// Local state to handle selected option
+	const [ selectedOption, setSelectedOption ] = useState( 'default' );
+
+	// Sync local state with Redux state when component mounts or Redux state changes
+	useEffect( () => {
 		if ( useSitesAsLandingPage ) {
-			return useReaderAsLandingPage ? 'reader' : 'my-sites';
+			setSelectedOption( useReaderAsLandingPage ? 'reader' : 'my-sites' );
+		} else {
+			setSelectedOption( 'default' );
 		}
-		return 'default';
-	};
+	}, [ useSitesAsLandingPage, useReaderAsLandingPage ] );
 
 	async function handlePreferenceChange( selectedOption: string ) {
-		const preference = { landingPage: selectedOption, updatedAt: Date.now() };
-		const preferenceKey =
-			selectedOption === 'my-sites' ? 'sites-landing-page' : 'reader-landing-page';
+		// Update local state for instant UI feedback
+		setSelectedOption( selectedOption );
+
+		console.log( 'selectedOption', selectedOption );
+
+		let preferenceKey = null;
+		let preference = { landingPage: selectedOption, updatedAt: Date.now() };
 
-		await dispatch( savePreference( preferenceKey, preference ) );
+		if ( selectedOption === 'my-sites' ) {
+			preferenceKey = 'sites-landing-page';
+		} else if ( selectedOption === 'reader' ) {
+			preferenceKey = 'reader-landing-page';
+		} else if ( selectedOption === 'default' ) {
+			// Handle default case: reset both preferences to unset state
+			await dispatch( savePreference( 'sites-landing-page', null ) );
+			await dispatch( savePreference( 'reader-landing-page', null ) );
+			dispatch(
+				successNotice( translate( 'Settings reset to default successfully!' ), {
+					id: 'sites-landing-page-reset',
+					duration: 10000,
+				} )
+			);
+			return;
+		}
+
+		if ( preferenceKey ) {
+			await dispatch( savePreference( preferenceKey, preference ) );
 
-		dispatch(
-			successNotice( translate( 'Settings saved successfully!' ), {
-				id: 'sites-landing-page-save',
-				duration: 10000,
-			} )
-		);
+			dispatch(
+				successNotice( translate( 'Settings saved successfully!' ), {
+					id: 'sites-landing-page-save',
+					duration: 10000,
+				} )
+			);
 
-		dispatch(
-			recordTracksEvent( 'calypso_settings_sites_dashboard_landing_page_toggle', {
-				sites_as_landing_page: useSitesAsLandingPage,
-				reader_as_landing_page: useReaderAsLandingPage,
-			} )
-		);
+			dispatch(
+				recordTracksEvent( 'calypso_settings_sites_dashboard_landing_page_toggle', {
+					landing_page_option: selectedOption,
+				} )
+			);
+		}
 	}
 
 	return (
 		<div>
 			<RadioControl
-				selected={ getSelectedOption() }
+				selected={ selectedOption }
 				options={ [
 					{ label: translate( 'My primary site' ), value: 'default' },
 					{ label: translate( 'All sites' ), value: 'my-sites' },