From f87869934e8ee7ba713f1d2e21f652ef87c8d83f Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 4 Jan 2023 16:43:29 +0530 Subject: [PATCH] disable navigation in loading states --- .../components/StateHandlers/Design/index.js | 49 ++++++++++++++++- .../StateHandlers/Ecommerce/index.js | 54 ++++++++++++++++++- .../pages/Steps/Complete/index.js | 7 ++- .../pages/Steps/DesignColors/index.js | 37 ++++--------- .../pages/Steps/DesignHeaderMenu/index.js | 21 +++----- .../pages/Steps/DesignHomepageMenu/index.js | 11 ---- .../Steps/DesignThemeStyles/Menu/index.js | 10 ---- .../Steps/DesignThemeStyles/Preview/index.js | 37 +++++-------- .../pages/Steps/DesignTypography/index.js | 25 +++------ .../Steps/Ecommerce/StepAddress/index.js | 15 ++++-- .../Steps/Ecommerce/StepProducts/index.js | 8 --- .../pages/Steps/Ecommerce/StepTax/index.js | 8 --- .../pages/Steps/SitePages/index.js | 9 ---- 13 files changed, 148 insertions(+), 143 deletions(-) diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js index e33add4eb..74ed62aec 100644 --- a/src/OnboardingSPA/components/StateHandlers/Design/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Design/index.js @@ -1,5 +1,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { Fragment, useEffect } from '@wordpress/element'; +import { useViewportMatch } from '@wordpress/compose'; import { StepLoader } from '../../Loaders'; import { store as nfdOnboardingStore } from '../../../store'; @@ -15,7 +16,12 @@ import { import { StepErrorState } from '../../ErrorState'; import getContents from './contents'; -const DesignStateHandler = ( { children } ) => { +const DesignStateHandler = ( { + children, + navigationStateCallback = false, +} ) => { + const isLargeViewport = useViewportMatch( 'medium' ); + const { storedThemeStatus, brandName } = useSelect( ( select ) => { return { storedThemeStatus: select( nfdOnboardingStore ).getThemeStatus(), @@ -25,7 +31,12 @@ const DesignStateHandler = ( { children } ) => { const contents = getContents( brandName ); - const { updateThemeStatus } = useDispatch( nfdOnboardingStore ); + const { + updateThemeStatus, + setIsDrawerOpened, + setIsDrawerSuppressed, + setIsHeaderNavigationEnabled, + } = useDispatch( nfdOnboardingStore ); const checkThemeStatus = async () => { const themeStatus = await getThemeStatus( DESIGN_STEPS_THEME ); @@ -45,7 +56,41 @@ const DesignStateHandler = ( { children } ) => { }, THEME_INSTALL_WAIT_TIMEOUT ); }; + const enableNavigation = () => { + if ( isLargeViewport ) { + setIsDrawerOpened( true ); + } + setIsDrawerSuppressed( false ); + setIsHeaderNavigationEnabled( true ); + }; + + const disableNavigation = () => { + setIsDrawerOpened( false ); + setIsDrawerSuppressed( true ); + setIsHeaderNavigationEnabled( false ); + }; + + const handleNavigationStateCallback = () => { + if ( typeof navigationStateCallback === 'function' ) { + return navigationStateCallback(); + } + enableNavigation(); + }; + + const handleNavigationState = ( themeStatus ) => { + switch ( themeStatus ) { + case THEME_STATUS_NOT_ACTIVE: + return handleNavigationStateCallback(); + case THEME_STATUS_ACTIVE: + return handleNavigationStateCallback(); + default: + disableNavigation(); + } + }; + useEffect( async () => { + handleNavigationState( storedThemeStatus ); + if ( storedThemeStatus === THEME_STATUS_INIT ) { const themeStatus = await checkThemeStatus(); switch ( themeStatus ) { diff --git a/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js b/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js index 20c12ef23..af41cd9a3 100644 --- a/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js @@ -1,3 +1,4 @@ +import { useViewportMatch } from '@wordpress/compose'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; @@ -15,7 +16,12 @@ import { import { StepErrorState } from '../../ErrorState'; import getContents from './contents'; -const EcommerceStateHandler = ( { children } ) => { +const EcommerceStateHandler = ( { + children, + navigationStateCallback = false, +} ) => { + const isLargeViewport = useViewportMatch( 'medium' ); + const [ woocommerceStatus, setWoocommerceStatus ] = useState( PLUGIN_STATUS_INSTALLING ); @@ -30,7 +36,12 @@ const EcommerceStateHandler = ( { children } ) => { const contents = getContents( brandName ); - const { updatePluginsStatus } = useDispatch( nfdOnboardingStore ); + const { + updatePluginsStatus, + setIsDrawerOpened, + setIsDrawerSuppressed, + setIsHeaderNavigationEnabled, + } = useDispatch( nfdOnboardingStore ); const checkPluginStatus = async () => { const pluginStatus = await getPluginStatus( ECOMMERCE_STEPS_PLUGIN ); @@ -44,12 +55,51 @@ const EcommerceStateHandler = ( { children } ) => { setTimeout( async () => { const pluginStatus = await checkPluginStatus(); if ( pluginStatus !== PLUGIN_STATUS_ACTIVE ) { + storedPluginsStatus[ ECOMMERCE_STEPS_PLUGIN ] = + PLUGIN_STATUS_NOT_ACTIVE; + updatePluginsStatus( storedPluginsStatus ); return setWoocommerceStatus( PLUGIN_STATUS_NOT_ACTIVE ); } window.location.reload(); }, PLUGIN_INSTALL_WAIT_TIMEOUT ); }; + const enableNavigation = () => { + if ( isLargeViewport ) { + setIsDrawerOpened( true ); + } + setIsDrawerSuppressed( false ); + setIsHeaderNavigationEnabled( true ); + }; + + const disableNavigation = () => { + setIsDrawerOpened( false ); + setIsDrawerSuppressed( true ); + setIsHeaderNavigationEnabled( false ); + }; + + const handleNavigationStateCallback = () => { + if ( typeof navigationStateCallback === 'function' ) { + return navigationStateCallback(); + } + enableNavigation(); + }; + + const handleNavigationState = ( pluginStatus ) => { + switch ( pluginStatus ) { + case PLUGIN_STATUS_NOT_ACTIVE: + return handleNavigationStateCallback(); + case PLUGIN_STATUS_ACTIVE: + return handleNavigationStateCallback(); + default: + disableNavigation(); + } + }; + + useEffect( () => { + handleNavigationState( woocommerceStatus ); + }, [ woocommerceStatus ] ); + useEffect( async () => { setWoocommerceStatus( storedPluginsStatus[ ECOMMERCE_STEPS_PLUGIN ] ); if ( diff --git a/src/OnboardingSPA/pages/Steps/Complete/index.js b/src/OnboardingSPA/pages/Steps/Complete/index.js index e82e0f54b..69a263f21 100644 --- a/src/OnboardingSPA/pages/Steps/Complete/index.js +++ b/src/OnboardingSPA/pages/Steps/Complete/index.js @@ -65,14 +65,17 @@ const StepComplete = () => { return true; } - useEffect( () => { + const setNavigationState = () => { setIsHeaderNavigationEnabled( false ); setIsDrawerSuppressed( true ); setSidebarActiveView( false ); + } + + useEffect( () => { checkFlowComplete(); }, [] ); return ( - + { isError ? ( { const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); - const isLargeViewport = useViewportMatch( 'medium' ); - const { currentStep, currentData } = useSelect( - ( select ) => { - return { - currentStep: select( nfdOnboardingStore ).getStepFromPath( - location.pathname - ), - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - }; - }, - [] - ); - - const { - setDrawerActiveView, - setIsDrawerOpened, - setSidebarActiveView, - setIsDrawerSuppressed, - setIsHeaderNavigationEnabled + const { currentStep } = useSelect( ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + }; + }, [] ); - } = useDispatch( nfdOnboardingStore ); + const { setDrawerActiveView, setSidebarActiveView, updateThemeStatus } = + useDispatch( nfdOnboardingStore ); useEffect( () => { - if ( isLargeViewport ) { - setIsDrawerOpened( true ); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_DESIGN_COLORS ); - setIsHeaderNavigationEnabled( true ); }, [] ); const getStylesAndPatterns = async () => { diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index 18c415f77..ef43f9c33 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -1,6 +1,5 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; -import { useViewportMatch } from '@wordpress/compose'; import CommonLayout from '../../../components/Layouts/Common'; import { DesignStateHandler } from '../../../components/StateHandlers'; @@ -9,7 +8,10 @@ import { GlobalStylesProvider, } from '../../../components/LivePreview'; -import { SIDEBAR_LEARN_MORE, VIEW_DESIGN_HEADER_MENU } from '../../../../constants'; +import { + SIDEBAR_LEARN_MORE, + VIEW_DESIGN_HEADER_MENU, +} from '../../../../constants'; import { store as nfdOnboardingStore } from '../../../store'; const StepDesignHeaderMenu = () => { @@ -20,28 +22,17 @@ const StepDesignHeaderMenu = () => { }, [] ); const [ pattern, setPattern ] = useState(); - const isLargeViewport = useViewportMatch( 'medium' ); - const { - setDrawerActiveView, - setIsDrawerOpened, - setIsDrawerSuppressed, - setSidebarActiveView, - setIsHeaderNavigationEnabled, - } = useDispatch( nfdOnboardingStore ); + const { setDrawerActiveView, setSidebarActiveView } = + useDispatch( nfdOnboardingStore ); useEffect( () => { setPattern( headerMenu ); }, [ headerMenu ] ); useEffect( () => { - if ( isLargeViewport ) { - setIsDrawerOpened( true ); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_DESIGN_HEADER_MENU ); - setIsHeaderNavigationEnabled( true ); }, [] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 065a80396..ccc983dc8 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -1,4 +1,3 @@ -import { useViewportMatch } from '@wordpress/compose'; import { useLocation } from 'react-router-dom'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -50,8 +49,6 @@ const StepDesignHomepageMenu = () => { const [ homepagePattern, setHomepagePattern ] = useState(); const [ selectedHomepage, setSelectedHomepage ] = useState( 0 ); - const isLargeViewport = useViewportMatch( 'medium' ); - const { currentStep, currentData, @@ -74,22 +71,14 @@ const StepDesignHomepageMenu = () => { const { setDrawerActiveView, - setIsDrawerOpened, setSidebarActiveView, - setIsDrawerSuppressed, setCurrentOnboardingData, updateThemeStatus, - setIsHeaderNavigationEnabled, } = useDispatch( nfdOnboardingStore ); useEffect( () => { - if ( isLargeViewport ) { - setIsDrawerOpened( true ); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_NAV_DESIGN ); - setIsHeaderNavigationEnabled( true ); }, [] ); function refactorPatterns( homepagePatternData ) { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 63b5f6ad2..a2c56b1aa 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -1,7 +1,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { useNavigate, useLocation } from 'react-router-dom'; -import { useViewportMatch } from '@wordpress/compose'; import { store as nfdOnboardingStore } from '../../../../store'; import CommonLayout from '../../../../components/Layouts/Common'; @@ -29,7 +28,6 @@ const StepDesignThemeStylesMenu = () => { const [ selectedStyle, setSelectedStyle ] = useState(); const navigate = useNavigate(); - const isLargeViewport = useViewportMatch( 'medium' ); const { currentStep, nextStep, @@ -54,23 +52,15 @@ const StepDesignThemeStylesMenu = () => { const { setDrawerActiveView, - setIsDrawerOpened, setSidebarActiveView, - setIsDrawerSuppressed, updatePreviewSettings, setCurrentOnboardingData, updateThemeStatus, - setIsHeaderNavigationEnabled, } = useDispatch( nfdOnboardingStore ); useEffect( () => { - if ( isLargeViewport ) { - setIsDrawerOpened( true ); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_NAV_DESIGN ); - setIsHeaderNavigationEnabled( true ); }, [] ); const getStylesAndPatterns = async () => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index acf5f26ed..6c5bc0ff1 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -2,11 +2,13 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { CheckboxControl } from '@wordpress/components'; -import { useViewportMatch } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { orderBy, filter } from 'lodash'; -import { LivePreview } from '../../../../components/LivePreview'; +import { + LivePreview, + GlobalStylesProvider, +} from '../../../../components/LivePreview'; import CommonLayout from '../../../../components/Layouts/Common'; import { VIEW_DESIGN_THEME_STYLES_PREVIEW, @@ -17,7 +19,6 @@ import { import { store as nfdOnboardingStore } from '../../../../store'; import { getPatterns } from '../../../../utils/api/patterns'; import { conditionalSteps } from '../../../../data/routes/'; -import { GlobalStylesProvider } from '../../../../components/LivePreview'; import { DesignStateHandler } from '../../../../components/StateHandlers'; const StepDesignThemeStylesPreview = () => { @@ -26,11 +27,9 @@ const StepDesignThemeStylesPreview = () => { const [ pattern, setPattern ] = useState(); const [ customize, setCustomize ] = useState( false ); - const isLargeViewport = useViewportMatch( 'medium' ); const { currentStep, currentData, - storedPreviewSettings, routes, designSteps, allSteps, @@ -42,8 +41,6 @@ const StepDesignThemeStylesPreview = () => { ), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), - storedPreviewSettings: - select( nfdOnboardingStore ).getPreviewSettings(), routes: select( nfdOnboardingStore ).getRoutes(), allSteps: select( nfdOnboardingStore ).getAllSteps(), designSteps: select( nfdOnboardingStore ).getDesignSteps(), @@ -53,26 +50,18 @@ const StepDesignThemeStylesPreview = () => { const { setDrawerActiveView, - setIsDrawerOpened, setSidebarActiveView, - setIsDrawerSuppressed, updateRoutes, updateDesignSteps, updateAllSteps, setCurrentOnboardingData, updateThemeStatus, - setIsHeaderNavigationEnabled } = useDispatch( nfdOnboardingStore ); useEffect( () => { - if ( isLargeViewport ) { - setIsDrawerOpened( true ); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_DESIGN_THEME_STYLES_PREVIEW ); handleCheckbox( currentData.data.customDesign, false ); - setIsHeaderNavigationEnabled( true ); }, [] ); const getStylesAndPatterns = async () => { @@ -192,11 +181,11 @@ const StepDesignThemeStylesPreview = () => { ) } - - } - checked={ customize } - onChange={ () => handleCheckbox( ! customize ) } - /> + + } + checked={ customize } + onChange={ () => handleCheckbox( ! customize ) } + />
@@ -211,15 +200,15 @@ const StepDesignThemeStylesPreview = () => { blockGrammer={ '' } styling={ 'custom' } viewportWidth={ 1300 } - />) - } + /> + ) } { pattern && ( ) - } + /> + ) }
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index da0affc71..6d0bc3a5a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -1,5 +1,4 @@ import { useLocation } from 'react-router-dom'; -import { useViewportMatch } from '@wordpress/compose'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -22,7 +21,6 @@ const StepDesignTypography = () => { const [ pattern, setPattern ] = useState(); const [ isLoaded, setIsLoaded ] = useState( false ); - const isLargeViewport = useViewportMatch( 'medium' ); const { currentStep } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( @@ -31,23 +29,12 @@ const StepDesignTypography = () => { }; }, [] ); - const { - updateThemeStatus, - setDrawerActiveView, - setIsDrawerOpened, - setSidebarActiveView, - setIsDrawerSuppressed, - setIsHeaderNavigationEnabled - } = useDispatch( nfdOnboardingStore ); + const { updateThemeStatus, setDrawerActiveView, setSidebarActiveView } = + useDispatch( nfdOnboardingStore ); useEffect( () => { - if ( isLargeViewport ) { - setIsDrawerOpened( true ); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed( false ); setDrawerActiveView( VIEW_DESIGN_TYPOGRAPHY ); - setIsHeaderNavigationEnabled( true ); }, [] ); const getFontPatterns = async () => { @@ -78,11 +65,11 @@ const StepDesignTypography = () => {
- { !pattern && ( + { ! pattern && ( ) } { pattern && ( diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js index 3c376b28b..c1aea6682 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js @@ -23,14 +23,19 @@ const StepAddress = () => { setIsDrawerSuppressed, setSidebarActiveView, setCurrentOnboardingData, + setIsHeaderNavigationEnabled } = useDispatch(nfdOnboardingStore); - useEffect(() => { - if (isLargeViewport) { - setIsDrawerOpened(true); + const setNavigationState = () => { + if ( isLargeViewport ) { + setIsDrawerOpened( true ); } + setIsDrawerSuppressed( false ); + setIsHeaderNavigationEnabled( true ); + } + + useEffect(() => { setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed(false); setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO); }, []); @@ -114,7 +119,7 @@ const StepAddress = () => { }); } return ( - +
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js index b167c0182..140473cf4 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js @@ -1,5 +1,4 @@ import { CheckboxControl, RadioControl } from '@wordpress/components'; -import { useViewportMatch } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -14,11 +13,8 @@ import { store as nfdOnboardingStore } from '../../../../store'; import content from '../content.json'; const StepProducts = () => { - const isLargeViewport = useViewportMatch( 'medium' ); const { setDrawerActiveView, - setIsDrawerOpened, - setIsDrawerSuppressed, setSidebarActiveView, setCurrentOnboardingData, } = useDispatch(nfdOnboardingStore); @@ -28,11 +24,7 @@ const StepProducts = () => { ); let productInfo = currentData.storeDetails.productInfo; useEffect(() => { - if (isLargeViewport) { - setIsDrawerOpened(true); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed(false); setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO); }, []); diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index 9a6790e52..c8e184fc4 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -1,5 +1,4 @@ import { RadioControl } from '@wordpress/components'; -import { useViewportMatch } from '@wordpress/compose'; import { useDispatch,useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -21,11 +20,8 @@ function createReverseLookup(state) { } const StepTax = () => { - const isLargeViewport = useViewportMatch( 'medium' ); const { setDrawerActiveView, - setIsDrawerOpened, - setIsDrawerSuppressed, setSidebarActiveView, setCurrentOnboardingData, } = useDispatch(nfdOnboardingStore); @@ -36,11 +32,7 @@ const StepTax = () => { ); useEffect(() => { - if (isLargeViewport) { - setIsDrawerOpened(true); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerSuppressed(false); setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO); }, []); diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 17d219aa7..6f05f3ef1 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -1,7 +1,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; -import { useViewportMatch } from '@wordpress/compose'; import { store as nfdOnboardingStore } from '../../../store'; import CommonLayout from '../../../components/Layouts/Common'; @@ -21,8 +20,6 @@ import { import LivePreviewSkeleton from '../../../components/LivePreview/LivePreviewSkeleton'; const StepSitePages = () => { - const isLargeViewport = useViewportMatch( 'medium' ); - const location = useLocation(); const [ isLoaded, setIsLoaded ] = useState( false ); const [ sitePages, setSitePages ] = useState(); @@ -44,20 +41,14 @@ const StepSitePages = () => { const { setDrawerActiveView, - setIsDrawerOpened, setSidebarActiveView, updateThemeStatus, setCurrentOnboardingData, - setIsHeaderNavigationEnabled, } = useDispatch( nfdOnboardingStore ); useEffect( () => { - if ( ! isLargeViewport ) { - setIsDrawerOpened( false ); - } setSidebarActiveView( SIDEBAR_LEARN_MORE ); setDrawerActiveView( VIEW_NAV_DESIGN ); - setIsHeaderNavigationEnabled( true ); }, [] ); const getSitePages = async () => {