CIF-1551 - [React Components] Refactor the NavigationContext

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 (
         <ApolloProvider client={client}>
             <UserContextProvider>
-                <NavigationContextProvider>
-                    <CartProvider>
-                        <CartInitializer>
-                            <CheckoutProvider>{props.children}</CheckoutProvider>
-                        </CartInitializer>
-                    </CartProvider>
-                </NavigationContextProvider>
+                <CartProvider>
+                    <CartInitializer>
+                        <CheckoutProvider>{props.children}</CheckoutProvider>
+                    </CartInitializer>
+                </CartProvider>
             </UserContextProvider>
         </ApolloProvider>
     );

react-components/src/components/AuthBar/__test__/useNavigationState.test.js

@@ -0,0 +1,103 @@
+/*******************************************************************************
+ *
+ *    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.
+ *
+ ******************************************************************************/
+
+/* eslint-disable react/prop-types */
+
+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(
+            <ConfigContextProvider config={configObject}>
+                <Component {...props} />
+            </ConfigContextProvider>
+        );
+
+    const configObject = {
+        storeView: 'default',
+        graphqlEndpoint: 'http//does/not/matter',
+        mountingPoints: {
+            navPanel: 'none'
+        }
+    };
+
+    const GenericComponent = ({ view }) => {
+        const [currentView, { switchTo }] = useNavigationState();
+        return (
+            <div>
+                <div data-testid="current">{currentView}</div>
+                <button onClick={() => switchTo(view)}></button>
+            </div>
+        );
+    };
+
+    const ComponentWithBackNavigation = ({ view }) => {
+        const [currentView, { handleBack }] = useNavigationState({ view });
+        return (
+            <div>
+                <div data-testid="current">{currentView}</div>
+                <button onClick={handleBack}></button>
+            </div>
+        );
+    };
+
+    it('renders the default view', () => {
+        const { getByText } = renderWithContext(GenericComponent);
+
+        expect(getByText('MENU')).not.toBeUndefined();
+    });
+
+    it('renders the Sign In view', async () => {
+        const { getByTestId, getByRole } = renderWithContext(GenericComponent, { view: 'SIGN_IN' });
+
+        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 } = renderWithContext(GenericComponent, { view: 'MY_ACCOUNT' });
+
+        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 } = renderWithContext(ComponentWithBackNavigation, { view: 'SIGN_IN' });
+
+        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 } = renderWithContext(ComponentWithBackNavigation, { view: 'FORGOT_PASSWORD' });
+
+        fireEvent.click(getByRole('button'));
+        await wait(() => {
+            const element = getByTestId('current');
+            expect(element.textContent).toEqual('SIGN_IN');
+        });
+    });
+});

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 <div className={classes.root}>{content}</div>;
 };
 
+AuthBar.propTypes = {
+    showMyAccount: func,
+    showSignIn: func
+};
+
 export default AuthBar;

react-components/src/components/AuthBar/container.js

@@ -14,25 +14,24 @@
 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;
-
     return (
         <>
             <div className="navigation__footer">
-                <AuthBar />
+                <AuthBar showSignIn={api.showSignIn} showMyAccount={api.showMyAccount} />
             </div>
             {view !== null && (
                 <div className={modalClassName}>
-                    <AuthModal />
+                    <MyAccountPanel view={view} api={api} />
                 </div>
             )}
         </>

react-components/src/components/AuthModal/authModal.js → react-components/src/components/AuthBar/myAccountPanel.js

@@ -18,23 +18,21 @@ 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';
+import { string, shape, func } from 'prop-types';
 
-const AuthModal = () => {
-    const [
-        { view },
-        {
-            showSignIn,
-            showMyAccount,
-            showMenu,
-            showForgotPassword,
-            showChangePassword,
-            showCreateAccount,
-            showAccountCreated
-        }
-    ] = useNavigationContext();
+const AuthModal = ({ view = 'MENU', api }) => {
+    const {
+        showSignIn,
+        showMyAccount,
+        showMenu,
+        showForgotPassword,
+        showChangePassword,
+        showCreateAccount,
+        showAccountCreated,
+        handleBack
+    } = api;
 
     let child;
 
@@ -58,13 +56,19 @@ const AuthModal = () => {
             );
             break;
         case 'CHANGE_PASSWORD':
-            child = <ChangePassword showMyAccount={showMyAccount} />;
+            child = <ChangePassword showMyAccount={showMyAccount} handleCancel={handleBack} />;
             break;
         case 'FORGOT_PASSWORD':
-            child = <ForgotPassword onClose={showMenu} />;
+            child = <ForgotPassword onClose={showMenu} handleCancel={handleBack} />;
             break;
         case 'CREATE_ACCOUNT':
-            child = <CreateAccount showMyAccount={showMyAccount} showAccountCreated={showAccountCreated} />;
+            child = (
+                <CreateAccount
+                    showMyAccount={showMyAccount}
+                    showAccountCreated={showAccountCreated}
+                    handleCancel={handleBack}
+                />
+            );
             break;
         case 'ACCOUNT_CREATED':
             child = <CreateAccountSuccess showSignIn={showSignIn} />;
@@ -73,4 +77,18 @@ const AuthModal = () => {
     return <div className={classes.root}>{child}</div>;
 };
 
+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;