@ubertheme/mega-menu/src/components/Offcanvas/offCanvas.js

UB Mega Menu Module for Magento PWA Studio

import React from 'react';
import { func, number, shape, string } from 'prop-types';
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import defaultClasses from './offCanvas.module.css';
import DEFAULT_OPERATIONS from '../../queries/getOffCanvasItems.graphql';
import { useMegaMenu } from '../../talons/MegaMenu/useMegaMenu';
import ItemLeaf from './itemLeaf';
import ItemBranch from './itemBranch';
import { Skeleton } from '@ubertheme/base';

const OffCanvas = props => {
    const {
        menuKey,
        onNavigate,
        parentMenuItemId,
        setParentMenuItemId,
        setBackMenuItem,
        setNavTitle
    } = props;

    const { getMenuOffCanvasItemListQuery } = DEFAULT_OPERATIONS;

    //Load menu items data via graphql
    const talonProps = useMegaMenu({
        query: getMenuOffCanvasItemListQuery,
        menuKey,
        parentMenuItemId,
        setNavTitle,
        setBackMenuItem
    });
    const { menuItems, error, loading } = talonProps;

    const classes = mergeClasses(defaultClasses, props.classes);

    let child;
    if (error) {
        child = (
            <div className={classes['fetch_error']}>
                Menu's Data Fetch Error: <pre>{error.message}</pre>
            </div>
        );
    } else {
        if (!menuItems) {
            if (loading) {
                child = (
                    <ul>
                        {[...new Array(5)].map((el, index) => (
                            <Skeleton
                                key={`skeleton-${index}`}
                                id={index}
                                classes={{
                                    root: 'itemMobile'
                                }}
                                parentComponent="OffCanvas"
                            />
                        ))}
                    </ul>
                );
            }
        } else if (menuItems.length === 0) {
            child = (
                <div className={classes.noResults}>No menu items found.</div>
            );
        } else {
            child = (
                <ul>
                    {Array.from(menuItems, menuItem => {
                        const hasChild =
                            menuItem.childs && menuItem.childs.length
                                ? true
                                : false;
                        return hasChild ? (
                            <ItemBranch
                                key={menuItem.id}
                                item={menuItem}
                                setNavTitle={setNavTitle}
                                setParentMenuItemId={setParentMenuItemId}
                            />
                        ) : (
                            <ItemLeaf
                                key={menuItem.id}
                                item={menuItem}
                                onNavigate={onNavigate}
                            />
                        );
                    })}
                </ul>
            );
        }
    }

    return <div className={classes.root}>{child}</div>;
};

export default OffCanvas;

OffCanvas.propTypes = {
    classes: shape({
        root: string
    }),
    menuKey: string.isRequired,
    parentMenuItemId: number.isRequired,
    setParentMenuItemId: func.isRequired,
    setBackMenuItem: func.isRequired,
    setNavTitle: func.isRequired,
    onNavigate: func.isRequired
};