Files
web/app/[lang]/(live)/(protected)/my-pages/layout.tsx
2024-04-12 16:25:52 +02:00

71 lines
2.0 KiB
TypeScript

import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
import { breadcrumbs } from "./_constants"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import Header from "@/components/MyPages/Header"
import Sidebar from "@/components/MyPages/Sidebar"
import styles from "./layout.module.css"
import type { LangParams, LayoutArgs } from "@/types/params"
import { request } from "@/lib/graphql/request"
import {
GetNavigationMyPagesData,
NavigationItem,
MenuItem,
PageLink,
PageLinkEnum,
} from "@/types/requests/myPages/navigation"
import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
function getURL(node: PageLink) {
switch (node.__typename) {
case PageLinkEnum.ContentPage:
return node.web.url
case PageLinkEnum.AccountPage:
case PageLinkEnum.LoyaltyPage:
return node.url
}
}
function mapMenuItems(navigationItems: NavigationItem[]) {
return navigationItems.map(({ item }): MenuItem => {
const { node } = item.pageConnection.edges[0]
return {
uid: node.system.uid,
url: getURL(node),
linkText: item.link_text || node.title,
subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
}
})
}
export default async function MyPagesLayout({
children,
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
const response = await request<GetNavigationMyPagesData>(
GetNavigationMyPages,
{
locale: params.lang,
}
)
// navigation_my_pages is of type Single, hence the hard [0]
const navigation = response.data.all_navigation_my_pages.items[0]
const menuItems = mapMenuItems(navigation.items)
return (
<div
className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
>
<Header lang={params.lang} />
<Breadcrumbs breadcrumbs={breadcrumbs} lang={params.lang} />
<div className={styles.content}>
<Sidebar menuItems={menuItems} />
{children}
</div>
</div>
)
}