From 52beacf020f1f989a273db714e3e1291e6b08ab3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 21 Feb 2023 17:01:29 +0530 Subject: [PATCH] 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 ( -
-