From 8952ae0f87b8d3fbb06d4e76c8c794f163455c2d Mon Sep 17 00:00:00 2001 From: Daniel Platon Date: Wed, 19 Aug 2020 21:09:52 +0300 Subject: [PATCH 1/7] CIF-1551 - [React Components] Refactor the NavigationContext Remove the NavigationContext and manage the navigation state lower in the tree, in the `AuthBar` component. --- .../__test__/useNavigationState.test.js | 90 ++++++++ .../src/components/AuthBar/authBar.js | 10 +- .../src/components/AuthBar/container.js | 12 +- .../myAccountPanel.css} | 0 .../myAccountPanel.js} | 39 ++-- .../components/AuthBar/useNavigationState.js | 125 ++++++++++++ .../src/components/AuthModal/index.js | 14 -- .../__test__/createAccount.test.js | 27 +-- .../src/components/Portal/Portal.js | 17 +- .../src/context/NavigationContext.js | 132 ------------ .../__test__/NavigationContext.test.js | 193 ------------------ 11 files changed, 275 insertions(+), 384 deletions(-) create mode 100644 react-components/src/components/AuthBar/__test__/useNavigationState.test.js rename react-components/src/components/{AuthModal/authModal.css => AuthBar/myAccountPanel.css} (100%) rename react-components/src/components/{AuthModal/authModal.js => AuthBar/myAccountPanel.js} (76%) create mode 100644 react-components/src/components/AuthBar/useNavigationState.js delete mode 100644 react-components/src/components/AuthModal/index.js delete mode 100644 react-components/src/context/NavigationContext.js delete mode 100644 react-components/src/context/__test__/NavigationContext.test.js diff --git a/react-components/src/components/AuthBar/__test__/useNavigationState.test.js b/react-components/src/components/AuthBar/__test__/useNavigationState.test.js new file mode 100644 index 0000000000..b7e89849d4 --- /dev/null +++ b/react-components/src/components/AuthBar/__test__/useNavigationState.test.js @@ -0,0 +1,90 @@ +/******************************************************************************* + * + * Copyright 2019 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + * + ******************************************************************************/ +import React from 'react'; +import useNavigationState from '../useNavigationState'; +import { render, fireEvent, wait } from '@testing-library/react'; + +describe('useNavigationState', () => { + const GenericComponent = ({ view }) => { + const [currentView, { switchTo }] = useNavigationState(); + return ( +
+
{currentView}
+ +
+ ); + }; + + const ComponentWithBackNavigation = ({ view }) => { + const [currentView, { handleBack }] = useNavigationState({ view }); + return ( +
+
{currentView}
+ +
+ ); + }; + + it('renders the default view', () => { + const Component = () => { + const [currentView, api] = useNavigationState(); + + return
{currentView}
; + }; + + const { getByText } = render(); + + expect(getByText('MENU')).not.toBeUndefined(); + }); + + it('renders the Sign In view', async () => { + const { getByTestId, getByRole } = render(); + + fireEvent.click(getByRole('button')); + await wait(() => { + const element = getByTestId('current'); + expect(element.textContent).toEqual('SIGN_IN'); + }); + }); + + it('renders a generic view view', async () => { + const { getByTestId, getByRole } = render(); + + fireEvent.click(getByRole('button')); + await wait(() => { + const element = getByTestId('current'); + expect(element.textContent).toEqual('MY_ACCOUNT'); + }); + }); + + it('goes back to the "MENU" view', async () => { + const { getByTestId, getByRole } = render(); + + fireEvent.click(getByRole('button')); + await wait(() => { + const element = getByTestId('current'); + expect(element.textContent).toEqual('MENU'); + }); + }); + + it('goes back to the previous view', async () => { + const { getByTestId, getByRole } = render(); + + fireEvent.click(getByRole('button')); + await wait(() => { + const element = getByTestId('current'); + expect(element.textContent).toEqual('SIGN_IN'); + }); + }); +}); diff --git a/react-components/src/components/AuthBar/authBar.js b/react-components/src/components/AuthBar/authBar.js index dbcae6e46f..77451f95fe 100644 --- a/react-components/src/components/AuthBar/authBar.js +++ b/react-components/src/components/AuthBar/authBar.js @@ -17,11 +17,10 @@ import { useTranslation } from 'react-i18next'; import Button from '../Button'; import classes from './authBar.css'; import { useUserContext } from '../../context/UserContext'; -import { useNavigationContext } from '../../context/NavigationContext'; import UserChip from './userChip'; +import { func } from 'prop-types'; -const AuthBar = () => { - const [, { showSignIn, showMyAccount }] = useNavigationContext(); +const AuthBar = ({ showMyAccount, showSignIn }) => { const [{ currentUser, isSignedIn }, { getUserDetails }] = useUserContext(); useEffect(() => { @@ -43,4 +42,9 @@ const AuthBar = () => { return
{content}
; }; +AuthBar.propTypes = { + showMyAccount: func, + showSignIn: func +}; + export default AuthBar; diff --git a/react-components/src/components/AuthBar/container.js b/react-components/src/components/AuthBar/container.js index 876b128159..fbf6524725 100644 --- a/react-components/src/components/AuthBar/container.js +++ b/react-components/src/components/AuthBar/container.js @@ -14,25 +14,25 @@ import React from 'react'; import AuthBar from './authBar'; -import AuthModal from '../AuthModal'; -import { useNavigationContext } from '../../context/NavigationContext'; +import MyAccountPanel from './myAccountPanel'; import classes from './container.css'; +import useNavigationState from './useNavigationState'; const Container = () => { - const [{ view }] = useNavigationContext(); + const [view, api] = useNavigationState(); const hasModal = view !== 'MENU'; const modalClassName = hasModal ? classes.modal_open : classes.modal; - + console.log(`Rendering view ${view}`); return ( <>
- +
{view !== null && (
- +
)} diff --git a/react-components/src/components/AuthModal/authModal.css b/react-components/src/components/AuthBar/myAccountPanel.css similarity index 100% rename from react-components/src/components/AuthModal/authModal.css rename to react-components/src/components/AuthBar/myAccountPanel.css diff --git a/react-components/src/components/AuthModal/authModal.js b/react-components/src/components/AuthBar/myAccountPanel.js similarity index 76% rename from react-components/src/components/AuthModal/authModal.js rename to react-components/src/components/AuthBar/myAccountPanel.js index 16dba5b581..2839870ab8 100644 --- a/react-components/src/components/AuthModal/authModal.js +++ b/react-components/src/components/AuthBar/myAccountPanel.js @@ -18,23 +18,20 @@ import MyAccount from '../MyAccount'; import ForgotPassword from '../ForgotPassword'; import CreateAccount, { CreateAccountSuccess } from '../CreateAccount'; import ChangePassword from '../ChangePassword'; -import { useNavigationContext } from '../../context/NavigationContext'; -import classes from './authModal.css'; +import classes from './myAccountPanel.css'; -const AuthModal = () => { - const [ - { view }, - { - showSignIn, - showMyAccount, - showMenu, - showForgotPassword, - showChangePassword, - showCreateAccount, - showAccountCreated - } - ] = useNavigationContext(); +const AuthModal = ({ view, api }) => { + const { + showSignIn, + showMyAccount, + showMenu, + showForgotPassword, + showChangePassword, + showCreateAccount, + showAccountCreated, + handleBack + } = api; let child; @@ -58,13 +55,19 @@ const AuthModal = () => { ); break; case 'CHANGE_PASSWORD': - child = ; + child = ; break; case 'FORGOT_PASSWORD': - child = ; + child = ; break; case 'CREATE_ACCOUNT': - child = ; + child = ( + + ); break; case 'ACCOUNT_CREATED': child = ; diff --git a/react-components/src/components/AuthBar/useNavigationState.js b/react-components/src/components/AuthBar/useNavigationState.js new file mode 100644 index 0000000000..8f72ac8cc9 --- /dev/null +++ b/react-components/src/components/AuthBar/useNavigationState.js @@ -0,0 +1,125 @@ +/******************************************************************************* + * + * Copyright 2019 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + * + ******************************************************************************/ +import { useState, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useEventListener } from '../../utils/hooks'; + +// DOM events that are used to talk to the navigation panel +const events = { + START_ACC_MANAGEMENT: 'aem.accmg.start', + EXIT_ACC_MANAGEMENT: 'aem.accmg.exit' +}; + +const ancestors = { + CREATE_ACCOUNT: 'SIGN_IN', + FORGOT_PASSWORD: 'SIGN_IN', + ACCOUNT_CREATED: 'MENU', + MY_ACCOUNT: 'MENU', + CHANGE_PASSWORD: 'MY_ACCOUNT', + SIGN_IN: 'MENU', + MENU: null +}; + +const stepTitles = { + CREATE_ACCOUNT: t => t('account:create-account', 'Create account'), + FORGOT_PASSWORD: t => t('account:password-recovery', 'Password recovery'), + CHANGE_PASSWORD: t => t('account:change-password', 'Change Password'), + MY_ACCOUNT: t => t('account:my-account', 'My account'), + ACCOUNT_CREATED: t => t('account:account-created', 'Account created'), + SIGN_IN: t => t('account:sign-in', 'Sign In') +}; + +const startAccMgEvent = new CustomEvent(events.START_ACC_MANAGEMENT); +const exitAccMgEvent = new CustomEvent(events.EXIT_ACC_MANAGEMENT); + +const navigationPanel = document.querySelector('aside.navigation__root'); + +const dispatchNavigationEvent = title => { + const event = new CustomEvent('aem.accmg.step', { detail: { title } }); + dispatchEvent(event); +}; + +const dispatchEvent = event => navigationPanel && navigationPanel.dispatchEvent(event); + +const useNavigationState = (props = { view: 'MENU' }) => { + console.log(`Using the state here...`); + const [currentView, setCurrentView] = useState(props.view); + const [t] = useTranslation('account'); + + const handleBack = useCallback(() => { + if (currentView === null) { + return; + } + const parent = ancestors[currentView]; + if (parent === 'MENU') { + // no parent view means we're out of the account management process and back to navigation + // so we're resetting the title + showMenu(); + return; + } + if (parent === 'MY_ACCOUNT') { + showMyAccount(); + return; + } + if (parent) { + switchTo(parent); + } + }, [currentView]); + + useEventListener(document, 'aem.navigation.back', handleBack); + + const switchTo = view => { + dispatchNavigationEvent(stepTitles[view](t)); + setCurrentView(view); + }; + + const showSignIn = () => { + dispatchEvent(startAccMgEvent); + switchTo('SIGN_IN'); + }; + const showMenu = () => { + dispatchEvent(exitAccMgEvent); + setCurrentView('MENU'); + }; + const showMyAccount = () => { + dispatchEvent(startAccMgEvent); + switchTo('MY_ACCOUNT'); + }; + const showChangePassword = () => { + switchTo('CHANGE_PASSWORD'); + }; + const showCreateAccount = () => { + switchTo('CREATE_ACCOUNT'); + }; + const showForgotPassword = () => { + switchTo('FORGOT_PASSWORD'); + }; + const showAccountCreated = () => { + switchTo('ACCOUNT_CREATED'); + }; + + const api = { + showSignIn, + showMenu, + showMyAccount, + showChangePassword, + showForgotPassword, + showCreateAccount, + showAccountCreated + }; + + return [currentView, { ...api, switchTo, handleBack }]; +}; + +export default useNavigationState; diff --git a/react-components/src/components/AuthModal/index.js b/react-components/src/components/AuthModal/index.js deleted file mode 100644 index 222194e4aa..0000000000 --- a/react-components/src/components/AuthModal/index.js +++ /dev/null @@ -1,14 +0,0 @@ -/******************************************************************************* - * - * Copyright 2019 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - ******************************************************************************/ -export { default } from './authModal'; diff --git a/react-components/src/components/CreateAccount/__test__/createAccount.test.js b/react-components/src/components/CreateAccount/__test__/createAccount.test.js index dc2e62aede..04d51c034a 100644 --- a/react-components/src/components/CreateAccount/__test__/createAccount.test.js +++ b/react-components/src/components/CreateAccount/__test__/createAccount.test.js @@ -18,7 +18,6 @@ import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; import UserContextProvider, { useUserContext } from '../../../context/UserContext'; -import NavigationContextProvider from '../../../context/NavigationContext'; import { CartProvider } from '../../Minicart/cartContext'; import CreateAccount from '../createAccount'; import i18n from '../../../../__mocks__/i18nForTests'; @@ -38,11 +37,9 @@ describe('', () => { - - state => state}> - - - + state => state}> + {}} /> + @@ -143,11 +140,9 @@ describe('', () => { const { getByLabelText, getByTestId, container } = render( - - state => state}> - - - + state => state}> + + ); @@ -220,7 +215,7 @@ describe('', () => { if (createAccountError) { content =
{createAccountError}
; } else { - content = ; + content = {}} />; } return content; @@ -229,11 +224,9 @@ describe('', () => { const { getByTestId, getByLabelText } = render( - - state => state}> - - - + state => state}> + + ); diff --git a/react-components/src/components/Portal/Portal.js b/react-components/src/components/Portal/Portal.js index 913742e07b..55b6453fd1 100644 --- a/react-components/src/components/Portal/Portal.js +++ b/react-components/src/components/Portal/Portal.js @@ -13,6 +13,21 @@ ******************************************************************************/ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; +import React, { Suspense } from 'react'; + +import LoadingIndicator from '../LoadingIndicator'; + +const withSuspense = Component => { + let WithSuspense = props => { + return ( + }> + + + ); + }; + WithSuspense.displayName = `withSuspense(${Component.displayName || Component.name})`; + return WithSuspense; +}; const Portal = props => { const { selector, children } = props; @@ -30,4 +45,4 @@ Portal.propTypes = { selector: PropTypes.string.isRequired }; -export default Portal; +export default withSuspense(Portal); diff --git a/react-components/src/context/NavigationContext.js b/react-components/src/context/NavigationContext.js deleted file mode 100644 index ca31cf9bc9..0000000000 --- a/react-components/src/context/NavigationContext.js +++ /dev/null @@ -1,132 +0,0 @@ -/******************************************************************************* - * - * Copyright 2019 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - ******************************************************************************/ -import React, { useCallback, useContext, useReducer, Suspense } from 'react'; -import { object } from 'prop-types'; -import { useTranslation } from 'react-i18next'; - -import LoadingIndicator from '../components/LoadingIndicator'; -import { useEventListener } from '../utils/hooks'; -import * as NavigationActions from '../actions/navigation'; - -const ancestors = { - CREATE_ACCOUNT: 'SIGN_IN', - FORGOT_PASSWORD: 'SIGN_IN', - ACCOUNT_CREATED: 'MENU', - MY_ACCOUNT: 'MENU', - CHANGE_PASSWORD: 'MY_ACCOUNT', - SIGN_IN: 'MENU', - MENU: null -}; - -const NavigationContext = React.createContext(); - -const reducerFactory = () => { - return (state, action) => { - switch (action.type) { - case 'changeView': { - return { - ...state, - view: action.view - }; - } - default: - return state; - } - }; -}; - -const NavigationContextProvider = props => { - const initialState = props.initialState || { - view: 'MENU' - }; - - const [navigationState, dispatch] = useReducer(reducerFactory(), initialState); - const { view } = navigationState; - const [t] = useTranslation('account'); - - const showSignIn = () => NavigationActions.showSignIn({ dispatch, t }); - - const showMenu = () => NavigationActions.showMenu({ dispatch, t }); - - const showMyAccount = () => NavigationActions.showMyAccount({ dispatch, t }); - - const showChangePassword = () => NavigationActions.showChangePassword({ dispatch, t }); - - const showForgotPassword = () => NavigationActions.showForgotPassword({ dispatch, t }); - - const showCreateAccount = () => NavigationActions.showCreateAccount({ dispatch, t }); - - const showAccountCreated = () => NavigationActions.showAccountCreated({ dispatch, t }); - - const showView = view => NavigationActions.showView({ dispatch, t, view }); - - const handleBack = useCallback(() => { - if (navigationState.view === null) { - return; - } - const parent = ancestors[view]; - if (parent === 'MENU') { - // no parent view means we're out of the account management process and back to navigation - // so we're resetting the title - showMenu(); - return; - } - if (parent === 'MY_ACCOUNT') { - showMyAccount(); - return; - } - if (parent) { - showView(parent); - } - }, [view]); - - useEventListener(document, 'aem.navigation.back', handleBack); - - const { children } = props; - const contextValue = [ - navigationState, - { - dispatch, - showSignIn, - showMenu, - showMyAccount, - showChangePassword, - showForgotPassword, - showCreateAccount, - showAccountCreated - } - ]; - return {children}; -}; - -NavigationContextProvider.propTypes = { - initialState: object -}; - -const withSuspense = NavigationContextProvider => { - let WithSuspense = props => { - return ( - }> - - - ); - }; - WithSuspense.displayName = `withSuspense(${NavigationContextProvider.displayName || - NavigationContextProvider.name})`; - return WithSuspense; -}; - -export default withSuspense(NavigationContextProvider); - -export const useNavigationContext = () => useContext(NavigationContext); diff --git a/react-components/src/context/__test__/NavigationContext.test.js b/react-components/src/context/__test__/NavigationContext.test.js deleted file mode 100644 index 4f7508fcd7..0000000000 --- a/react-components/src/context/__test__/NavigationContext.test.js +++ /dev/null @@ -1,193 +0,0 @@ -/******************************************************************************* - * - * Copyright 2019 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - ******************************************************************************/ -import React from 'react'; -import { render, fireEvent, waitForElement } from '@testing-library/react'; -import { MockedProvider } from '@apollo/react-testing'; -import NavigationContextProvider, { useNavigationContext } from '../NavigationContext'; - -describe('NavigationContext test', () => { - const ContextWrapper = () => { - const [ - { view }, - { showSignIn, showMyAccount, showForgotPassword, showChangePassword, showCreateAccount, showAccountCreated } - ] = useNavigationContext(); - - let child; - let content; - - switch (view) { - case 'MENU': - child =
Menu page
; - break; - case 'SIGN_IN': - child =
Sign in page
; - break; - case 'MY_ACCOUNT': - child =
My account page
; - break; - case 'CHANGE_PASSWORD': - child =
Change password page
; - break; - case 'FORGOT_PASSWORD': - child =
Forgot password page
; - break; - case 'CREATE_ACCOUNT': - child =
Create account page
; - break; - case 'ACCOUNT_CREATED': - child =
Account created page
; - break; - } - - content = ( - <> -
{child}
- - - - - - - - ); - - return
{content}
; - }; - - it('shows sign in page', async () => { - const { getByText, getByTestId } = render( - - - - - - ); - - expect(getByText('Sign in')).not.toBeUndefined(); - - fireEvent.click(getByText('Sign in')); - const result = await waitForElement(() => getByTestId('sign_in')); - expect(result.textContent).toEqual('Sign in page'); - - fireEvent(document, new CustomEvent('aem.navigation.back')); - - const backResult = await waitForElement(() => getByTestId('menu')); - expect(backResult.textContent).toEqual('Menu page'); - }); - - it('shows my account page', async () => { - const { getByText, getByTestId } = render( - - - - - - ); - - expect(getByText('My account')).not.toBeUndefined(); - - fireEvent.click(getByText('My account')); - const result = await waitForElement(() => getByTestId('my_account')); - expect(result.textContent).toEqual('My account page'); - - fireEvent(document, new CustomEvent('aem.navigation.back')); - - const backResult = await waitForElement(() => getByTestId('menu')); - expect(backResult.textContent).toEqual('Menu page'); - }); - - it('shows forgot password page', async () => { - const { getByText, getByTestId } = render( - - - - - - ); - - expect(getByText('Forgot password')).not.toBeUndefined(); - - fireEvent.click(getByText('Forgot password')); - const result = await waitForElement(() => getByTestId('forgot_password')); - expect(result.textContent).toEqual('Forgot password page'); - - fireEvent(document, new CustomEvent('aem.navigation.back')); - - const backResult = await waitForElement(() => getByTestId('sign_in')); - expect(backResult.textContent).toEqual('Sign in page'); - }); - - it('shows change password page', async () => { - const { getByText, getByTestId } = render( - - - - - - ); - - expect(getByText('Change password')).not.toBeUndefined(); - - fireEvent.click(getByText('Change password')); - const result = await waitForElement(() => getByTestId('change_password')); - expect(result.textContent).toEqual('Change password page'); - - fireEvent(document, new CustomEvent('aem.navigation.back')); - - const backResult = await waitForElement(() => getByTestId('my_account')); - expect(backResult.textContent).toEqual('My account page'); - }); - - it('shows create account page', async () => { - const { getByText, getByTestId } = render( - - - - - - ); - - expect(getByText('Create account')).not.toBeUndefined(); - - fireEvent.click(getByText('Create account')); - const result = await waitForElement(() => getByTestId('create_account')); - expect(result.textContent).toEqual('Create account page'); - - fireEvent(document, new CustomEvent('aem.navigation.back')); - - const backResult = await waitForElement(() => getByTestId('sign_in')); - expect(backResult.textContent).toEqual('Sign in page'); - }); - - it('shows account created page', async () => { - const { getByText, getByTestId } = render( - - - - - - ); - - expect(getByText('Account created')).not.toBeUndefined(); - - fireEvent.click(getByText('Account created')); - const result = await waitForElement(() => getByTestId('account_created')); - expect(result.textContent).toEqual('Account created page'); - - fireEvent(document, new CustomEvent('aem.navigation.back')); - - const backResult = await waitForElement(() => getByTestId('menu')); - expect(backResult.textContent).toEqual('Menu page'); - }); -}); From 64766e46aef4c8fb7fe74a74a4ae25f1913f9566 Mon Sep 17 00:00:00 2001 From: Daniel Platon Date: Wed, 19 Aug 2020 21:11:37 +0300 Subject: [PATCH 2/7] Remove the reference for NavigationContext --- react-components/src/components/App/app.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/react-components/src/components/App/app.js b/react-components/src/components/App/app.js index afb39ea9d2..d5ac0731f1 100644 --- a/react-components/src/components/App/app.js +++ b/react-components/src/components/App/app.js @@ -19,7 +19,6 @@ import ApolloClient from 'apollo-boost'; import { CartProvider, CartInitializer } from '../Minicart'; import { CheckoutProvider } from '../Checkout'; import UserContextProvider from '../../context/UserContext'; -import NavigationContextProvider from '../../context/NavigationContext'; import { checkCookie, cookieValue } from '../../utils/cookieUtils'; import { useConfigContext } from '../../context/ConfigContext'; @@ -44,13 +43,11 @@ const App = props => { return ( - - - - {props.children} - - - + + + {props.children} + + ); From 1aad343346c089196782cc5401277dbd9bfc51b2 Mon Sep 17 00:00:00 2001 From: Daniel Platon Date: Thu, 20 Aug 2020 09:10:33 +0300 Subject: [PATCH 3/7] Fix linting warnings and prop types definitions --- .../src/actions/navigation/actions.js | 100 ------------------ .../src/actions/navigation/index.js | 14 --- .../AccountContainer/accountDropdown.js | 3 - .../__test__/useAddressForm.test.js | 2 - .../__test__/useNavigationState.test.js | 5 +- .../src/components/AuthBar/container.js | 1 - .../src/components/AuthBar/myAccountPanel.js | 17 ++- .../components/AuthBar/useNavigationState.js | 1 - .../src/components/Checkout/editableForm.js | 2 +- .../Minicart/__test__/cartContext.test.js | 3 + .../Minicart/__test__/minicart.test.js | 4 +- .../Minicart/__test__/useCouponItem.test.js | 5 +- .../Minicart/__test__/useMinicart.test.js | 3 + .../queries/__test__/validateQueries.test.js | 1 + 14 files changed, 35 insertions(+), 126 deletions(-) delete mode 100644 react-components/src/actions/navigation/actions.js delete mode 100644 react-components/src/actions/navigation/index.js diff --git a/react-components/src/actions/navigation/actions.js b/react-components/src/actions/navigation/actions.js deleted file mode 100644 index 5f0973f667..0000000000 --- a/react-components/src/actions/navigation/actions.js +++ /dev/null @@ -1,100 +0,0 @@ -/******************************************************************************* - * - * Copyright 2019 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - ******************************************************************************/ - -/* - Views: - SIGNIN - the signing modal is open - MENU - the default view - CREATE_ACCOUNT - the create account modal - MY_ACCOUNT - the account props modal - ACCOUNT_CREATED - the account created success message modal - FORGOT_PASSWORD - the forgot password modal - CHANGE_PASSWORD - the change password modal - -*/ - -// DOM events that are used to talk to the navigation panel -const events = { - START_ACC_MANAGEMENT: 'aem.accmg.start', - EXIT_ACC_MANAGEMENT: 'aem.accmg.exit' -}; - -// a map of the UI states so we can properly handle the "BACK" button - -const startAccMgEvent = new CustomEvent(events.START_ACC_MANAGEMENT); -const exitAccMgEvent = new CustomEvent(events.EXIT_ACC_MANAGEMENT); - -const navigationPanel = document.querySelector('aside.navigation__root'); -const dispatchEvent = event => navigationPanel && navigationPanel.dispatchEvent(event); - -const stepTitles = { - CREATE_ACCOUNT: t => t('account:create-account', 'Create account'), - FORGOT_PASSWORD: t => t('account:password-recovery', 'Password recovery'), - CHANGE_PASSWORD: t => t('account:change-password', 'Change Password'), - MY_ACCOUNT: t => t('account:my-account', 'My account'), - ACCOUNT_CREATED: t => t('account:account-created', 'Account created'), - SIGN_IN: t => t('account:sign-in', 'Sign In') -}; - -export const showSignIn = ({ dispatch, t }) => { - const view = 'SIGN_IN'; - dispatchEvent(startAccMgEvent); - dispatchEvent(new CustomEvent('aem.accmg.step', { detail: { title: stepTitles[view](t) } })); - dispatch({ type: 'changeView', view }); -}; - -export const showMenu = ({ dispatch, t }) => { - dispatch({ type: 'changeView', view: 'MENU' }); - dispatchEvent(exitAccMgEvent); -}; - -export const showMyAccount = ({ dispatch, t }) => { - const view = 'MY_ACCOUNT'; - dispatchEvent(startAccMgEvent); - dispatchEvent(new CustomEvent('aem.accmg.step', { detail: { title: stepTitles[view](t) } })); - dispatch({ type: 'changeView', view }); -}; - -export const showChangePassword = ({ dispatch, t }) => { - const view = 'CHANGE_PASSWORD'; - dispatchEvent(startAccMgEvent); - dispatchEvent(new CustomEvent('aem.accmg.step', { detail: { title: stepTitles[view](t) } })); - dispatch({ type: 'changeView', view }); -}; - -export const showForgotPassword = ({ dispatch, t }) => { - const view = 'FORGOT_PASSWORD'; - dispatchEvent(new CustomEvent('aem.accmg.step', { detail: { title: stepTitles[view](t) } })); - dispatch({ type: 'changeView', view }); -}; - -export const showCreateAccount = ({ dispatch, t }) => { - const view = 'CREATE_ACCOUNT'; - dispatchEvent(new CustomEvent('aem.accmg.step', { detail: { title: stepTitles[view](t) } })); - dispatch({ type: 'changeView', view }); -}; - -export const showAccountCreated = ({ dispatch, t }) => { - const view = 'ACCOUNT_CREATED'; - dispatchEvent(new CustomEvent('aem.accmg.step', { detail: { title: stepTitles[view](t) } })); - dispatch({ type: 'changeView', view }); -}; - -export const showView = ({ dispatch, t, view }) => { - const title = stepTitles[view]; - if (title) { - dispatchEvent(new CustomEvent('aem.accmg.step', { detail: { title: title(t) } })); - dispatch({ type: 'changeView', view }); - } -}; diff --git a/react-components/src/actions/navigation/index.js b/react-components/src/actions/navigation/index.js deleted file mode 100644 index 54a28cd904..0000000000 --- a/react-components/src/actions/navigation/index.js +++ /dev/null @@ -1,14 +0,0 @@ -/******************************************************************************* - * - * Copyright 2019 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - ******************************************************************************/ -export * from './actions'; diff --git a/react-components/src/components/AccountContainer/accountDropdown.js b/react-components/src/components/AccountContainer/accountDropdown.js index 2a5df4c29a..34ca0b3108 100644 --- a/react-components/src/components/AccountContainer/accountDropdown.js +++ b/react-components/src/components/AccountContainer/accountDropdown.js @@ -12,7 +12,6 @@ * ******************************************************************************/ import React from 'react'; -import { useTranslation } from 'react-i18next'; import { useUserContext } from '../../context/UserContext'; import SignIn from '../SignIn/signIn'; @@ -29,8 +28,6 @@ const AccountDropdown = () => { { showSignIn, showMyAccount, showForgotPassword, showCreateAccount, showAccountCreated, showChangePassword } ] = useUserContext(); - const [t] = useTranslation('account'); - const className = isAccountDropdownOpen ? classes.dropdown_open : classes.dropdown; let child; diff --git a/react-components/src/components/AddressBook/__test__/useAddressForm.test.js b/react-components/src/components/AddressBook/__test__/useAddressForm.test.js index 09d96085e6..a2c55b7afc 100644 --- a/react-components/src/components/AddressBook/__test__/useAddressForm.test.js +++ b/react-components/src/components/AddressBook/__test__/useAddressForm.test.js @@ -21,8 +21,6 @@ import * as actions from '../../../actions/user'; jest.mock('../../../actions/user'); -const mockReducerFactory = jest.fn(state => state); - describe('useAddressForm', () => { it('calls the "updateAddress"', async () => { const Wrapper = () => { diff --git a/react-components/src/components/AuthBar/__test__/useNavigationState.test.js b/react-components/src/components/AuthBar/__test__/useNavigationState.test.js index b7e89849d4..e92f623f38 100644 --- a/react-components/src/components/AuthBar/__test__/useNavigationState.test.js +++ b/react-components/src/components/AuthBar/__test__/useNavigationState.test.js @@ -11,6 +11,9 @@ * governing permissions and limitations under the License. * ******************************************************************************/ + +/* eslint-disable react/prop-types */ + import React from 'react'; import useNavigationState from '../useNavigationState'; import { render, fireEvent, wait } from '@testing-library/react'; @@ -38,7 +41,7 @@ describe('useNavigationState', () => { it('renders the default view', () => { const Component = () => { - const [currentView, api] = useNavigationState(); + const [currentView] = useNavigationState(); return
{currentView}
; }; diff --git a/react-components/src/components/AuthBar/container.js b/react-components/src/components/AuthBar/container.js index fbf6524725..bfee8ecc01 100644 --- a/react-components/src/components/AuthBar/container.js +++ b/react-components/src/components/AuthBar/container.js @@ -24,7 +24,6 @@ const Container = () => { const hasModal = view !== 'MENU'; const modalClassName = hasModal ? classes.modal_open : classes.modal; - console.log(`Rendering view ${view}`); return ( <>
diff --git a/react-components/src/components/AuthBar/myAccountPanel.js b/react-components/src/components/AuthBar/myAccountPanel.js index 2839870ab8..adef352f7b 100644 --- a/react-components/src/components/AuthBar/myAccountPanel.js +++ b/react-components/src/components/AuthBar/myAccountPanel.js @@ -20,8 +20,9 @@ import CreateAccount, { CreateAccountSuccess } from '../CreateAccount'; import ChangePassword from '../ChangePassword'; import classes from './myAccountPanel.css'; +import { string, shape, func } from 'prop-types'; -const AuthModal = ({ view, api }) => { +const AuthModal = ({ view = 'MENU', api }) => { const { showSignIn, showMyAccount, @@ -76,4 +77,18 @@ const AuthModal = ({ view, api }) => { return
{child}
; }; +AuthModal.propTypes = { + view: string, + api: shape({ + showSignIn: func, + showMyAccount: func, + showMenu: func, + showForgotPassword: func, + showChangePassword: func, + showCreateAccount: func, + showAccountCreated: func, + handleBack: func + }) +}; + export default AuthModal; diff --git a/react-components/src/components/AuthBar/useNavigationState.js b/react-components/src/components/AuthBar/useNavigationState.js index 8f72ac8cc9..314b20da22 100644 --- a/react-components/src/components/AuthBar/useNavigationState.js +++ b/react-components/src/components/AuthBar/useNavigationState.js @@ -53,7 +53,6 @@ const dispatchNavigationEvent = title => { const dispatchEvent = event => navigationPanel && navigationPanel.dispatchEvent(event); const useNavigationState = (props = { view: 'MENU' }) => { - console.log(`Using the state here...`); const [currentView, setCurrentView] = useState(props.view); const [t] = useTranslation('account'); diff --git a/react-components/src/components/Checkout/editableForm.js b/react-components/src/components/Checkout/editableForm.js index 08f142079c..58b2e1ddf2 100644 --- a/react-components/src/components/Checkout/editableForm.js +++ b/react-components/src/components/Checkout/editableForm.js @@ -39,7 +39,7 @@ import { useUserContext } from '../../context/UserContext'; * within the form. */ const EditableForm = props => { - const { submitShippingMethod, submitting, isAddressInvalid, invalidAddressMessage } = props; + const { submitting, isAddressInvalid, invalidAddressMessage } = props; const [{ cart, cartId }, cartDispatch] = useCartState(); const [{ editing, shippingAddress, shippingMethod, paymentMethod, billingAddress }, dispatch] = useCheckoutState(); const { error: countriesError, countries } = useCountries(); diff --git a/react-components/src/components/Minicart/__test__/cartContext.test.js b/react-components/src/components/Minicart/__test__/cartContext.test.js index db582a6200..0f519524fd 100644 --- a/react-components/src/components/Minicart/__test__/cartContext.test.js +++ b/react-components/src/components/Minicart/__test__/cartContext.test.js @@ -11,6 +11,9 @@ * governing permissions and limitations under the License. * ******************************************************************************/ + +/* eslint-disable react/prop-types */ + import React from 'react'; import { CartProvider, useCartState } from '../cartContext'; import { render, fireEvent } from '@testing-library/react'; diff --git a/react-components/src/components/Minicart/__test__/minicart.test.js b/react-components/src/components/Minicart/__test__/minicart.test.js index 16aa587295..351e10683c 100644 --- a/react-components/src/components/Minicart/__test__/minicart.test.js +++ b/react-components/src/components/Minicart/__test__/minicart.test.js @@ -11,8 +11,10 @@ * governing permissions and limitations under the License. * ******************************************************************************/ + +/* eslint-disable react/prop-types */ + import React from 'react'; -import ReactDOM from 'react-dom'; import { render } from 'test-utils'; import { I18nextProvider } from 'react-i18next'; diff --git a/react-components/src/components/Minicart/__test__/useCouponItem.test.js b/react-components/src/components/Minicart/__test__/useCouponItem.test.js index 6851b91138..ad4f0a62a8 100644 --- a/react-components/src/components/Minicart/__test__/useCouponItem.test.js +++ b/react-components/src/components/Minicart/__test__/useCouponItem.test.js @@ -11,6 +11,9 @@ * governing permissions and limitations under the License. * ******************************************************************************/ + +/* eslint-disable react/prop-types */ + import React from 'react'; import { render, fireEvent } from '@testing-library/react'; @@ -30,7 +33,7 @@ jest.mock('../../Minicart/cartContext.js', () => ({ describe('useCouponItem', () => { it('calls the "removeCoupon"', async () => { const Consumer = () => { - const [data, { removeCouponFromCart }] = useCouponItem(); + const [, { removeCouponFromCart }] = useCouponItem(); return (
diff --git a/react-components/src/components/Minicart/__test__/useMinicart.test.js b/react-components/src/components/Minicart/__test__/useMinicart.test.js index 5b628862f0..57e2333de6 100644 --- a/react-components/src/components/Minicart/__test__/useMinicart.test.js +++ b/react-components/src/components/Minicart/__test__/useMinicart.test.js @@ -11,6 +11,9 @@ * governing permissions and limitations under the License. * ******************************************************************************/ + +/* eslint-disable react/prop-types */ + import React from 'react'; import { render, fireEvent, waitForElement } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; diff --git a/react-components/src/queries/__test__/validateQueries.test.js b/react-components/src/queries/__test__/validateQueries.test.js index b0ac02eebc..c12faf60aa 100644 --- a/react-components/src/queries/__test__/validateQueries.test.js +++ b/react-components/src/queries/__test__/validateQueries.test.js @@ -31,6 +31,7 @@ describe.each([ }); expect(files.length).toBeGreaterThan(0); // Ensures we read the right folder + // eslint-disable-next-line no-console console.log(`Validating ${files.length} GraphQL requests against Magento schema ${version}`); let schema = buildClientSchema(magentoSchema.data); From bbb05bdb3331404b307ab5cec5d6133de01f655a Mon Sep 17 00:00:00 2001 From: Daniel Platon Date: Mon, 24 Aug 2020 10:42:57 +0300 Subject: [PATCH 4/7] Feedback on the review: - read the navigation panel selector from the configuration context - remove the log statement from the `validateQueries` test. --- .../src/components/AuthBar/useNavigationState.js | 12 ++++++++---- react-components/src/context/ConfigContext.js | 3 ++- .../src/queries/__test__/validateQueries.test.js | 2 -- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/react-components/src/components/AuthBar/useNavigationState.js b/react-components/src/components/AuthBar/useNavigationState.js index 314b20da22..e1eaa0b8e0 100644 --- a/react-components/src/components/AuthBar/useNavigationState.js +++ b/react-components/src/components/AuthBar/useNavigationState.js @@ -14,6 +14,7 @@ import { useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { useEventListener } from '../../utils/hooks'; +import { useConfigContext } from '../../context/ConfigContext'; // DOM events that are used to talk to the navigation panel const events = { @@ -43,19 +44,22 @@ const stepTitles = { const startAccMgEvent = new CustomEvent(events.START_ACC_MANAGEMENT); const exitAccMgEvent = new CustomEvent(events.EXIT_ACC_MANAGEMENT); -const navigationPanel = document.querySelector('aside.navigation__root'); - const dispatchNavigationEvent = title => { const event = new CustomEvent('aem.accmg.step', { detail: { title } }); dispatchEvent(event); }; -const dispatchEvent = event => navigationPanel && navigationPanel.dispatchEvent(event); - const useNavigationState = (props = { view: 'MENU' }) => { const [currentView, setCurrentView] = useState(props.view); const [t] = useTranslation('account'); + const { + mountingPoints: { navPanel } + } = useConfigContext(); + + const navigationPanel = document.querySelector(navPanel); + const dispatchEvent = event => navigationPanel && navigationPanel.dispatchEvent(event); + const handleBack = useCallback(() => { if (currentView === null) { return; diff --git a/react-components/src/context/ConfigContext.js b/react-components/src/context/ConfigContext.js index cd64751ebc..4bbe10a8b4 100644 --- a/react-components/src/context/ConfigContext.js +++ b/react-components/src/context/ConfigContext.js @@ -30,7 +30,8 @@ ConfigContextProvider.propTypes = { accountContainer: PropTypes.string, addressBookContainer: PropTypes.string, authBarContainer: PropTypes.string, - cartTrigger: PropTypes.string + cartTrigger: PropTypes.string, + navPanel: PropTypes.string }), pagePaths: PropTypes.shape({ addressBook: PropTypes.string diff --git a/react-components/src/queries/__test__/validateQueries.test.js b/react-components/src/queries/__test__/validateQueries.test.js index c12faf60aa..732fb7e6d2 100644 --- a/react-components/src/queries/__test__/validateQueries.test.js +++ b/react-components/src/queries/__test__/validateQueries.test.js @@ -31,8 +31,6 @@ describe.each([ }); expect(files.length).toBeGreaterThan(0); // Ensures we read the right folder - // eslint-disable-next-line no-console - console.log(`Validating ${files.length} GraphQL requests against Magento schema ${version}`); let schema = buildClientSchema(magentoSchema.data); it.each(files)('validates the GraphQL request from %s', file => { From 126ca0eb04de0d70eb2635d40cd9ede331da9601 Mon Sep 17 00:00:00 2001 From: Daniel Platon Date: Tue, 25 Aug 2020 17:48:34 +0300 Subject: [PATCH 5/7] Fix unit tests --- .../__test__/useNavigationState.test.js | 32 ++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/react-components/src/components/AuthBar/__test__/useNavigationState.test.js b/react-components/src/components/AuthBar/__test__/useNavigationState.test.js index e92f623f38..0ffa1d2081 100644 --- a/react-components/src/components/AuthBar/__test__/useNavigationState.test.js +++ b/react-components/src/components/AuthBar/__test__/useNavigationState.test.js @@ -17,8 +17,24 @@ import React from 'react'; import useNavigationState from '../useNavigationState'; import { render, fireEvent, wait } from '@testing-library/react'; +import ConfigContextProvider from '../../../context/ConfigContext'; describe('useNavigationState', () => { + const renderWithContext = (Component, props) => + render( + + + + ); + + const configObject = { + storeView: 'default', + graphqlEndpoint: 'http//does/not/matter', + mountingPoints: { + navPanel: 'none' + } + }; + const GenericComponent = ({ view }) => { const [currentView, { switchTo }] = useNavigationState(); return ( @@ -40,19 +56,13 @@ describe('useNavigationState', () => { }; it('renders the default view', () => { - const Component = () => { - const [currentView] = useNavigationState(); - - return
{currentView}
; - }; - - const { getByText } = render(); + const { getByText } = renderWithContext(GenericComponent); expect(getByText('MENU')).not.toBeUndefined(); }); it('renders the Sign In view', async () => { - const { getByTestId, getByRole } = render(); + const { getByTestId, getByRole } = renderWithContext(GenericComponent, { view: 'SIGN_IN' }); fireEvent.click(getByRole('button')); await wait(() => { @@ -62,7 +72,7 @@ describe('useNavigationState', () => { }); it('renders a generic view view', async () => { - const { getByTestId, getByRole } = render(); + const { getByTestId, getByRole } = renderWithContext(GenericComponent, { view: 'MY_ACCOUNT' }); fireEvent.click(getByRole('button')); await wait(() => { @@ -72,7 +82,7 @@ describe('useNavigationState', () => { }); it('goes back to the "MENU" view', async () => { - const { getByTestId, getByRole } = render(); + const { getByTestId, getByRole } = renderWithContext(ComponentWithBackNavigation, { view: 'SIGN_IN' }); fireEvent.click(getByRole('button')); await wait(() => { @@ -82,7 +92,7 @@ describe('useNavigationState', () => { }); it('goes back to the previous view', async () => { - const { getByTestId, getByRole } = render(); + const { getByTestId, getByRole } = renderWithContext(ComponentWithBackNavigation, { view: 'FORGOT_PASSWORD' }); fireEvent.click(getByRole('button')); await wait(() => { From 489a18bea9f298285dd8c6fbfa45af5095ac8f5a Mon Sep 17 00:00:00 2001 From: Daniel Platon Date: Tue, 8 Sep 2020 15:54:48 +0300 Subject: [PATCH 6/7] Fix a bug which was causing the navigation panel title to remain unchanged when navigating the "My Account" feature. The bug was caused by a clash of names between the OOTB `dispatchEvent` function and the custom one. Renaming the function and moving it in the same scope as the caller fixed the issue. --- .../src/components/AuthBar/useNavigationState.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/react-components/src/components/AuthBar/useNavigationState.js b/react-components/src/components/AuthBar/useNavigationState.js index e1eaa0b8e0..3ea9857ad8 100644 --- a/react-components/src/components/AuthBar/useNavigationState.js +++ b/react-components/src/components/AuthBar/useNavigationState.js @@ -44,11 +44,6 @@ const stepTitles = { const startAccMgEvent = new CustomEvent(events.START_ACC_MANAGEMENT); const exitAccMgEvent = new CustomEvent(events.EXIT_ACC_MANAGEMENT); -const dispatchNavigationEvent = title => { - const event = new CustomEvent('aem.accmg.step', { detail: { title } }); - dispatchEvent(event); -}; - const useNavigationState = (props = { view: 'MENU' }) => { const [currentView, setCurrentView] = useState(props.view); const [t] = useTranslation('account'); @@ -58,7 +53,13 @@ const useNavigationState = (props = { view: 'MENU' }) => { } = useConfigContext(); const navigationPanel = document.querySelector(navPanel); - const dispatchEvent = event => navigationPanel && navigationPanel.dispatchEvent(event); + + const triggerNavigationEvent = title => { + const event = new CustomEvent('aem.accmg.step', { detail: { title } }); + triggerEvent(event); + }; + + const triggerEvent = event => navigationPanel && navigationPanel.dispatchEvent(event); const handleBack = useCallback(() => { if (currentView === null) { @@ -83,7 +84,7 @@ const useNavigationState = (props = { view: 'MENU' }) => { useEventListener(document, 'aem.navigation.back', handleBack); const switchTo = view => { - dispatchNavigationEvent(stepTitles[view](t)); + triggerNavigationEvent(stepTitles[view](t)); setCurrentView(view); }; From fbe887043496285d521b95ca306f44561a8f1710 Mon Sep 17 00:00:00 2001 From: Daniel Platon Date: Tue, 8 Sep 2020 18:49:14 +0300 Subject: [PATCH 7/7] Fix the bug with the "dissappearing back arrow" --- react-components/src/components/AuthBar/useNavigationState.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react-components/src/components/AuthBar/useNavigationState.js b/react-components/src/components/AuthBar/useNavigationState.js index 3ea9857ad8..a457f6273f 100644 --- a/react-components/src/components/AuthBar/useNavigationState.js +++ b/react-components/src/components/AuthBar/useNavigationState.js @@ -89,11 +89,11 @@ const useNavigationState = (props = { view: 'MENU' }) => { }; const showSignIn = () => { - dispatchEvent(startAccMgEvent); + triggerEvent(startAccMgEvent); switchTo('SIGN_IN'); }; const showMenu = () => { - dispatchEvent(exitAccMgEvent); + triggerEvent(exitAccMgEvent); setCurrentView('MENU'); }; const showMyAccount = () => {