scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Langswitcher as parallel instead of Header. Using promise.all and added some Suspenses

Browse Source
This commit is contained in:
Linus Flood
2024-09-11 19:59:25 +02:00
parent 12178279d3
commit 33ffd781bb
15 changed files with 144 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/[lang]/(live)/@bookingwidget/page.tsx
View File

@@ -1,7 +1,9 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import BookingWidget from "@/components/BookingWidget" import BookingWidget from "@/components/BookingWidget"
import { getLang } from "@/i18n/serverContext" import LoadingSpinner from "@/components/LoadingSpinner"
export default async function BookingWidgetPage() { export default async function BookingWidgetPage() {
// Get the booking widget show/hide status based on page specific settings // Get the booking widget show/hide status based on page specific settings
@@ -9,10 +11,10 @@ export default async function BookingWidgetPage() {
await serverClient().contentstack.bookingwidget.getToggle() await serverClient().contentstack.bookingwidget.getToggle()
return ( return (
<> <Suspense fallback={<LoadingSpinner />}>
{bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : ( {bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : (
<BookingWidget /> <BookingWidget />
)} )}
</> </Suspense>
) )
} }

1
app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx Normal file
View File

@@ -0,0 +1 @@
export { default } from "../page"

1
app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx Normal file
View File

@@ -0,0 +1 @@
export { default } from "../../page"

1
app/[lang]/(live)/@languageSwitcher/default.tsx Normal file
View File

@@ -0,0 +1 @@
export { default } from "./page"

1
app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx Normal file
View File

@@ -0,0 +1 @@
export { default } from "../../page"

21
app/[lang]/(live)/@languageSwitcher/page.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function HeaderPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
const languages = await serverClient().contentstack.languageSwitcher.get()
if (!languages) {
return null
}
return (
<Suspense>
<LanguageSwitcher type="desktopHeader" urls={languages.urls} />
</Suspense>
)
}

4
app/[lang]/(live)/layout.tsx
View File

