From 12178279d339cd1b81f377af46054cb73650541d Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Wed, 11 Sep 2024 08:11:47 +0200 Subject: [PATCH 1/5] SW-386 Using header component in layout instead of parallel route. Added suspense --- app/[lang]/(live)/@header/[...paths]/page.tsx | 1 - .../(live)/@header/[contentType]/[uid]/page.tsx | 1 - app/[lang]/(live)/@header/error.tsx | 5 ----- .../(live)/@header/my-pages/[...path]/page.tsx | 1 - app/[lang]/(live)/@header/page.tsx | 10 ---------- app/[lang]/(live)/layout.tsx | 5 ++--- components/Header/index.tsx | 17 +++++++++++------ 7 files changed, 13 insertions(+), 27 deletions(-) delete mode 100644 app/[lang]/(live)/@header/[...paths]/page.tsx delete mode 100644 app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx delete mode 100644 app/[lang]/(live)/@header/error.tsx delete mode 100644 app/[lang]/(live)/@header/my-pages/[...path]/page.tsx delete mode 100644 app/[lang]/(live)/@header/page.tsx diff --git a/app/[lang]/(live)/@header/[...paths]/page.tsx b/app/[lang]/(live)/@header/[...paths]/page.tsx deleted file mode 100644 index 03a82e5f5..000000000 --- a/app/[lang]/(live)/@header/[...paths]/page.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from "../page" diff --git a/app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx deleted file mode 100644 index 2ebaca014..000000000 --- a/app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from "../../page" diff --git a/app/[lang]/(live)/@header/error.tsx b/app/[lang]/(live)/@header/error.tsx deleted file mode 100644 index 2764280b4..000000000 --- a/app/[lang]/(live)/@header/error.tsx +++ /dev/null @@ -1,5 +0,0 @@ -"use client" - -export default function Error() { - return null -} diff --git a/app/[lang]/(live)/@header/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@header/my-pages/[...path]/page.tsx deleted file mode 100644 index 2ebaca014..000000000 --- a/app/[lang]/(live)/@header/my-pages/[...path]/page.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from "../../page" diff --git a/app/[lang]/(live)/@header/page.tsx b/app/[lang]/(live)/@header/page.tsx deleted file mode 100644 index adccd9484..000000000 --- a/app/[lang]/(live)/@header/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import Header from "@/components/Header" -import { setLang } from "@/i18n/serverContext" - -import { LangParams, PageArgs } from "@/types/params" - -export default async function HeaderPage({ params }: PageArgs) { - setLang(params.lang) - - return
-} diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx index 3ee99194c..15312b9b4 100644 --- a/app/[lang]/(live)/layout.tsx +++ b/app/[lang]/(live)/layout.tsx @@ -9,6 +9,7 @@ import TokenRefresher from "@/components/Auth/TokenRefresher" import AdobeSDKScript from "@/components/Current/AdobeSDKScript" import VwoScript from "@/components/Current/VwoScript" import Footer from "@/components/Footer" +import Header from "@/components/Header" import { ToastHandler } from "@/components/TempDesignSystem/Toasts" import { preloadUserTracking } from "@/components/TrackingSDK" import { getIntl } from "@/i18n" @@ -20,11 +21,9 @@ import type { LangParams, LayoutArgs } from "@/types/params" export default async function RootLayout({ children, params, - header, bookingwidget, }: React.PropsWithChildren< LayoutArgs & { - header: React.ReactNode bookingwidget: React.ReactNode } >) { @@ -53,7 +52,7 @@ export default async function RootLayout({ - {header} +
{bookingwidget} {children} diff --git a/components/Header/index.tsx b/components/Header/index.tsx index effc8aadb..6be9a911b 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,5 +1,8 @@ +import { Suspense } from "react" + import { serverClient } from "@/lib/trpc/server" +import LoadingSpinner from "../LoadingSpinner" import MainMenu from "./MainMenu" import TopMenu from "./TopMenu" @@ -15,12 +18,14 @@ export default async function Header() { return (
- - + }> + + +
) } From 33ffd781bb38e3a7c7e4b7a2bf3230e223200903 Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Wed, 11 Sep 2024 19:59:25 +0200 Subject: [PATCH 2/5] Langswitcher as parallel instead of Header. Using promise.all and added some Suspenses --- app/[lang]/(live)/@bookingwidget/page.tsx | 8 +- .../@languageSwitcher/[...paths]/page.tsx | 1 + .../[contentType]/[uid]/page.tsx | 1 + .../(live)/@languageSwitcher/default.tsx | 1 + .../my-pages/[...path]/page.tsx | 1 + app/[lang]/(live)/@languageSwitcher/page.tsx | 21 +++++ app/[lang]/(live)/layout.tsx | 4 +- app/[lang]/(live)/{(public) => }/loading.tsx | 0 components/BookingWidget/index.tsx | 8 +- components/Header/MainMenu/index.tsx | 11 +-- components/Header/TopMenu/index.tsx | 9 ++- components/Header/index.tsx | 17 +++- components/MyPages/Breadcrumbs/index.tsx | 68 ++++++++-------- components/MyPages/Sidebar/index.tsx | 79 ++++++++++--------- types/components/header/topMenu.ts | 2 +- 15 files changed, 144 insertions(+), 87 deletions(-) create mode 100644 app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx create mode 100644 app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx create mode 100644 app/[lang]/(live)/@languageSwitcher/default.tsx create mode 100644 app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx create mode 100644 app/[lang]/(live)/@languageSwitcher/page.tsx rename app/[lang]/(live)/{(public) => }/loading.tsx (100%) diff --git a/app/[lang]/(live)/@bookingwidget/page.tsx b/app/[lang]/(live)/@bookingwidget/page.tsx index 9b83da1b8..bb5f646b6 100644 --- a/app/[lang]/(live)/@bookingwidget/page.tsx +++ b/app/[lang]/(live)/@bookingwidget/page.tsx @@ -1,7 +1,9 @@ +import { Suspense } from "react" + import { serverClient } from "@/lib/trpc/server" import BookingWidget from "@/components/BookingWidget" -import { getLang } from "@/i18n/serverContext" +import LoadingSpinner from "@/components/LoadingSpinner" export default async function BookingWidgetPage() { // 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() return ( - <> + }> {bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : ( )} - + ) } diff --git a/app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx b/app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx new file mode 100644 index 000000000..03a82e5f5 --- /dev/null +++ b/app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx @@ -0,0 +1 @@ +export { default } from "../page" diff --git a/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx new file mode 100644 index 000000000..2ebaca014 --- /dev/null +++ b/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx @@ -0,0 +1 @@ +export { default } from "../../page" diff --git a/app/[lang]/(live)/@languageSwitcher/default.tsx b/app/[lang]/(live)/@languageSwitcher/default.tsx new file mode 100644 index 000000000..83ec2818e --- /dev/null +++ b/app/[lang]/(live)/@languageSwitcher/default.tsx @@ -0,0 +1 @@ +export { default } from "./page" diff --git a/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx new file mode 100644 index 000000000..2ebaca014 --- /dev/null +++ b/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx @@ -0,0 +1 @@ +export { default } from "../../page" diff --git a/app/[lang]/(live)/@languageSwitcher/page.tsx b/app/[lang]/(live)/@languageSwitcher/page.tsx new file mode 100644 index 000000000..95a426c48 --- /dev/null +++ b/app/[lang]/(live)/@languageSwitcher/page.tsx @@ -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) { + setLang(params.lang) + const languages = await serverClient().contentstack.languageSwitcher.get() + if (!languages) { + return null + } + return ( + + + + ) +} diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx index 15312b9b4..fdd881160 100644 --- a/app/[lang]/(live)/layout.tsx +++ b/app/[lang]/(live)/layout.tsx @@ -21,9 +21,11 @@ import type { LangParams, LayoutArgs } from "@/types/params" export default async function RootLayout({ children, params, + languageSwitcher, bookingwidget, }: React.PropsWithChildren< LayoutArgs & { + languageSwitcher: React.ReactNode bookingwidget: React.ReactNode } >) { @@ -52,7 +54,7 @@ export default async function RootLayout({ -
+
{bookingwidget} {children} diff --git a/app/[lang]/(live)/(public)/loading.tsx b/app/[lang]/(live)/loading.tsx similarity index 100% rename from app/[lang]/(live)/(public)/loading.tsx rename to app/[lang]/(live)/loading.tsx diff --git a/components/BookingWidget/index.tsx b/components/BookingWidget/index.tsx index d169f7dd3..91df73b73 100644 --- a/components/BookingWidget/index.tsx +++ b/components/BookingWidget/index.tsx @@ -1,11 +1,17 @@ +import { Suspense } from "react" + import Form from "@/components/Forms/BookingWidget" +import LoadingSpinner from "../LoadingSpinner" + import styles from "./bookingWidget.module.css" export default async function BookingWidget() { return (
-
+ }> + +
) } diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx index 23c49c532..00b407827 100644 --- a/components/Header/MainMenu/index.tsx +++ b/components/Header/MainMenu/index.tsx @@ -23,13 +23,14 @@ export default async function MainMenu({ menuItems, topLink, }: MainMenuProps) { - const intl = await getIntl() const lang = getLang() - const myPagesNavigation = - await serverClient().contentstack.myPages.navigation.get() - const user = await serverClient().user.name() - const membership = await serverClient().user.safeMembershipLevel() + const [intl, myPagesNavigation, user, membership] = await Promise.all([ + getIntl(), + serverClient().contentstack.myPages.navigation.get(), + serverClient().user.name(), + serverClient().user.safeMembershipLevel(), + ]) return (
diff --git a/components/Header/TopMenu/index.tsx b/components/Header/TopMenu/index.tsx index 69669861f..0c2d87c3d 100644 --- a/components/Header/TopMenu/index.tsx +++ b/components/Header/TopMenu/index.tsx @@ -1,3 +1,5 @@ +import { Suspense } from "react" + import { GiftIcon, SearchIcon } from "@/components/Icons" import LanguageSwitcher from "@/components/LanguageSwitcher" import { getIntl } from "@/i18n" @@ -8,7 +10,10 @@ import styles from "./topMenu.module.css" 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() return ( @@ -21,7 +26,7 @@ export default async function TopMenu({ languageUrls, topLink }: TopMenuProps) { ) : null}
- + {languageSwitcher} {intl.formatMessage({ id: "Find booking" })} diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 6be9a911b..32dfb1bf5 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -8,9 +8,15 @@ import TopMenu from "./TopMenu" import styles from "./header.module.css" -export default async function Header() { - const languages = await serverClient().contentstack.languageSwitcher.get() - const headerData = await serverClient().contentstack.base.header() +export interface HeaderProps { + languageSwitcher: React.ReactNode +} + +export default async function Header({ languageSwitcher }: HeaderProps) { + const [languages, headerData] = await Promise.all([ + serverClient().contentstack.languageSwitcher.get(), + serverClient().contentstack.base.header(), + ]) if (!languages || !headerData) { return null @@ -19,7 +25,10 @@ export default async function Header() { return (
}> - +
    - {homeBreadcrumb ? ( -
  • - - - -
    • - ) : null} + + {homeBreadcrumb ? ( +
  • + + + +
    • + ) : null} + + {breadcrumbs.map((breadcrumb) => { + if (breadcrumb.href) { + return ( +
  • + + {breadcrumb.title} + +
    • + ) + } - {breadcrumbs.map((breadcrumb) => { - if (breadcrumb.href) { return (
  • - + {breadcrumb.title} - -
    • ) - } - - return ( -
  • - - {breadcrumb.title} - -
    • - ) - })} + })} +
) diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx index efead6f34..65c4b22b7 100644 --- a/components/MyPages/Sidebar/index.tsx +++ b/components/MyPages/Sidebar/index.tsx @@ -1,4 +1,4 @@ -import { Fragment } from "react" +import { Fragment, Suspense } from "react" import { logout } from "@/constants/routes/handleAuth" import { serverClient } from "@/lib/trpc/server" @@ -14,46 +14,49 @@ import styles from "./sidebar.module.css" export default async function SidebarMyPages() { const navigation = await serverClient().contentstack.myPages.navigation.get() const { formatMessage } = await getIntl() - if (!navigation) { - return null - } + return ( ) diff --git a/types/components/header/topMenu.ts b/types/components/header/topMenu.ts index 0c2eb4243..5c4426b81 100644 --- a/types/components/header/topMenu.ts +++ b/types/components/header/topMenu.ts @@ -2,6 +2,6 @@ import type { Header } from "@/types/header" import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher" export interface TopMenuProps { - languageUrls: LanguageSwitcherData + languageSwitcher: React.ReactNode topLink: Header["topLink"] } From 6a1f86265e1c0b8fe9a1b406a4a13f2d40aa40ad Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Wed, 11 Sep 2024 20:13:35 +0200 Subject: [PATCH 3/5] Cleanup --- components/Header/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 32dfb1bf5..6add229cc 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -8,11 +8,11 @@ import TopMenu from "./TopMenu" import styles from "./header.module.css" -export interface HeaderProps { +export default async function Header({ + languageSwitcher, +}: { languageSwitcher: React.ReactNode -} - -export default async function Header({ languageSwitcher }: HeaderProps) { +}) { const [languages, headerData] = await Promise.all([ serverClient().contentstack.languageSwitcher.get(), serverClient().contentstack.base.header(), From 844d39b22c219a02d62d6c1e11833e748b12aaa6 Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Thu, 12 Sep 2024 19:40:52 +0200 Subject: [PATCH 4/5] Some pr fixes --- app/[lang]/(live)/@bookingwidget/page.tsx | 7 +-- app/[lang]/(live)/layout.tsx | 6 +- components/BookingWidget/index.tsx | 10 +--- components/Header/TopMenu/index.tsx | 2 +- components/MyPages/Breadcrumbs/index.tsx | 68 ++++++++++----------- components/MyPages/Sidebar/index.tsx | 72 +++++++++++------------ 6 files changed, 76 insertions(+), 89 deletions(-) diff --git a/app/[lang]/(live)/@bookingwidget/page.tsx b/app/[lang]/(live)/@bookingwidget/page.tsx index bb5f646b6..35d0dceca 100644 --- a/app/[lang]/(live)/@bookingwidget/page.tsx +++ b/app/[lang]/(live)/@bookingwidget/page.tsx @@ -1,9 +1,6 @@ -import { Suspense } from "react" - import { serverClient } from "@/lib/trpc/server" import BookingWidget from "@/components/BookingWidget" -import LoadingSpinner from "@/components/LoadingSpinner" export default async function BookingWidgetPage() { // Get the booking widget show/hide status based on page specific settings @@ -11,10 +8,10 @@ export default async function BookingWidgetPage() { await serverClient().contentstack.bookingwidget.getToggle() return ( - }> + <> {bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : ( )} - + ) } diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx index fdd881160..461ebe093 100644 --- a/app/[lang]/(live)/layout.tsx +++ b/app/[lang]/(live)/layout.tsx @@ -2,6 +2,7 @@ import "@/app/globals.css" import "@scandic-hotels/design-system/style.css" import Script from "next/script" +import { Suspense } from "react" import TrpcProvider from "@/lib/trpc/Provider" @@ -10,6 +11,7 @@ import AdobeSDKScript from "@/components/Current/AdobeSDKScript" import VwoScript from "@/components/Current/VwoScript" import Footer from "@/components/Footer" import Header from "@/components/Header" +import LoadingSpinner from "@/components/LoadingSpinner" import { ToastHandler } from "@/components/TempDesignSystem/Toasts" import { preloadUserTracking } from "@/components/TrackingSDK" import { getIntl } from "@/i18n" @@ -54,7 +56,9 @@ export default async function RootLayout({ -
+ }> +
+ {bookingwidget} {children} diff --git a/components/BookingWidget/index.tsx b/components/BookingWidget/index.tsx index 91df73b73..0a8c0dbd9 100644 --- a/components/BookingWidget/index.tsx +++ b/components/BookingWidget/index.tsx @@ -1,17 +1,11 @@ -import { Suspense } from "react" - import Form from "@/components/Forms/BookingWidget" -import LoadingSpinner from "../LoadingSpinner" - import styles from "./bookingWidget.module.css" -export default async function BookingWidget() { +export default function BookingWidget() { return (
- }> - - +
) } diff --git a/components/Header/TopMenu/index.tsx b/components/Header/TopMenu/index.tsx index 0c2d87c3d..3b7e5c63d 100644 --- a/components/Header/TopMenu/index.tsx +++ b/components/Header/TopMenu/index.tsx @@ -26,7 +26,7 @@ export default async function TopMenu({ ) : null}
- {languageSwitcher} + {languageSwitcher} {intl.formatMessage({ id: "Find booking" })} diff --git a/components/MyPages/Breadcrumbs/index.tsx b/components/MyPages/Breadcrumbs/index.tsx index e50ceb4b4..752f77d5f 100644 --- a/components/MyPages/Breadcrumbs/index.tsx +++ b/components/MyPages/Breadcrumbs/index.tsx @@ -1,5 +1,3 @@ -import { Suspense } from "react" - import { serverClient } from "@/lib/trpc/server" import { ChevronRightIcon, HouseIcon } from "@/components/Icons" @@ -18,46 +16,44 @@ export default async function Breadcrumbs() { return ( ) diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx index 65c4b22b7..d91782b83 100644 --- a/components/MyPages/Sidebar/index.tsx +++ b/components/MyPages/Sidebar/index.tsx @@ -19,44 +19,40 @@ export default async function SidebarMyPages() { ) From 639c93553f6f444c49c93b41ac2cfa2c7cd9bac9 Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Thu, 12 Sep 2024 19:44:18 +0200 Subject: [PATCH 5/5] Removed one suspense --- app/[lang]/(live)/@languageSwitcher/page.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/[lang]/(live)/@languageSwitcher/page.tsx b/app/[lang]/(live)/@languageSwitcher/page.tsx index 95a426c48..b2e8932d8 100644 --- a/app/[lang]/(live)/@languageSwitcher/page.tsx +++ b/app/[lang]/(live)/@languageSwitcher/page.tsx @@ -13,9 +13,5 @@ export default async function HeaderPage({ params }: PageArgs) { if (!languages) { return null } - return ( - - - - ) + return }