@ubertheme/mega-menu/src/talons/Navigation/useNavigation.js

UB Mega Menu Module for Magento PWA Studio

import { useCallback, useEffect, useMemo, useState } from 'react';
import {useIntl} from "react-intl";
import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
import { useAppContext } from '@magento/peregrine/lib/context/app';
import { useUserContext } from '@magento/peregrine/lib/context/user';
import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/Navigation/navigation.gql';

const ancestors = {
    CREATE_ACCOUNT: 'SIGN_IN',
    FORGOT_PASSWORD: 'SIGN_IN',
    MY_ACCOUNT: 'MENU',
    SIGN_IN: 'MENU',
    MENU: null
};

export const useNavigation = (props = {}) => {
    const { formatMessage } = useIntl();

    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
    const { getCustomerQuery } = props;

    // retrieve app state from context
    const [appState, { closeDrawer }] = useAppContext();

    const [, { getUserDetails }] = useUserContext();

    const fetchUserDetails = useAwaitQuery(getCustomerQuery);

    // request data from server
    useEffect(() => {
        getUserDetails({ fetchUserDetails });
    }, [fetchUserDetails, getUserDetails]);

    // extract relevant data from app state
    const { drawer } = appState;
    const isOpen = drawer === 'nav';

    // get local state
    const [view, setView] = useState('MENU');

    // using these vars to set Header Nav > Title
    const [navTitle, setNavTitle] = useState('');

    // using these vars for next/back event in OffCanvas Menu
    const [parentMenuItemId, setParentMenuItemId] = useState(0);
    const [backMenuItem, setBackMenuItem] = useState({
        id: 0,
        title: navTitle
    });

    // define local variables
    const isTopLevel = parentMenuItemId === 0;
    const hasModal = view !== 'MENU';

    // define handlers
    const handleBack = useCallback(() => {
        const parentView = ancestors[view];
        if (parentView) {
            setView(parentView);
        } else if (!isTopLevel) {
            setParentMenuItemId(backMenuItem.id);
            setNavTitle(backMenuItem.title);
        } else {
            closeDrawer();
        }
    }, [backMenuItem, closeDrawer, isTopLevel, view]);

    const handleClose = useCallback(() => {
        closeDrawer();
    }, [closeDrawer]);

    // create callbacks for local state
    const showCreateAccount = useCallback(() => {
        setView('CREATE_ACCOUNT');
        setNavTitle(
            formatMessage({
                id: 'navHeader.createAccountText',
                defaultMessage: 'Create Account'
            })
        );
    }, [setView]);
    const showForgotPassword = useCallback(() => {
        setView('FORGOT_PASSWORD');
        setNavTitle(
            formatMessage({
                id: 'navHeader.forgotPasswordText',
                defaultMessage: 'Forgot Password'
            })
        );
    }, [setView]);
    const showMainMenu = useCallback(() => {
        setView('MENU');
        setNavTitle(
            formatMessage({
                id: 'navHeader.mainMenuText',
                defaultMessage: 'Main Menu'
            })
        );
    }, [setView]);
    const showMyAccount = useCallback(() => {
        setView('MY_ACCOUNT');
        setNavTitle(
            formatMessage({
                id: 'navHeader.myAccountText',
                defaultMessage: 'My Account'
            })
        );
    }, [setView]);
    const showSignIn = useCallback(() => {
        setView('SIGN_IN');
        setNavTitle(
            formatMessage({
                id: 'navHeader.signInText',
                defaultMessage: 'Sign In'
            })
        );
    }, [setView]);

    return {
        handleBack,
        handleClose,
        hasModal,
        isOpen,
        isTopLevel,
        parentMenuItemId,
        setParentMenuItemId,
        navTitle,
        setNavTitle,
        setBackMenuItem,
        showCreateAccount,
        showForgotPassword,
        showMainMenu,
        showMyAccount,
        showSignIn,
        view
    };
};