diff --git a/shell/footer/LinkGridItem.tsx b/shell/footer/HyperlinkItem.tsx similarity index 92% rename from shell/footer/LinkGridItem.tsx rename to shell/footer/HyperlinkItem.tsx index 8d940469..ab0ca605 100644 --- a/shell/footer/LinkGridItem.tsx +++ b/shell/footer/HyperlinkItem.tsx @@ -12,11 +12,11 @@ import { isUrlMenuItem } from '../menus/data/utils'; -interface NavLinksItemProps { +interface HyperlinkItemProps { item: ChildMenuItem, } -export default function LinkGridItem({ item }: NavLinksItemProps) { +export default function HyperlinkItem({ item }: HyperlinkItemProps) { const intl = useIntl(); if (isReactNodeMenuItem(item)) { diff --git a/shell/footer/LeftLinks.tsx b/shell/footer/LeftLinks.tsx index 07d175f7..6db89ad4 100644 --- a/shell/footer/LeftLinks.tsx +++ b/shell/footer/LeftLinks.tsx @@ -1,7 +1,7 @@ import { useContext } from 'react'; import FooterContext from './FooterContext'; -import LinkRowItem from './LinkRowItem'; +import HyperlinkItem from './HyperlinkItem'; export default function LeftLinks() { const { leftLinks } = useContext(FooterContext); @@ -11,7 +11,7 @@ export default function LeftLinks() { {leftLinks.map((item, index) => ( // TODO: Do something better than using the array index here. // eslint-disable-next-line react/no-array-index-key - + ))} ); diff --git a/shell/footer/LinkGrid.tsx b/shell/footer/LinkGrid.tsx index 7514853e..12d38719 100644 --- a/shell/footer/LinkGrid.tsx +++ b/shell/footer/LinkGrid.tsx @@ -1,7 +1,7 @@ // TODO: Do something better than using the array index here. /* eslint-disable react/no-array-index-key */ import { LabeledMenu } from '../../types'; -import LinkGridItem from './LinkGridItem'; +import HyperlinkItem from './HyperlinkItem'; interface LinkGridProps { items: LabeledMenu[], @@ -13,7 +13,7 @@ export default function LinkGrid({ items }: LinkGridProps) {
{menu.label}
{menu.links.map((item, index) => ( - + ))}
))} diff --git a/shell/footer/LinkRowItem.tsx b/shell/footer/LinkRowItem.tsx deleted file mode 100644 index c495cae7..00000000 --- a/shell/footer/LinkRowItem.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Hyperlink } from '@openedx/paragon'; -import { useIntl } from 'react-intl'; - -import { getAppUrl } from '../../runtime/routing'; -import { - ChildMenuItem -} from '../../types'; -import { - getItemLabel, - isAppMenuItem, - isReactNodeMenuItem, - isUrlMenuItem -} from '../menus/data/utils'; - -interface LinkRowItemProps { - item: ChildMenuItem, -} - -export default function LinkRowItem({ item }: LinkRowItemProps) { - const intl = useIntl(); - - if (isReactNodeMenuItem(item)) { - return item; - } - if (isAppMenuItem(item)) { - const url = getAppUrl(item.appId); - // If the app in question is not loaded, then the url may be null. If this is the case, - // we just don't bother to try to show the link. This helps us keep configuration logic - // simpler. - if (url !== null) { - const label = getItemLabel(item, intl); - return ( - - {label} - - ); - } - return null; - } - if (isUrlMenuItem(item)) { - const label = getItemLabel(item, intl); - return ( - - {label} - - ); - } - // If the item is something we haven't accounted for above, we don't know - // how to display it here. Just return null. - return null; -} diff --git a/shell/footer/RevealLinks.tsx b/shell/footer/RevealLinks.tsx index 8767a492..51db95fe 100644 --- a/shell/footer/RevealLinks.tsx +++ b/shell/footer/RevealLinks.tsx @@ -3,7 +3,7 @@ import { ExpandLess, ExpandMore } from '@openedx/paragon/icons'; import { useContext } from 'react'; import FooterContext from './FooterContext'; -import LinkRowItem from './LinkRowItem'; +import HyperlinkItem from './HyperlinkItem'; export default function RevealLinks() { const { revealMenu } = useContext(FooterContext); @@ -38,7 +38,7 @@ export default function RevealLinks() { {links.map((item, index) => ( // TODO: Do something better than using the array index here. // eslint-disable-next-line react/no-array-index-key - + ))} diff --git a/shell/footer/RightLinks.tsx b/shell/footer/RightLinks.tsx index 9e379740..d5a0fbf0 100644 --- a/shell/footer/RightLinks.tsx +++ b/shell/footer/RightLinks.tsx @@ -1,7 +1,7 @@ import { useContext } from 'react'; import FooterContext from './FooterContext'; -import LinkRowItem from './LinkRowItem'; +import HyperlinkItem from './HyperlinkItem'; export default function RightLinks() { const { rightLinks } = useContext(FooterContext); @@ -11,7 +11,7 @@ export default function RightLinks() { {rightLinks.map((item, index) => ( // TODO: Do something better than using the array index here. // eslint-disable-next-line react/no-array-index-key - + ))} ); diff --git a/shell/header/anonymous-menu/AnonymousMenu.tsx b/shell/header/anonymous-menu/AnonymousMenu.tsx index 5728faac..13b87b33 100644 --- a/shell/header/anonymous-menu/AnonymousMenu.tsx +++ b/shell/header/anonymous-menu/AnonymousMenu.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { useContext } from 'react'; import HeaderContext from '../HeaderContext'; -import NavLinksItem from '../nav-links/NavLinksItem'; +import NavLinkItem from '../nav-links/NavLinkItem'; interface AnonymousMenuProps { className?: string, @@ -15,7 +15,7 @@ export default function AnonymousMenu({ className }: AnonymousMenuProps) { {anonymousLinks.map((item, index) => ( // TODO: Do something better than using the array index here. // eslint-disable-next-line react/no-array-index-key - + ))} ); diff --git a/shell/header/authenticated-menu/AuthenticatedMenu.tsx b/shell/header/authenticated-menu/AuthenticatedMenu.tsx index d143bb68..9a72e647 100644 --- a/shell/header/authenticated-menu/AuthenticatedMenu.tsx +++ b/shell/header/authenticated-menu/AuthenticatedMenu.tsx @@ -7,7 +7,7 @@ import { } from '../../../runtime'; import HeaderContext from '../HeaderContext'; -import AuthenticatedMenuItem from './AuthenticatedMenuItem'; +import DropdownItem from '../nav-links/DropdownItem'; interface AuthenticatedMenuProps { className?: string, @@ -30,7 +30,7 @@ export default function AuthenticatedMenu({ className }: AuthenticatedMenuProps) {authenticatedLinks.map((item, index) => ( // TODO: Do something better than using the array index here. // eslint-disable-next-line react/no-array-index-key - + ))} ); diff --git a/shell/header/authenticated-menu/AuthenticatedMenuItem.tsx b/shell/header/nav-links/DropdownItem.tsx similarity index 73% rename from shell/header/authenticated-menu/AuthenticatedMenuItem.tsx rename to shell/header/nav-links/DropdownItem.tsx index f8d798cf..66f9ae1c 100644 --- a/shell/header/authenticated-menu/AuthenticatedMenuItem.tsx +++ b/shell/header/nav-links/DropdownItem.tsx @@ -1,11 +1,9 @@ -import { Dropdown } from '@openedx/paragon'; +import { Dropdown, NavDropdown } from '@openedx/paragon'; import { useIntl } from 'react-intl'; - import { getAppUrl } from '../../../runtime/routing'; import { - MenuItem + ChildMenuItem } from '../../../types'; - import { getItemLabel, isAppMenuItem, @@ -13,20 +11,25 @@ import { isUrlMenuItem } from '../../menus/data/utils'; -interface AuthenticatedMenuItemProps { - item: MenuItem, +interface DropdownItemProps { + item: ChildMenuItem, + as?: typeof Dropdown.Item | typeof NavDropdown.Item, } -export default function AuthenticatedMenuItem({ item }: AuthenticatedMenuItemProps) { +export default function DropdownItem({ item, as = Dropdown.Item }: DropdownItemProps) { const intl = useIntl(); + const Component = as; + // If the item is falsy for whatever reason, just return null. if (!item) { return null; } + if (isReactNodeMenuItem(item)) { return item; } + if (isAppMenuItem(item)) { const url = getAppUrl(item.appId); // If the app in question is not loaded, then the url may be null. If this is the case, @@ -35,9 +38,9 @@ export default function AuthenticatedMenuItem({ item }: AuthenticatedMenuItemPro if (url !== null) { const label = getItemLabel(item, intl); return ( - + {label} - + ); } return null; @@ -45,11 +48,12 @@ export default function AuthenticatedMenuItem({ item }: AuthenticatedMenuItemPro if (isUrlMenuItem(item)) { const label = getItemLabel(item, intl); return ( - + {label} - + ); } + // If the item is something we haven't accounted for above, we don't know // how to display it here. Just return null. return null; diff --git a/shell/header/nav-links/NavLinkDropdown.tsx b/shell/header/nav-links/NavLinkDropdown.tsx index c1c2f6a4..d4083591 100644 --- a/shell/header/nav-links/NavLinkDropdown.tsx +++ b/shell/header/nav-links/NavLinkDropdown.tsx @@ -6,7 +6,7 @@ import { import { getItemLabel } from '../../menus/data/utils'; -import NavLinkDropdownItem from './NavLinkDropdownItem'; +import DropdownItem from './DropdownItem'; interface NavLinkDropdownProps { item: DropdownMenuItem, @@ -20,7 +20,7 @@ export default function NavLinkDropdown({ item }: NavLinkDropdownProps) { {item.items.map((subItem, index) => ( // TODO: Do something better than using the array index here. // eslint-disable-next-line react/no-array-index-key - + ))} ); diff --git a/shell/header/nav-links/NavLinkDropdownItem.tsx b/shell/header/nav-links/NavLinkDropdownItem.tsx deleted file mode 100644 index 4b74d88d..00000000 --- a/shell/header/nav-links/NavLinkDropdownItem.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { NavDropdown } from '@openedx/paragon'; -import { useIntl } from 'react-intl'; -import { getAppUrl } from '../../../runtime/routing'; -import { - ChildMenuItem -} from '../../../types'; -import { - getItemLabel, - isAppMenuItem, - isReactNodeMenuItem, - isUrlMenuItem -} from '../../menus/data/utils'; - -interface NavLinkDropdownItemProps { - item: ChildMenuItem, -} - -export default function NavLinkDropdownItem({ item }: NavLinkDropdownItemProps) { - const intl = useIntl(); - - if (isReactNodeMenuItem(item)) { - return item; - } - - if (isAppMenuItem(item)) { - const url = getAppUrl(item.appId); - // If the app in question is not loaded, then the url may be null. If this is the case, - // we just don't bother to try to show the link. This helps us keep configuration logic - // simpler. - if (url !== null) { - const label = getItemLabel(item, intl); - return ( - - {label} - - ); - } - return null; - } - if (isUrlMenuItem(item)) { - const label = getItemLabel(item, intl); - return ( - - {label} - - ); - } - - // If the item is something we haven't accounted for above, we don't know - // how to display it here. Just return null. - return null; -} diff --git a/shell/header/nav-links/NavLinksItem.tsx b/shell/header/nav-links/NavLinkItem.tsx similarity index 93% rename from shell/header/nav-links/NavLinksItem.tsx rename to shell/header/nav-links/NavLinkItem.tsx index 414afee5..8999995f 100644 --- a/shell/header/nav-links/NavLinksItem.tsx +++ b/shell/header/nav-links/NavLinkItem.tsx @@ -14,11 +14,11 @@ import { } from '../../menus/data/utils'; import NavLinkDropdown from './NavLinkDropdown'; -interface NavLinksItemProps { +interface NavLinkItemProps { item: MenuItem, } -export default function NavLinksItem({ item }: NavLinksItemProps) { +export default function NavLinkItem({ item }: NavLinkItemProps) { const intl = useIntl(); // If the item is falsy for whatever reason, just return null. diff --git a/shell/header/nav-links/NavLinks.tsx b/shell/header/nav-links/NavLinks.tsx index 20b878a5..943d71e2 100644 --- a/shell/header/nav-links/NavLinks.tsx +++ b/shell/header/nav-links/NavLinks.tsx @@ -2,7 +2,7 @@ import { Nav } from '@openedx/paragon'; import { MenuItem } from '../../../types'; -import NavLinksItem from './NavLinksItem'; +import NavLinkItem from './NavLinkItem'; interface NavLinksProps { items: MenuItem[], @@ -15,7 +15,7 @@ export default function NavLinks({ items, className }: NavLinksProps) { {items.map((item, index) => ( // TODO: Do something better than using the array index here. // eslint-disable-next-line react/no-array-index-key - + ))} );