From af244c0d37980209897015cdc44b24ac0f34d6aa Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 16 Feb 2023 18:33:21 +0530 Subject: [PATCH 01/17] Fixed Content Improved Performance 1) useCallback for route determination that is const 2) Used memo so as to reduce renders for Content by around 60% as this is the parent for many pages. --- src/OnboardingSPA/components/Content/index.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/OnboardingSPA/components/Content/index.js b/src/OnboardingSPA/components/Content/index.js index de7b667da..eb265d6b8 100644 --- a/src/OnboardingSPA/components/Content/index.js +++ b/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,7 +17,7 @@ const Content = () => { }; } ); - const getMappedPages = ( routes ) => { + const getMappedPages = useCallback(( routes ) => { return routes?.map( ( route ) => ( { element={ } /> ) ); - }; - + }, [ routes ]); + console.count('Content'); return (
}> @@ -37,4 +37,5 @@ const Content = () => { ); }; -export default Content; +const ContentMemo = memo(Content); +export default ContentMemo; From d1068d123e4f7b2dfd7d2765402db7dd43f675c3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 16 Feb 2023 18:33:36 +0530 Subject: [PATCH 02/17] Update index.js --- src/OnboardingSPA/components/Content/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Content/index.js b/src/OnboardingSPA/components/Content/index.js index eb265d6b8..89ce40260 100644 --- a/src/OnboardingSPA/components/Content/index.js +++ b/src/OnboardingSPA/components/Content/index.js @@ -27,7 +27,7 @@ const Content = () => { /> ) ); }, [ routes ]); - console.count('Content'); + return (
}> From 68cb92596582e4d677a3c4b55ec7cfcd00bab222 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 16 Feb 2023 18:51:43 +0530 Subject: [PATCH 03/17] Optimized Skip Button Reduced the re-renders by using memo. --- src/OnboardingSPA/components/SkipButton/index.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/OnboardingSPA/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js index 0f48ccd48..86dabb5d0 100644 --- a/src/OnboardingSPA/components/SkipButton/index.js +++ b/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'; @@ -17,10 +18,9 @@ const SkipButton = () => { const navigate = useNavigate(); const location = useLocation(); - const { previousStep, nextStep, currentData } = useSelect( + const { nextStep, currentData } = useSelect( (select) => { return { - previousStep: select(nfdOnboardingStore).getPreviousStep(), nextStep: select(nfdOnboardingStore).getNextStep(), currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), }; @@ -28,10 +28,8 @@ const SkipButton = () => { [] ); - 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); @@ -68,7 +66,7 @@ const SkipButton = () => { { return ( ); @@ -76,7 +74,7 @@ const SkipButton = () => { else { return ( ); @@ -86,7 +84,6 @@ const SkipButton = () => { return skipStep(); }; - /* * check if this is the last step */ @@ -96,4 +93,6 @@ const exitToWordpressForEcommerce = () => { } return false; } -export default SkipButton; + +const SkipButtonMemo = memo(SkipButton) +export default SkipButtonMemo; From 30537fa2b0e6a3071f081778ad36ce8b21fd6d97 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 16 Feb 2023 18:52:33 +0530 Subject: [PATCH 04/17] Optimized TextInput Reduced re-renders by using memo. --- src/OnboardingSPA/components/TextInput/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/components/TextInput/index.js b/src/OnboardingSPA/components/TextInput/index.js index c5367585a..16eab65c9 100644 --- a/src/OnboardingSPA/components/TextInput/index.js +++ b/src/OnboardingSPA/components/TextInput/index.js @@ -1,5 +1,5 @@ import { __ } from '@wordpress/i18n'; -import { useRef, useEffect, useState } from '@wordpress/element'; +import { useRef, useEffect, useState, memo } from '@wordpress/element'; /** * Interface Text Inputs with standard design. @@ -55,4 +55,4 @@ const TextInput = ({ title, hint, placeholder, height, maxCharacters, textValue, ); }; -export default TextInput; +export default memo(TextInput); From d645da5a7fac42f6f166986dd272f06910584bc2 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Feb 2023 13:05:26 +0530 Subject: [PATCH 05/17] Optimize WordPress Exp. --- .../pages/Steps/GetStarted/GetStartedExperience/index.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js index f8ec79613..d54dfcf0b 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js @@ -22,7 +22,6 @@ import Animate from '../../../../components/Animate'; */ const GetStartedExperience = () => { - const [ isLoaded, setisLoaded ] = useState( false ); const [ wpComfortLevel, setWpComfortLevel ] = useState( '0' ); const { currentData, currentStep } = useSelect( ( select ) => { @@ -51,12 +50,9 @@ const GetStartedExperience = () => { useEffect( () => { async function getFlowData() { setWpComfortLevel( currentData.data.wpComfortLevel ); - setisLoaded( true ); } - if ( ! isLoaded ) { - getFlowData(); - } - }, [ isLoaded ] ); + getFlowData(); + }, [ ] ); const saveData = ( value ) => { setWpComfortLevel( value ); From 21e03e5a165775a970748345e69d6e64e11eaf49 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Feb 2023 18:10:26 +0530 Subject: [PATCH 06/17] Optimized Address Step Ecom --- .../Steps/Ecommerce/StepAddress/index.js | 55 +++++++++++-------- .../pages/Steps/Ecommerce/useWPSettings.js | 15 ++--- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js index 073997519..e225ed90f 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js @@ -1,6 +1,6 @@ import { useViewportMatch } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { useNavigate } from 'react-router-dom'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../../constants'; @@ -17,6 +17,8 @@ import Animate from '../../../../components/Animate'; import { EcommerceStateHandler } from '../../../../components/StateHandlers'; const StepAddress = () => { + const [ settings, setSettings ] = useState(); + const navigate = useNavigate(); const isLargeViewport = useViewportMatch('medium'); const { setDrawerActiveView, @@ -35,40 +37,44 @@ const StepAddress = () => { setIsHeaderNavigationEnabled( true ); } + async function getSettingsData() { + setSettings( await useWPSettings() ); + } + useEffect(() => { setSidebarActiveView( SIDEBAR_LEARN_MORE ); setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO); + getSettingsData(); }, []); - const navigate = useNavigate(); - let currentData = useSelect((select) => select(nfdOnboardingStore).getCurrentOnboardingData() ); - const settings = useWPSettings(); useEffect(() => { - let addressKeys = [ - 'woocommerce_store_address', - 'woocommerce_store_city', - 'woocommerce_store_postcode', - 'woocommerce_default_country', - 'woocommerce_currency', - 'woocommerce_email_from_address', - ]; - if (settings !== null && currentData.storeDetails.address === undefined) { - setCurrentOnboardingData({ - storeDetails: { - ...currentData.storeDetails, - address: { - ...(currentData.storeDetails.address ?? {}), - ...addressKeys.reduce( - (address, key) => ({ ...address, [key]: settings[key] }), - {} - ), + if( settings ) { + let addressKeys = [ + 'woocommerce_store_address', + 'woocommerce_store_city', + 'woocommerce_store_postcode', + 'woocommerce_default_country', + 'woocommerce_currency', + 'woocommerce_email_from_address', + ]; + if (settings !== null && currentData.storeDetails.address === undefined) { + setCurrentOnboardingData({ + storeDetails: { + ...currentData.storeDetails, + address: { + ...(currentData.storeDetails.address ?? {}), + ...addressKeys.reduce( + (address, key) => ({ ...address, [key]: settings[key] }), + {} + ), + }, }, - }, - }); + }); + } } }, [settings, currentData.storeDetails]); @@ -119,6 +125,7 @@ const StepAddress = () => { }, }); } + return ( diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/useWPSettings.js b/src/OnboardingSPA/pages/Steps/Ecommerce/useWPSettings.js index 8786dd870..2aecf9364 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/useWPSettings.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/useWPSettings.js @@ -1,13 +1,6 @@ -import { useEffect, useState } from '@wordpress/element'; import { fetchWPSettings } from '../../../utils/api/ecommerce'; -export function useWPSettings() { - const [settings, setSettings] = useState(null); - async function getInitialSettings() { - let settings = await fetchWPSettings().catch(() => ({})); - setSettings(settings); - } - useEffect(() => { - getInitialSettings(); - }, []); + +export async function useWPSettings() { + const settings = await fetchWPSettings().catch(() => ({})); return settings; -} \ No newline at end of file +} From ad3e4221a6e6a37957d5d5bdc201465fae97efc2 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Feb 2023 18:10:52 +0530 Subject: [PATCH 07/17] Factored out async function out of useEffect --- .../pages/Steps/GetStarted/GetStartedExperience/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js index d54dfcf0b..cf3fe342d 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js @@ -47,10 +47,11 @@ const GetStartedExperience = () => { setIsHeaderNavigationEnabled( true ); }, [] ); + async function getFlowData() { + setWpComfortLevel( currentData.data.wpComfortLevel ); + } + useEffect( () => { - async function getFlowData() { - setWpComfortLevel( currentData.data.wpComfortLevel ); - } getFlowData(); }, [ ] ); From 31d91d20fef11db4a99d4d789d82be4b9093dd4b Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Feb 2023 18:22:16 +0530 Subject: [PATCH 08/17] Optimize Ecom Tax Step --- .../pages/Steps/Ecommerce/StepTax/index.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index e8f00697c..5b2b1a4a5 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -1,6 +1,6 @@ import { RadioControl } from '@wordpress/components'; -import { useDispatch,useSelect } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { useNavigate } from 'react-router-dom'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../../constants'; @@ -26,19 +26,24 @@ const StepTax = () => { setCurrentOnboardingData, } = useDispatch(nfdOnboardingStore); const navigate = useNavigate(); + const [ settings, setSettings ] = useState(); let currentData = useSelect((select) => select(nfdOnboardingStore).getCurrentOnboardingData() ); + async function getSettingsData() { + setSettings( await useWPSettings() ); + } + useEffect(() => { setSidebarActiveView( SIDEBAR_LEARN_MORE ); setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO); + getSettingsData(); }, []); - const settings = useWPSettings(); useEffect(() => { - if (settings !== null && currentData.storeDetails.tax === undefined) { + if (settings && settings !== null && currentData.storeDetails.tax === undefined) { let selectedTaxOption = content.stepTaxOptions.find( createReverseLookup(settings) ); @@ -56,6 +61,7 @@ const StepTax = () => { }); } }, [settings, currentData.storeDetails]); + let { tax } = currentData.storeDetails; const handleButtonClick = () => { //Commented as auto-calculate tax option is removed for MMP From 5fa5e5f23706da60e9b6ae633995b3228ce18762 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Feb 2023 18:50:26 +0530 Subject: [PATCH 09/17] Site Features --- src/OnboardingSPA/pages/Steps/SiteFeatures/index.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js b/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js index 365e29085..7ed69fd7f 100644 --- a/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js +++ b/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js @@ -14,7 +14,6 @@ import { CheckboxListSkeleton } from '../../../components/CheckboxTemplate'; const StepSiteFeatures = () => { const isLargeViewport = useViewportMatch( 'medium' ); - const [ isLoaded, setisLoaded ] = useState( false ); const [ selectedPlugins, setSelectedPlugins ] = useState(); const [ customPluginsList, setCustomPluginsList ] = useState(); @@ -74,15 +73,8 @@ const StepSiteFeatures = () => { else setSelectedPlugins( { ...currentData?.data?.siteFeatures } ); setCustomPluginsList( customPluginsList.body ); - setisLoaded( true ); } - useEffect( () => { - if ( ! isLoaded ) { - getCustomPlugins(); - } - }, [ isLoaded ] ); - useEffect( () => { if ( isLargeViewport ) { setIsDrawerOpened( false ); @@ -91,8 +83,10 @@ const StepSiteFeatures = () => { setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_NAV_PRIMARY ); setIsHeaderNavigationEnabled( true ); + getCustomPlugins(); }, [] ); + console.count('Site Features'); return (
From 55acb8c7612d7691cc1be6835fdee86cfa66da0c Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 17 Feb 2023 18:50:31 +0530 Subject: [PATCH 10/17] Update index.js --- src/OnboardingSPA/components/TextInput/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/TextInput/index.js b/src/OnboardingSPA/components/TextInput/index.js index 16eab65c9..56d3ca724 100644 --- a/src/OnboardingSPA/components/TextInput/index.js +++ b/src/OnboardingSPA/components/TextInput/index.js @@ -55,4 +55,5 @@ const TextInput = ({ title, hint, placeholder, height, maxCharacters, textValue, ); }; -export default memo(TextInput); +const TextInputMemo = memo(TextInput) +export default TextInputMemo; From 68242862b79ae617de7da222a555a4ac0d115eda Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 20 Feb 2023 11:51:36 +0530 Subject: [PATCH 11/17] Removed isLoaded from Steps --- src/OnboardingSPA/pages/Steps/DesignColors/index.js | 6 ++---- src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js | 6 ++---- .../pages/Steps/DesignThemeStyles/Menu/index.js | 6 ++---- .../pages/Steps/DesignThemeStyles/Preview/index.js | 6 ++---- src/OnboardingSPA/pages/Steps/DesignTypography/index.js | 6 ++---- src/OnboardingSPA/pages/Steps/SiteFeatures/index.js | 1 - src/OnboardingSPA/pages/Steps/SitePages/index.js | 6 ++---- 7 files changed, 12 insertions(+), 25 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 64ed85aaf..373722637 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -19,7 +19,6 @@ import { const StepDesignColors = () => { const location = useLocation(); - const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); const { currentStep, themeStatus } = useSelect( ( select ) => { @@ -45,13 +44,12 @@ const StepDesignColors = () => { return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( pattern?.body ); - setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) + if ( THEME_STATUS_ACTIVE === themeStatus ) getStylesAndPatterns(); - }, [ isLoaded, themeStatus ] ); + }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 1d8a9d1f1..6fe54eb25 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -45,7 +45,6 @@ const StepDesignHomepageMenu = () => { }; const location = useLocation(); - const [ isLoaded, setisLoaded ] = useState( false ); const [ homepagePattern, setHomepagePattern ] = useState(); const [ selectedHomepage, setSelectedHomepage ] = useState( 0 ); @@ -121,7 +120,6 @@ const StepDesignHomepageMenu = () => { }; setCurrentOnboardingData( currentData ); } - setisLoaded( true ); } function saveDataForHomepage( idx ) { @@ -134,10 +132,10 @@ const StepDesignHomepageMenu = () => { } useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) { + if ( themeStatus === THEME_STATUS_ACTIVE ) { getHomepagePatternsData(); } - }, [ isLoaded, themeStatus ] ); + }, [ themeStatus ] ); function buildHomepagePreviews() { return homepagePattern?.map( ( homepage, idx ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index c7a09775b..c46d44c0d 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -22,7 +22,6 @@ import { const StepDesignThemeStylesMenu = () => { const location = useLocation(); - const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); const [ globalStyles, setGlobalStyles ] = useState(); const [ selectedStyle, setSelectedStyle ] = useState(); @@ -78,13 +77,12 @@ const StepDesignThemeStylesMenu = () => { setPattern( patternsResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); setSelectedStyle( currentData.data.theme.variation ); - setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + if ( themeStatus === THEME_STATUS_ACTIVE ) getStylesAndPatterns(); - }, [ isLoaded, themeStatus ] ); + }, [ themeStatus ] ); const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 82e25251c..1c80d659d 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -23,7 +23,6 @@ import { DesignStateHandler } from '../../../../components/StateHandlers'; const StepDesignThemeStylesPreview = () => { const location = useLocation(); - const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); const [ customize, setCustomize ] = useState( false ); @@ -73,7 +72,6 @@ const StepDesignThemeStylesPreview = () => { return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( patternsResponse?.body ); - setIsLoaded( true ); }; const addColorAndTypographyRoutes = () => { @@ -157,9 +155,9 @@ const StepDesignThemeStylesPreview = () => { }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) + if ( themeStatus === THEME_STATUS_ACTIVE ) getStylesAndPatterns(); - }, [ isLoaded, themeStatus ] ); + }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 8b9f43768..33d6851fe 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -20,7 +20,6 @@ import { const StepDesignTypography = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const [ isLoaded, setIsLoaded ] = useState( false ); const { currentStep, themeStatus } = useSelect( ( select ) => { return { @@ -48,13 +47,12 @@ const StepDesignTypography = () => { return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( patternsResponse?.body ); - setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) + if ( THEME_STATUS_ACTIVE === themeStatus ) getFontPatterns(); - }, [ isLoaded, themeStatus ] ); + }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js b/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js index 7ed69fd7f..f2232a799 100644 --- a/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js +++ b/src/OnboardingSPA/pages/Steps/SiteFeatures/index.js @@ -86,7 +86,6 @@ const StepSiteFeatures = () => { getCustomPlugins(); }, [] ); - console.count('Site Features'); return (
diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index cc7a4e907..abe22d73e 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -21,7 +21,6 @@ import LivePreviewSkeleton from '../../../components/LivePreview/LivePreviewSkel const StepSitePages = () => { const location = useLocation(); - const [ isLoaded, setIsLoaded ] = useState( false ); const [ sitePages, setSitePages ] = useState(); const [ checkedPages, setCheckedPages ] = useState( [] ); @@ -78,7 +77,6 @@ const StepSitePages = () => { } } } - setIsLoaded( true ); }; const stateToFlowData = ( selectedPages, sitePages ) => { @@ -146,8 +144,8 @@ const StepSitePages = () => { }; useEffect( () => { - if ( ! isLoaded && themeStatus === THEME_STATUS_ACTIVE ) getSitePages(); - }, [ isLoaded, themeStatus ] ); + if ( themeStatus === THEME_STATUS_ACTIVE ) getSitePages(); + }, [ themeStatus ] ); return ( From 2f95adda32de80955346a92d6fbd2acc7f00eb46 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 20 Feb 2023 16:29:17 +0530 Subject: [PATCH 12/17] Refactor Code to work with memoized components --- .../Drawer/DrawerPanel/DesignTypography.js | 18 +++++++++--------- .../pages/Steps/DesignColors/index.js | 7 ++++++- .../pages/Steps/DesignTypography/index.js | 7 ++++++- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 6020931c3..16d90b114 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js +++ b/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,16 @@ const DesignTypography = () => { // Changes the Global Styles to Recompute css properties const globalStylesCopy = selectedGlobalStyle; - globalStylesCopy.styles.typography.fontFamily = + 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 = - fontPalettesCopy[ fontStyle ]?.styles.blocks[ - 'core/heading' - ].typography.fontFamily; + globalStylesCopy.styles.blocks[ 'core/heading' ].typography.fontFamily = + fontPalettesCopy[ fontStyle ]?.styles.blocks[ + 'core/heading' + ].typography.fontFamily; + } + if ( globalStylesCopy.styles?.blocks[ 'core/site-title' ]?.typography ?.fontFamily @@ -113,7 +116,6 @@ const DesignTypography = () => { useGlobalStylesOutput( globalStylesCopy, storedPreviewSettings ) ); setCurrentOnboardingData( currentData ); - doRerender( 1 ); }; async function resetFonts() { @@ -135,7 +137,6 @@ const DesignTypography = () => { currentData.data.typography.slug = ''; currentData.data.typography.data = []; setCurrentOnboardingData( currentData ); - doRerender( 1 ); } function buildPalettes() { @@ -224,7 +225,6 @@ const DesignTypography = () => { } */ } { fontPalettes && buildPalettes() } { /* { fontPalettes && buildCustomPalette() } */ } -
{ rerender }
); }; diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 373722637..d90ba6427 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -21,8 +21,9 @@ const StepDesignColors = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentStep, themeStatus } = useSelect( ( select ) => { + const { currentData, currentStep, themeStatus } = useSelect( ( select ) => { return { + currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), @@ -46,6 +47,10 @@ const StepDesignColors = () => { setPattern( pattern?.body ); }; + useEffect( () => { + // This listens for colors to change and re-renders screen + }, [ currentData?.data?.palette ] ); + useEffect( () => { if ( THEME_STATUS_ACTIVE === themeStatus ) getStylesAndPatterns(); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 33d6851fe..542ef38da 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -21,8 +21,9 @@ const StepDesignTypography = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentStep, themeStatus } = useSelect( ( select ) => { + const { currentData, currentStep, themeStatus } = useSelect( ( select ) => { return { + currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), @@ -54,6 +55,10 @@ const StepDesignTypography = () => { getFontPatterns(); }, [ themeStatus ] ); + useEffect( () => { + // This listens for typography to change and rerenders screen + }, [ currentData?.data?.typography ] ); + return ( From 2e1752440155e3ffc739ad900d2a477c49741f89 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 21 Feb 2023 16:51:52 +0530 Subject: [PATCH 13/17] Added Memo support to Block Previews --- .../components/LivePreview/BlockPreview/index.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 70d69e684..9daa222c1 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -51,10 +51,12 @@ 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 +76,7 @@ const BlockPreview = ( { if ( ! previewSettings ) { setSettings( storedPreviewSettings ); } - }, [ storedPreviewSettings ] ); + }, [ storedPreviewSettings, currentData ] ); const SkeletonLivePreview = memo( () => { return ( @@ -110,4 +112,5 @@ const BlockPreview = ( { ); }; -export default BlockPreview; +const BlockPreviewMemo = memo(BlockPreview); +export default BlockPreviewMemo; From e941db3902a377796288514126478f7ee9f8c739 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 21 Feb 2023 16:53:40 +0530 Subject: [PATCH 14/17] Removed redundant useEffects --- src/OnboardingSPA/pages/Steps/DesignColors/index.js | 4 ---- src/OnboardingSPA/pages/Steps/DesignTypography/index.js | 4 ---- 2 files changed, 8 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index d90ba6427..e2677ac86 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -47,10 +47,6 @@ const StepDesignColors = () => { setPattern( pattern?.body ); }; - useEffect( () => { - // This listens for colors to change and re-renders screen - }, [ currentData?.data?.palette ] ); - useEffect( () => { if ( THEME_STATUS_ACTIVE === themeStatus ) getStylesAndPatterns(); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 542ef38da..af03611aa 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -55,10 +55,6 @@ const StepDesignTypography = () => { getFontPatterns(); }, [ themeStatus ] ); - useEffect( () => { - // This listens for typography to change and rerenders screen - }, [ currentData?.data?.typography ] ); - return ( From 52beacf020f1f989a273db714e3e1291e6b08ab3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 21 Feb 2023 17:01:29 +0530 Subject: [PATCH 15/17] Linting JS --- src/OnboardingSPA/components/Content/index.js | 25 +- .../Drawer/DrawerPanel/DesignTypography.js | 15 +- .../LivePreview/BlockPreview/index.js | 8 +- .../components/SkipButton/index.js | 137 +++--- .../components/TextInput/index.js | 107 ++-- .../pages/Steps/DesignColors/index.js | 6 +- .../Steps/DesignThemeStyles/Menu/index.js | 3 +- .../Steps/DesignThemeStyles/Preview/index.js | 3 +- .../pages/Steps/DesignTypography/index.js | 6 +- .../Steps/Ecommerce/StepAddress/index.js | 457 ++++++++++-------- .../pages/Steps/Ecommerce/StepTax/index.js | 174 ++++--- .../pages/Steps/Ecommerce/useWPSettings.js | 2 +- .../GetStarted/GetStartedExperience/index.js | 2 +- 13 files changed, 530 insertions(+), 415 deletions(-) diff --git a/src/OnboardingSPA/components/Content/index.js b/src/OnboardingSPA/components/Content/index.js index 89ce40260..f111868d9 100644 --- a/src/OnboardingSPA/components/Content/index.js +++ b/src/OnboardingSPA/components/Content/index.js @@ -17,16 +17,19 @@ const Content = () => { }; } ); - const getMappedPages = useCallback(( routes ) => { - return routes?.map( ( route ) => ( - } - /> - ) ); - }, [ routes ]); + const getMappedPages = useCallback( + ( routes ) => { + return routes?.map( ( route ) => ( + } + /> + ) ); + }, + [ routes ] + ); return (
@@ -37,5 +40,5 @@ const Content = () => { ); }; -const ContentMemo = memo(Content); +const ContentMemo = memo( Content ); export default ContentMemo; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 16d90b114..2db46bd5e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js @@ -74,16 +74,21 @@ const DesignTypography = () => { // Changes the Global Styles to Recompute css properties const globalStylesCopy = selectedGlobalStyle; - if( globalStylesCopy?.styles?.typography?.fontFamily - && globalStylesCopy?.styles?.blocks[ 'core/heading' ]?.typography?.fontFamily ) { + 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 = + fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily; + globalStylesCopy.styles.blocks[ + 'core/heading' + ].typography.fontFamily = fontPalettesCopy[ fontStyle ]?.styles.blocks[ 'core/heading' ].typography.fontFamily; } - + if ( globalStylesCopy.styles?.blocks[ 'core/site-title' ]?.typography ?.fontFamily diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 9daa222c1..9a3c793d3 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -53,8 +53,10 @@ const BlockPreview = ( { const { currentData, storedPreviewSettings } = useSelect( ( select ) => { return { - currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), - storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + storedPreviewSettings: + select( nfdOnboardingStore ).getPreviewSettings(), }; }, [] ); @@ -112,5 +114,5 @@ const BlockPreview = ( { ); }; -const BlockPreviewMemo = memo(BlockPreview); +const BlockPreviewMemo = memo( BlockPreview ); export default BlockPreviewMemo; diff --git a/src/OnboardingSPA/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js index 86dabb5d0..995b71d7d 100644 --- a/src/OnboardingSPA/components/SkipButton/index.js +++ b/src/OnboardingSPA/components/SkipButton/index.js @@ -12,87 +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 { nextStep, currentData } = useSelect( - (select) => { - return { - nextStep: select(nfdOnboardingStore).getNextStep(), - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), - }; - }, - [] - ); + const isLastStep = null === nextStep || false === nextStep; - 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 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 saveData(path, currentData) { + // If Social Data is changed then sync it + if ( path?.includes( 'basic-info' ) ) { + const socialData = await syncSocialSettingsFinish( + currentData + ); - if (currentData) { - currentData.isComplete = new Date().getTime(); + // 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 Social Data is changed then sync it - if (path?.includes('basic-info')) { - const socialData = await syncSocialSettingsFinish(currentData); + function skipStep() { + if ( isLastStep ) { + return ( + + ); + } + return ( + + ); + } - // 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 ( - - ); - } - else { - return ( - - ); - } - } - - 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; -} + if ( window.nfdOnboarding.currentFlow == 'ecommerce' ) { + return true; + } + return false; +}; -const SkipButtonMemo = memo(SkipButton) +const SkipButtonMemo = memo( SkipButton ); export default SkipButtonMemo; diff --git a/src/OnboardingSPA/components/TextInput/index.js b/src/OnboardingSPA/components/TextInput/index.js index 56d3ca724..2fafad95a 100644 --- a/src/OnboardingSPA/components/TextInput/index.js +++ b/src/OnboardingSPA/components/TextInput/index.js @@ -1,59 +1,74 @@ -import { __ } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { useRef, useEffect, useState, memo } from '@wordpress/element'; /** * Interface Text Inputs with standard design. * - * @returns + * @param root0 + * @param root0.title + * @param root0.hint + * @param root0.placeholder + * @param root0.height + * @param root0.maxCharacters + * @param root0.textValue + * @param root0.textValueSetter + * @return */ -const TextInput = ({ title, hint, placeholder, height, maxCharacters, textValue, textValueSetter }) => { +const TextInput = ( { + title, + hint, + placeholder, + height, + maxCharacters, + textValue, + textValueSetter, +} ) => { + const textareaRef = useRef( null ); + const [ inputText, setInputText ] = useState( 'nfd-input__field' ); - const textareaRef = useRef(null); - const [inputText, setInputText] = useState("nfd-input__field"); + useEffect( () => { + textareaRef.current.style.height = height; + const scrollHeight = textareaRef.current.scrollHeight; + textareaRef.current.style.height = scrollHeight + 'px'; + }, [ textValue ] ); - useEffect(() => { - textareaRef.current.style.height = height; - const scrollHeight = textareaRef.current.scrollHeight; - textareaRef.current.style.height = scrollHeight + "px"; - }, [textValue]); + const onTextChange = ( e ) => { + e.preventDefault(); + textValueSetter( e.target.value ); - const onTextChange = (e) => { - e.preventDefault(); - textValueSetter(e.target.value); - - e.target.value.length == maxCharacters ? - setInputText("nfd-input__field nfd-input__field_error") : - setInputText("nfd-input__field") - } + e.target.value.length == maxCharacters + ? setInputText( 'nfd-input__field nfd-input__field_error' ) + : setInputText( 'nfd-input__field' ); + }; - return ( -
-