ProductMenuShortcuts.tsx50 lines · main

1	import { useRouter } from 'next/router'
2	import { useCallback } from 'react'
3
4	import type { ProductMenuGroup, ProductMenuGroupItem } from './ProductMenu.types'
5	import { useShortcut } from '@/state/shortcuts/useShortcut'
6
7	interface ProductMenuShortcutsProps {
8	menu: ProductMenuGroup[]
9	}
10
11	type ProductMenuShortcutItem = ProductMenuGroupItem & {
12	shortcutId: NonNullable<ProductMenuGroupItem['shortcutId']>
13	}
14
15	const getShortcutItems = (items: ProductMenuGroupItem[]): ProductMenuShortcutItem[] => {
16	return items.flatMap((item) => {
17	const childItems = item.childItems ? getShortcutItems(item.childItems) : []
18
19	if (!item.shortcutId || !item.url || item.disabled || item.isExternal) {
20	return childItems
21	}
22
23	return [item as ProductMenuShortcutItem, ...childItems]
24	})
25	}
26
27	const ProductMenuShortcut = ({ item }: { item: ProductMenuShortcutItem }) => {
28	const router = useRouter()
29	const { shortcutId, url } = item
30
31	const navigate = useCallback(() => {
32	router.push(url)
33	}, [router, url])
34
35	useShortcut(shortcutId, navigate)
36
37	return null
38	}
39
40	export const ProductMenuShortcuts = ({ menu }: ProductMenuShortcutsProps) => {
41	const shortcutItems = menu.flatMap((group) => getShortcutItems(group.items))
42
43	return (
44	<>
45	{shortcutItems.map((item) => (
46	<ProductMenuShortcut key={`${item.shortcutId}-${item.url}`} item={item} />
47	))}
48	</>
49	)
50	}