@@ -21,9 +21,11 @@ import type { LangParams, LayoutArgs } from "@/types/params"
export default async function RootLayout({ export default async function RootLayout({
children, children,
params, params,
languageSwitcher,
bookingwidget, bookingwidget,
}: React.PropsWithChildren< }: React.PropsWithChildren<
LayoutArgs<LangParams> & { LayoutArgs<LangParams> & {
languageSwitcher: React.ReactNode
bookingwidget: React.ReactNode bookingwidget: React.ReactNode
} }
>) { >) {
@@ -52,7 +54,7 @@ export default async function RootLayout({
<body> <body>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider> <TrpcProvider>
<Header /> <Header languageSwitcher={languageSwitcher} />
{bookingwidget} {bookingwidget}
{children} {children}
<ToastHandler /> <ToastHandler />

0
app/[lang]/(live)/(public)/loading.tsx → app/[lang]/(live)/loading.tsx
View File

8
components/BookingWidget/index.tsx
View File

@@ -1,11 +1,17 @@
import { Suspense } from "react"
import Form from "@/components/Forms/BookingWidget" import Form from "@/components/Forms/BookingWidget"
import LoadingSpinner from "../LoadingSpinner"
import styles from "./bookingWidget.module.css" import styles from "./bookingWidget.module.css"
export default async function BookingWidget() { export default async function BookingWidget() {
return ( return (
<section className={styles.container}> <section className={styles.container}>
<Form /> <Suspense fallback={<LoadingSpinner />}>
<Form />
</Suspense>
</section> </section>
) )
} }

11
components/Header/MainMenu/index.tsx
View File

@@ -23,13 +23,14 @@ export default async function MainMenu({
menuItems, menuItems,
topLink, topLink,
}: MainMenuProps) { }: MainMenuProps) {
const intl = await getIntl()
const lang = getLang() const lang = getLang()
const myPagesNavigation =
await serverClient().contentstack.myPages.navigation.get()
const user = await serverClient().user.name() const [intl, myPagesNavigation, user, membership] = await Promise.all([
const membership = await serverClient().user.safeMembershipLevel() getIntl(),
serverClient().contentstack.myPages.navigation.get(),
serverClient().user.name(),
serverClient().user.safeMembershipLevel(),
])
return ( return (
<div className={styles.mainMenu}> <div className={styles.mainMenu}>

9
components/Header/TopMenu/index.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import { GiftIcon, SearchIcon } from "@/components/Icons" import { GiftIcon, SearchIcon } from "@/components/Icons"
import LanguageSwitcher from "@/components/LanguageSwitcher" import LanguageSwitcher from "@/components/LanguageSwitcher"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
@@ -8,7 +10,10 @@ import styles from "./topMenu.module.css"
import type { TopMenuProps } from "@/types/components/header/topMenu" import type { TopMenuProps } from "@/types/components/header/topMenu"
export default async function TopMenu({ languageUrls, topLink }: TopMenuProps) { export default async function TopMenu({
languageSwitcher,
topLink,
}: TopMenuProps) {
const intl = await getIntl() const intl = await getIntl()
return ( return (
@@ -21,7 +26,7 @@ export default async function TopMenu({ languageUrls, topLink }: TopMenuProps) {
</HeaderLink> </HeaderLink>
) : null} ) : null}
<div className={styles.options}> <div className={styles.options}>
<LanguageSwitcher type="desktopHeader" urls={languageUrls} /> <Suspense>{languageSwitcher}</Suspense>
<HeaderLink href="#"> <HeaderLink href="#">
<SearchIcon width={20} height={20} color="burgundy" /> <SearchIcon width={20} height={20} color="burgundy" />
{intl.formatMessage({ id: "Find booking" })} {intl.formatMessage({ id: "Find booking" })}

17
components/Header/index.tsx
View File

@@ -8,9 +8,15 @@ import TopMenu from "./TopMenu"
import styles from "./header.module.css" import styles from "./header.module.css"
export default async function Header() { export interface HeaderProps {
const languages = await serverClient().contentstack.languageSwitcher.get() languageSwitcher: React.ReactNode
const headerData = await serverClient().contentstack.base.header() }
export default async function Header({ languageSwitcher }: HeaderProps) {
const [languages, headerData] = await Promise.all([
serverClient().contentstack.languageSwitcher.get(),
serverClient().contentstack.base.header(),
])
if (!languages || !headerData) { if (!languages || !headerData) {
return null return null
@@ -19,7 +25,10 @@ export default async function Header() {
return ( return (
<header className={styles.header}> <header className={styles.header}>
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner />}>
<TopMenu languageUrls={languages.urls} topLink={headerData.topLink} /> <TopMenu
languageSwitcher={languageSwitcher}
topLink={headerData.topLink}
/>
<MainMenu <MainMenu
languageUrls={languages.urls} languageUrls={languages.urls}
menuItems={headerData.menuItems} menuItems={headerData.menuItems}

68
components/MyPages/Breadcrumbs/index.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import { ChevronRightIcon, HouseIcon } from "@/components/Icons" import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
@@ -16,44 +18,46 @@ export default async function Breadcrumbs() {
return ( return (
<nav className={styles.breadcrumbs}> <nav className={styles.breadcrumbs}>
<ul className={styles.list}> <ul className={styles.list}>
{homeBreadcrumb ? ( <Suspense>
<li className={styles.listItem}> {homeBreadcrumb ? (
<Link <li className={styles.listItem}>
className={styles.homeLink} <Link
color="peach80" className={styles.homeLink}
href={homeBreadcrumb.href!} color="peach80"
variant="breadcrumb" href={homeBreadcrumb.href!}
> variant="breadcrumb"
<HouseIcon color="peach80" /> >
</Link> <HouseIcon color="peach80" />
<ChevronRightIcon aria-hidden="true" color="peach80" /> </Link>
</li> <ChevronRightIcon aria-hidden="true" color="peach80" />
) : null} </li>
) : null}
{breadcrumbs.map((breadcrumb) => {
if (breadcrumb.href) {
return (
<li key={breadcrumb.uid} className={styles.listItem}>
<Link
color="peach80"
href={breadcrumb.href}
variant="breadcrumb"
>
{breadcrumb.title}
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li>
)
}
{breadcrumbs.map((breadcrumb) => {
if (breadcrumb.href) {
return ( return (
<li key={breadcrumb.uid} className={styles.listItem}> <li key={breadcrumb.uid} className={styles.listItem}>
<Link <Footnote color="burgundy" textTransform="bold">
color="peach80"
href={breadcrumb.href}
variant="breadcrumb"
>
{breadcrumb.title} {breadcrumb.title}
</Link> </Footnote>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li> </li>
) )
} })}
</Suspense>
return (
<li key={breadcrumb.uid} className={styles.listItem}>
<Footnote color="burgundy" textTransform="bold">
{breadcrumb.title}
</Footnote>
</li>
)
})}
</ul> </ul>
</nav> </nav>
) )

79
components/MyPages/Sidebar/index.tsx
View File

@@ -1,4 +1,4 @@
import { Fragment } from "react" import { Fragment, Suspense } from "react"
import { logout } from "@/constants/routes/handleAuth" import { logout } from "@/constants/routes/handleAuth"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
@@ -14,46 +14,49 @@ import styles from "./sidebar.module.css"
export default async function SidebarMyPages() { export default async function SidebarMyPages() {
const navigation = await serverClient().contentstack.myPages.navigation.get() const navigation = await serverClient().contentstack.myPages.navigation.get()
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
if (!navigation) {
return null
}
return ( return (
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<nav className={styles.nav}> <nav className={styles.nav}>
<Subtitle type="two">{navigation.title}</Subtitle> <Subtitle type="two">{navigation?.title}</Subtitle>
{navigation.menuItems.map((menuItem, idx) => ( <Suspense>
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}> {navigation?.menuItems.map((menuItem, idx) => (
<Divider color="beige" /> <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<ul className={styles.list}> <Divider color="beige" />
{menuItem.links.map((link) => ( <ul className={styles.list}>
<li key={link.uid}> {menuItem.links.map((link) => (
<Link <li key={link.uid}>
color="burgundy" <Link
href={link.originalUrl || link.url} color="burgundy"
partialMatch href={link.originalUrl || link.url}
size={menuItem.display_sign_out_link ? "small" : "regular"} partialMatch
variant="sidebar" prefetch={true}
> size={
{link.linkText} menuItem.display_sign_out_link ? "small" : "regular"
</Link> }
</li> variant="sidebar"
))} >
{menuItem.display_sign_out_link ? ( {link.linkText}
<li> </Link>
<Link </li>
color="burgundy" ))}
href={logout[getLang()]} {menuItem.display_sign_out_link ? (
prefetch={false} <li>
size="small" <Link
variant="sidebar" color="burgundy"
> href={logout[getLang()]}
{formatMessage({ id: "Log out" })} prefetch={false}
</Link> size="small"
</li> variant="sidebar"
) : null} >
</ul> {formatMessage({ id: "Log out" })}
</Fragment> </Link>
))} </li>
) : null}
</ul>
</Fragment>
))}
</Suspense>
</nav> </nav>
</aside> </aside>
) )

2
types/components/header/topMenu.ts
View File

@@ -2,6 +2,6 @@ import type { Header } from "@/types/header"
import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher" import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
export interface TopMenuProps { export interface TopMenuProps {
languageUrls: LanguageSwitcherData languageSwitcher: React.ReactNode
topLink: Header["topLink"] topLink: Header["topLink"]
} }