NavMenu

navmenu.tsx

import React from "react";
enum MenuTypes { Category, MenuItem, Divider }

interface MenuItem {
	type: MenuTypes;
	title?: string;
	route?: string;
	image?: SvgIcon;
	items?: Array<number>;
}

interface NavItem {
	type: MenuTypes;
	title: string;
	index: number;
	route?: string;
}

type MenuEntries = Array<NavItem>;
type SetStateFunc = (state: AppDrawerState) => void;
type IteratorType = ( children: MenuEntries, menu: MenuItem, index: number ) => MenuEntries;

export default
class StackMenu extends React.Component {
	state: AppDrawerState = {
		current: [0]
	};

	private entries: Array<MenuItem> = [
		{
			type: MenuTypes.Category,
			title: "Navigation",
			items: [ 2, 3, 1, 4 ]
		},
		{
			type: MenuTypes.Divider
		},
		{
			type: MenuTypes.MenuItem,
			title: "Welcome to Firehouse",
			route: "/"
		},
		{
			type: MenuTypes.MenuItem,
			title: "Second Item",
			route: "second"
		},
		{
			type: MenuTypes.Category,
			title: "Submenu",
			items: [ ]
		}
	];

	private get children(): MenuEntries {
		const {entries, state: { current = [ 0 ] }, entries: { [current[ current.length - 1 ]]: menu }} = this;

		const iterator: IteratorType = ( children: MenuEntries, menu: MenuItem, index: number ) => {
			if (index === 0 && len(current) > 1 && (menu.type === MenuTypes.Category)) {
				const { [entries.length - 2]: parent } = entries;
				const prevIndex: number = current[current.length - 2];
				children.push({ index: prevIndex, title: parent.title, type: MenuTypes.MenuItem, route: parent.route });
			}

			children.push({ index, title: menu.title || '', type: menu.type || MenuTypes.MenuItem, route: menu.route });
			return children;
		};

		const items: Array<MenuItem> = [
			{ index: 0, title: entries[current[current.length - 1]].title, type: MenuTypes.MenuItem, items: [] }
		];

		if (menu.items !== undefined) {
			return menu.items.reduce( iterator, []);
		}
		else {
			console.log(entries[current[current.length - 1]]);
			return items.reduce( iterator, []);
		}
	}

	render(props: AppDrawerProps, { current }: AppDrawerState) {
		const callback: SetStateFunc = this.setState.bind(this);
		
		return (<>
				<ul>{
					this.children.map((menu: NavItem, index: number) => <li>Menu entry</li>)
				}</ul>
			<hr />
		</>);
	}
}