PRESS 2-617 | Optimize Onboarding

src/OnboardingSPA/components/Content/index.js

@@ -1,5 +1,5 @@
-import { Fragment, Suspense } from '@wordpress/element';
 import { Route, Routes } from 'react-router-dom';
+import { Fragment, memo, Suspense, useCallback } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../store';
 import { useSelect } from '@wordpress/data';
@@ -17,16 +17,19 @@ const Content = () => {
 		};
 	} );
 
-	const getMappedPages = ( routes ) => {
-		return routes?.map( ( route ) => (
-			<Route
-				key={ route.path }
-				path={ route.path }
-				end
-				element={ <route.Component /> }
-			/>
-		) );
-	};
+	const getMappedPages = useCallback(
+		( routes ) => {
+			return routes?.map( ( route ) => (
+				<Route
+					key={ route.path }
+					path={ route.path }
+					end
+					element={ <route.Component /> }
+				/>
+			) );
+		},
+		[ routes ]
+	);
 
 	return (
 		<main className="nfd-onboard-content">
@@ -37,4 +40,5 @@ const Content = () => {
 	);
 };
 
-export default Content;
+const ContentMemo = memo( Content );
+export default ContentMemo;

src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js

@@ -9,7 +9,6 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants';
 
 const DesignTypography = () => {
 	const drawerFontOptions = useRef();
-	const [ rerender, doRerender ] = useState( 0 );
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ selectedFont, setSelectedFont ] = useState();
 	const [ fontPalettes, setFontPalettes ] = useState();
@@ -75,12 +74,21 @@ const DesignTypography = () => {
 		// Changes the Global Styles to Recompute css properties
 		const globalStylesCopy = selectedGlobalStyle;
 
-		globalStylesCopy.styles.typography.fontFamily =
-			fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily;
-		globalStylesCopy.styles.blocks[ 'core/heading' ].typography.fontFamily =
-			fontPalettesCopy[ fontStyle ]?.styles.blocks[
+		if (
+			globalStylesCopy?.styles?.typography?.fontFamily &&
+			globalStylesCopy?.styles?.blocks[ 'core/heading' ]?.typography
+				?.fontFamily
+		) {
+			globalStylesCopy.styles.typography.fontFamily =
+				fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily;
+			globalStylesCopy.styles.blocks[
 				'core/heading'
-			].typography.fontFamily;
+			].typography.fontFamily =
+				fontPalettesCopy[ fontStyle ]?.styles.blocks[
+					'core/heading'
+				].typography.fontFamily;
+		}
+
 		if (
 			globalStylesCopy.styles?.blocks[ 'core/site-title' ]?.typography
 				?.fontFamily
@@ -113,7 +121,6 @@ const DesignTypography = () => {
 			useGlobalStylesOutput( globalStylesCopy, storedPreviewSettings )
 		);
 		setCurrentOnboardingData( currentData );
-		doRerender( 1 );
 	};
 
 	async function resetFonts() {
@@ -135,7 +142,6 @@ const DesignTypography = () => {
 		currentData.data.typography.slug = '';
 		currentData.data.typography.data = [];
 		setCurrentOnboardingData( currentData );
-		doRerender( 1 );
 	}
 
 	function buildPalettes() {
@@ -224,7 +230,6 @@ const DesignTypography = () => {
 		} */ }
 			{ fontPalettes && buildPalettes() }
 			{ /* { fontPalettes && buildCustomPalette() } */ }
-			<div className="custom-font-palette--hidden">{ rerender }</div>
 		</div>
 	);
 };

src/OnboardingSPA/components/LivePreview/BlockPreview/index.js

@@ -51,10 +51,14 @@ const BlockPreview = ( {
 		}
 	}, [ skeletonLoadingTime ] );
 
