From aee8cb0a29f260ac20e7057bdcc1a0ab930667b3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 1 Jul 2024 12:29:24 +0530 Subject: [PATCH 1/2] Add Error State Handler --- .../steps/SiteGen/SiteLogo/index.js | 156 +++++++++--------- 1 file changed, 79 insertions(+), 77 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index 6d68061c1..0325dc050 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -27,24 +27,24 @@ import { ACTION_SITEGEN_LOGO_SKIPPED, } from '../../../utils/analytics/hiive/constants'; import { SITEGEN_FLOW } from '../../../data/flows/constants'; +import { SiteGenStateHandler } from '../../../components/StateHandlers'; const SiteGenSiteLogo = () => { - const [ siteLogo, setSiteLogo ] = useState(); + const [siteLogo, setSiteLogo] = useState(); - const isLargeViewport = useViewportMatch( 'small' ); + const isLargeViewport = useViewportMatch('small'); - const { currentData } = useSelect( ( select ) => { + const { currentData } = useSelect((select) => { return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), + currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), }; - } ); + }); - const { getEditedEntityRecord } = useSelect( ( select ) => { - return select( coreStore ); - }, [] ); + const { getEditedEntityRecord } = useSelect((select) => { + return select(coreStore); + }, []); - const { editEntityRecord } = useDispatch( coreStore ); + const { editEntityRecord } = useDispatch(coreStore); const { setIsFooterNavAllowed, @@ -56,22 +56,22 @@ const SiteGenSiteLogo = () => { setCurrentOnboardingData, setIsHeaderNavigationEnabled, updateSiteGenErrorStatus, - } = useDispatch( nfdOnboardingStore ); - - useEffect( () => { - setHideFooterNav( false ); - setIsHeaderEnabled( true ); - setSidebarActiveView( false ); - setIsHeaderNavigationEnabled( true ); - setHeaderActiveView( HEADER_SITEGEN ); - setDrawerActiveView( false ); - if ( currentData.sitegen.siteLogo?.id !== 0 ) { - setIsFooterNavAllowed( true ); - return setSiteLogo( currentData.sitegen.siteLogo ); + } = useDispatch(nfdOnboardingStore); + + useEffect(() => { + setHideFooterNav(false); + setIsHeaderEnabled(true); + setSidebarActiveView(false); + setIsHeaderNavigationEnabled(true); + setHeaderActiveView(HEADER_SITEGEN); + setDrawerActiveView(false); + if (currentData.sitegen.siteLogo?.id !== 0) { + setIsFooterNavAllowed(true); + return setSiteLogo(currentData.sitegen.siteLogo); } - setIsFooterNavAllowed( false ); - getEditedEntityRecord( 'root', 'site' ); - }, [] ); + setIsFooterNavAllowed(false); + getEditedEntityRecord('root', 'site'); + }, []); const resetSiteLogo = () => { const currentDataCopy = { ...currentData }; @@ -81,28 +81,28 @@ const SiteGenSiteLogo = () => { fileName: '', fileSize: 0, }; - setCurrentOnboardingData( currentDataCopy ); - setSiteLogo( undefined ); - setIsFooterNavAllowed( false ); + setCurrentOnboardingData(currentDataCopy); + setSiteLogo(undefined); + setIsFooterNavAllowed(false); trackOnboardingEvent( - new OnboardingEvent( ACTION_SITEGEN_LOGO_SKIPPED, undefined, { + new OnboardingEvent(ACTION_SITEGEN_LOGO_SKIPPED, undefined, { source: SITEGEN_FLOW, - } ) + }) ); }; - const handleSiteLogo = ( siteLogoNew ) => { + const handleSiteLogo = (siteLogoNew) => { const currentDataCopy = { ...currentData }; currentDataCopy.sitegen.siteLogo.id = siteLogoNew.id; currentDataCopy.sitegen.siteLogo.url = siteLogoNew.url; currentDataCopy.sitegen.siteLogo.fileName = siteLogoNew.fileName; currentDataCopy.sitegen.siteLogo.fileSize = siteLogoNew.fileSize; - setCurrentOnboardingData( currentDataCopy ); - setIsFooterNavAllowed( siteLogoNew.id !== 0 ); - editEntityRecord( 'root', 'site', undefined, { + setCurrentOnboardingData(currentDataCopy); + setIsFooterNavAllowed(siteLogoNew.id !== 0); + editEntityRecord('root', 'site', undefined, { site_logo: siteLogoNew.id, - } ); - setSiteLogo( siteLogoNew ); + }); + setSiteLogo(siteLogoNew); }; const handleFailure = () => { @@ -115,55 +115,57 @@ const SiteGenSiteLogo = () => { } ) ); - updateSiteGenErrorStatus( true ); + updateSiteGenErrorStatus(true); }; const content = getContents(); return ( - -
- - -
- resetSiteLogo() } - className="nfd-onboarding-step--site-gen__site-logo__container__buttons__skip" - text={ content.buttons.skip } + + +
+ + - { isLargeViewport && ( - { - if ( siteLogo ) { - trackOnboardingEvent( - new OnboardingEvent( - ACTION_LOGO_ADDED, - undefined, - { - source: SITEGEN_FLOW, - } - ) - ); - } - } } - text={ content.buttons.next } - disabled={ - siteLogo === undefined || siteLogo?.id === 0 - ? true - : false - } +
+ resetSiteLogo()} + className="nfd-onboarding-step--site-gen__site-logo__container__buttons__skip" + text={content.buttons.skip} /> - ) } + {isLargeViewport && ( + { + if (siteLogo) { + trackOnboardingEvent( + new OnboardingEvent( + ACTION_LOGO_ADDED, + undefined, + { + source: SITEGEN_FLOW, + } + ) + ); + } + }} + text={content.buttons.next} + disabled={ + siteLogo === undefined || siteLogo?.id === 0 + ? true + : false + } + /> + )} +
-
- + + ); }; From 7eff4f264a106ba174c534c00ec42312354cb486 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 3 Jul 2024 12:04:17 +0530 Subject: [PATCH 2/2] Fix Lint --- .../steps/SiteGen/SiteLogo/index.js | 97 ++++++++++--------- 1 file changed, 49 insertions(+), 48 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index 0325dc050..608a39b78 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -30,21 +30,22 @@ import { SITEGEN_FLOW } from '../../../data/flows/constants'; import { SiteGenStateHandler } from '../../../components/StateHandlers'; const SiteGenSiteLogo = () => { - const [siteLogo, setSiteLogo] = useState(); + const [ siteLogo, setSiteLogo ] = useState(); - const isLargeViewport = useViewportMatch('small'); + const isLargeViewport = useViewportMatch( 'small' ); - const { currentData } = useSelect((select) => { + const { currentData } = useSelect( ( select ) => { return { - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), }; - }); + } ); - const { getEditedEntityRecord } = useSelect((select) => { - return select(coreStore); - }, []); + const { getEditedEntityRecord } = useSelect( ( select ) => { + return select( coreStore ); + }, [] ); - const { editEntityRecord } = useDispatch(coreStore); + const { editEntityRecord } = useDispatch( coreStore ); const { setIsFooterNavAllowed, @@ -56,22 +57,22 @@ const SiteGenSiteLogo = () => { setCurrentOnboardingData, setIsHeaderNavigationEnabled, updateSiteGenErrorStatus, - } = useDispatch(nfdOnboardingStore); - - useEffect(() => { - setHideFooterNav(false); - setIsHeaderEnabled(true); - setSidebarActiveView(false); - setIsHeaderNavigationEnabled(true); - setHeaderActiveView(HEADER_SITEGEN); - setDrawerActiveView(false); - if (currentData.sitegen.siteLogo?.id !== 0) { - setIsFooterNavAllowed(true); - return setSiteLogo(currentData.sitegen.siteLogo); + } = useDispatch( nfdOnboardingStore ); + + useEffect( () => { + setHideFooterNav( false ); + setIsHeaderEnabled( true ); + setSidebarActiveView( false ); + setIsHeaderNavigationEnabled( true ); + setHeaderActiveView( HEADER_SITEGEN ); + setDrawerActiveView( false ); + if ( currentData.sitegen.siteLogo?.id !== 0 ) { + setIsFooterNavAllowed( true ); + return setSiteLogo( currentData.sitegen.siteLogo ); } - setIsFooterNavAllowed(false); - getEditedEntityRecord('root', 'site'); - }, []); + setIsFooterNavAllowed( false ); + getEditedEntityRecord( 'root', 'site' ); + }, [] ); const resetSiteLogo = () => { const currentDataCopy = { ...currentData }; @@ -81,28 +82,28 @@ const SiteGenSiteLogo = () => { fileName: '', fileSize: 0, }; - setCurrentOnboardingData(currentDataCopy); - setSiteLogo(undefined); - setIsFooterNavAllowed(false); + setCurrentOnboardingData( currentDataCopy ); + setSiteLogo( undefined ); + setIsFooterNavAllowed( false ); trackOnboardingEvent( - new OnboardingEvent(ACTION_SITEGEN_LOGO_SKIPPED, undefined, { + new OnboardingEvent( ACTION_SITEGEN_LOGO_SKIPPED, undefined, { source: SITEGEN_FLOW, - }) + } ) ); }; - const handleSiteLogo = (siteLogoNew) => { + const handleSiteLogo = ( siteLogoNew ) => { const currentDataCopy = { ...currentData }; currentDataCopy.sitegen.siteLogo.id = siteLogoNew.id; currentDataCopy.sitegen.siteLogo.url = siteLogoNew.url; currentDataCopy.sitegen.siteLogo.fileName = siteLogoNew.fileName; currentDataCopy.sitegen.siteLogo.fileSize = siteLogoNew.fileSize; - setCurrentOnboardingData(currentDataCopy); - setIsFooterNavAllowed(siteLogoNew.id !== 0); - editEntityRecord('root', 'site', undefined, { + setCurrentOnboardingData( currentDataCopy ); + setIsFooterNavAllowed( siteLogoNew.id !== 0 ); + editEntityRecord( 'root', 'site', undefined, { site_logo: siteLogoNew.id, - }); - setSiteLogo(siteLogoNew); + } ); + setSiteLogo( siteLogoNew ); }; const handleFailure = () => { @@ -115,7 +116,7 @@ const SiteGenSiteLogo = () => { } ) ); - updateSiteGenErrorStatus(true); + updateSiteGenErrorStatus( true ); }; const content = getContents(); @@ -127,22 +128,22 @@ const SiteGenSiteLogo = () => { className="nfd-onboarding-step--site-gen__site-logo" >
- +
resetSiteLogo()} + callback={ () => resetSiteLogo() } className="nfd-onboarding-step--site-gen__site-logo__container__buttons__skip" - text={content.buttons.skip} + text={ content.buttons.skip } /> - {isLargeViewport && ( + { isLargeViewport && ( { - if (siteLogo) { + callback={ () => { + if ( siteLogo ) { trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_ADDED, @@ -153,15 +154,15 @@ const SiteGenSiteLogo = () => { ) ); } - }} - text={content.buttons.next} + } } + text={ content.buttons.next } disabled={ siteLogo === undefined || siteLogo?.id === 0 ? true : false } /> - )} + ) }