-	const storedPreviewSettings = useSelect(
-		( select ) => select( nfdOnboardingStore ).getPreviewSettings(),
-		[]
-	);
+	const { currentData, storedPreviewSettings } = useSelect( ( select ) => {
+		return {
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			storedPreviewSettings:
+				select( nfdOnboardingStore ).getPreviewSettings(),
+		};
+	}, [] );
 
 	useEffect( () => {
 		if ( previewSettings ) {
@@ -74,7 +78,7 @@ const BlockPreview = ( {
 		if ( ! previewSettings ) {
 			setSettings( storedPreviewSettings );
 		}
-	}, [ storedPreviewSettings ] );
+	}, [ storedPreviewSettings, currentData ] );
 
 	const SkeletonLivePreview = memo( () => {
 		return (
@@ -110,4 +114,5 @@ const BlockPreview = ( {
 	);
 };
 
-export default BlockPreview;
+const BlockPreviewMemo = memo( BlockPreview );
+export default BlockPreviewMemo;

src/OnboardingSPA/components/SkipButton/index.js

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -11,89 +12,88 @@ import { wpAdminPage, bluehostDashboardPage } from '../../../constants';
 /**
  * Interface Text Inputs with standard design.
  *
- * @returns
+ * @return
  */
 const SkipButton = () => {
+	const navigate = useNavigate();
+	const location = useLocation();
+	const { nextStep, currentData } = useSelect( ( select ) => {
+		return {
+			nextStep: select( nfdOnboardingStore ).getNextStep(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+		};
+	}, [] );
 
-    const navigate = useNavigate();
-    const location = useLocation();
-    const { previousStep, nextStep, currentData } = useSelect(
-        (select) => {
-            return {
-                previousStep: select(nfdOnboardingStore).getPreviousStep(),
-                nextStep: select(nfdOnboardingStore).getNextStep(),
-                currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
-            };
-        },
-        []
-    );
+	const isLastStep = null === nextStep || false === nextStep;
 
-    const isFirstStep = null === previousStep || false === previousStep;
-    const isLastStep = null === nextStep || false === nextStep;
+	async function syncSocialSettingsFinish( currentData ) {
+		const initialData = await getSettings();
+		const result = await setSettings( currentData?.data?.socialData );
+		if ( result?.error != null ) {
+			console.error( 'Unable to Save Social Data!' );
+			return initialData?.body;
+		}
+		return result?.body;
+	}
 
+	async function saveData( path, currentData ) {
+		if ( currentData ) {
+			currentData.isComplete = new Date().getTime();
 
-    async function syncSocialSettingsFinish(currentData) {
-        const initialData = await getSettings();
-        const result = await setSettings(currentData?.data?.socialData);
-        if (result?.error != null) {
-            console.error('Unable to Save Social Data!');
-            return initialData?.body;
-        }
-        return result?.body;
-    }
+			// If Social Data is changed then sync it
+			if ( path?.includes( 'basic-info' ) ) {
+				const socialData = await syncSocialSettingsFinish(
+					currentData
+				);
 
-    async function saveData(path, currentData) {
+				// If Social Data is changed then Sync that also to the store
+				if ( socialData && currentData?.data )
+					currentData.data.socialData = socialData;
+			}
+			setFlow( currentData );
+		}
+		// Redirect to Admin Page for normal customers
+		// and Bluehost Dashboard for ecommerce customers
+		const exitLink = exitToWordpressForEcommerce()
+			? bluehostDashboardPage
+			: wpAdminPage;
+		window.location.replace( exitLink );
+	}
 
-        if (currentData) {
-          currentData.isComplete = new Date().getTime();
+	function skipStep() {
+		if ( isLastStep ) {
+			return (
+				<Button
+					className="skip-button"
+					onClick={ () => saveData( location.pathname, currentData ) }
+				>
+					{ __( 'Skip this Step', 'wp-module-onboarding' ) }
+				</Button>
+			);
+		}
+		return (
+			<Button
+				className="skip-button"
+				onClick={ () => navigate( nextStep.path ) }
+			>
+				{ __( 'Skip this Step', 'wp-module-onboarding' ) }
+			</Button>
+		);
+	}
 
-            // If Social Data is changed then sync it
-            if (path?.includes('basic-info')) {
-                const socialData = await syncSocialSettingsFinish(currentData);
-
-                // If Social Data is changed then Sync that also to the store
-                if (socialData && currentData?.data)
-                    currentData.data.socialData = socialData;
-            }
-            setFlow(currentData);
-        }
-        // Redirect to Admin Page for normal customers 
-        // and Bluehost Dashboard for ecommerce customers
-        const exitLink = exitToWordpressForEcommerce() ? bluehostDashboardPage : wpAdminPage;
-        window.location.replace(exitLink);
-    }
-
-    function skipStep() {
-       if (isLastStep) 
-       {
-           return (
-               <Button className="skip-button"
-                   onClick={(e) => saveData(location.pathname, currentData)} >
-                    {__('Skip this Step', 'wp-module-onboarding')}
-                </Button>
-           );
-       }
-       else {
-           return (
-               <Button className="skip-button"
-                   onClick={(e) => navigate(nextStep.path)} >
-                   {__('Skip this Step', 'wp-module-onboarding')}
-               </Button>
-           );
-       }
-    }
-
-    return skipStep();
+	return skipStep();
 };
 
-
 /*
- * check if this is the last step 
+ * check if this is the last step
  */
 const exitToWordpressForEcommerce = () => {
-    if (window.nfdOnboarding.currentFlow == 'ecommerce') {
-        return true;
-    }
-    return false;
-}
-export default SkipButton;
+	if ( window.nfdOnboarding.currentFlow == 'ecommerce' ) {
+		return true;
+	}
+	return false;
+};
+
+const SkipButtonMemo = memo( SkipButton );
+export default SkipButtonMemo;