From e622be7c86509f5897efa11533e479ab136f8944 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Tue, 11 Jun 2024 16:47:18 +0200
Subject: [PATCH] fix: make header a parallel route

---
 .../[...uri]/@languageSwitcher/error.tsx      | 14 +++++++++++
 .../[...uri]/@languageSwitcher/page.tsx       | 13 ++++++++++
 app/[lang]/(live)/@header/[...uri]/layout.tsx | 21 ++++++++++++++++
 app/[lang]/(live)/@header/[...uri]/page.tsx   |  3 +++
 app/[lang]/(live)/@header/_constants.ts       | 10 ++++++++
 app/[lang]/(live)/@header/error.tsx           |  6 +++++
 app/[lang]/(live)/@header/page.tsx            | 15 +++++++++++
 .../@languageSwitcher/[...uri]/error.tsx      |  6 -----
 .../(live)/@languageSwitcher/default.tsx      |  3 ---
 app/[lang]/(live)/layout.tsx                  |  9 +++----
 .../Current/Header/LanguageSwitcher/index.tsx | 25 +++++++++++++++++++
 11 files changed, 110 insertions(+), 15 deletions(-)
 create mode 100644 app/[lang]/(live)/@header/[...uri]/@languageSwitcher/error.tsx
 create mode 100644 app/[lang]/(live)/@header/[...uri]/@languageSwitcher/page.tsx
 create mode 100644 app/[lang]/(live)/@header/[...uri]/layout.tsx
 create mode 100644 app/[lang]/(live)/@header/[...uri]/page.tsx
 create mode 100644 app/[lang]/(live)/@header/_constants.ts
 create mode 100644 app/[lang]/(live)/@header/error.tsx
 create mode 100644 app/[lang]/(live)/@header/page.tsx
 delete mode 100644 app/[lang]/(live)/@languageSwitcher/[...uri]/error.tsx
 delete mode 100644 app/[lang]/(live)/@languageSwitcher/default.tsx
 create mode 100644 components/Current/Header/LanguageSwitcher/index.tsx

diff --git a/app/[lang]/(live)/@header/[...uri]/@languageSwitcher/error.tsx b/app/[lang]/(live)/@header/[...uri]/@languageSwitcher/error.tsx
new file mode 100644
index 000000000..819105185
--- /dev/null
+++ b/app/[lang]/(live)/@header/[...uri]/@languageSwitcher/error.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { useParams } from "next/navigation"
+
+import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
+
+import { baseUrls } from "../../_constants"
+
+import { LangParams } from "@/types/params"
+
+export default function Error() {
+  const params = useParams<LangParams>()
+  return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
+}
diff --git a/app/[lang]/(live)/@header/[...uri]/@languageSwitcher/page.tsx b/app/[lang]/(live)/@header/[...uri]/@languageSwitcher/page.tsx
new file mode 100644
index 000000000..394e9efcf
--- /dev/null
+++ b/app/[lang]/(live)/@header/[...uri]/@languageSwitcher/page.tsx
@@ -0,0 +1,13 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function LanguageSwitcherRoute({
+  params,
+}: PageArgs<LangParams>) {
+  const urls = await serverClient().contentstack.config.languageSwitcher()
+
+  return <LanguageSwitcher urls={urls} lang={params.lang} />
+}
diff --git a/app/[lang]/(live)/@header/[...uri]/layout.tsx b/app/[lang]/(live)/@header/[...uri]/layout.tsx
new file mode 100644
index 000000000..3601c3e2f
--- /dev/null
+++ b/app/[lang]/(live)/@header/[...uri]/layout.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from "react"
+
+import Header from "@/components/Current/Header"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default function HeaderLayout({
+  params,
+  languageSwitcher,
+  children,
+}: PageArgs<LangParams> & {
+  languageSwitcher: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <>
+      <Header lang={params.lang} languageSwitcher={languageSwitcher} />
+      {children}
+    </>
+  )
+}
diff --git a/app/[lang]/(live)/@header/[...uri]/page.tsx b/app/[lang]/(live)/@header/[...uri]/page.tsx
new file mode 100644
index 000000000..c019f1170
--- /dev/null
+++ b/app/[lang]/(live)/@header/[...uri]/page.tsx
@@ -0,0 +1,3 @@
+export default function EmptyHeaderPage() {
+  return null
+}
diff --git a/app/[lang]/(live)/@header/_constants.ts b/app/[lang]/(live)/@header/_constants.ts
new file mode 100644
index 000000000..f16619073
--- /dev/null
+++ b/app/[lang]/(live)/@header/_constants.ts
@@ -0,0 +1,10 @@
+import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+
+export const baseUrls: LanguageSwitcherData = {
+  da: { url: "/da/" },
+  de: { url: "/de/" },
+  en: { url: "/en/" },
+  fi: { url: "/fi/" },
+  no: { url: "/no/" },
+  sv: { url: "/sv/" },
+}
diff --git a/app/[lang]/(live)/@header/error.tsx b/app/[lang]/(live)/@header/error.tsx
new file mode 100644
index 000000000..6000cbd89
--- /dev/null
+++ b/app/[lang]/(live)/@header/error.tsx
@@ -0,0 +1,6 @@
+"use client"
+
+export default function Error() {
+  // Don't return any header if error
+  return null
+}
diff --git a/app/[lang]/(live)/@header/page.tsx b/app/[lang]/(live)/@header/page.tsx
new file mode 100644
index 000000000..cbdfb1739
--- /dev/null
+++ b/app/[lang]/(live)/@header/page.tsx
@@ -0,0 +1,15 @@
+import Header from "@/components/Current/Header"
+import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
+
+import { baseUrls } from "./_constants"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export async function LanguageSwitcherRoute({ params }: PageArgs<LangParams>) {
+  return (
+    <Header
+      lang={params.lang}
+      languageSwitcher={<LanguageSwitcher urls={baseUrls} lang={params.lang} />}
+    />
+  )
+}
diff --git a/app/[lang]/(live)/@languageSwitcher/[...uri]/error.tsx b/app/[lang]/(live)/@languageSwitcher/[...uri]/error.tsx
deleted file mode 100644
index 1c8b26d65..000000000
--- a/app/[lang]/(live)/@languageSwitcher/[...uri]/error.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-"use client"
-
-export default function Error({ error }: any) {
-  // Don't return any content if error
-  return null
-}
diff --git a/app/[lang]/(live)/@languageSwitcher/default.tsx b/app/[lang]/(live)/@languageSwitcher/default.tsx
deleted file mode 100644
index e8020af9c..000000000
--- a/app/[lang]/(live)/@languageSwitcher/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default async function DefaultLanguageSwitcher() {
-  return null
-}
diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index d05e27668..6639132cf 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -24,10 +24,10 @@ export const metadata: Metadata = {
 export default async function RootLayout({
   children,
   params,
-  languageSwitcher,
+  header,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams> & {
-    languageSwitcher: React.ReactNode
+    header: React.ReactNode
   }
 >) {
   const { defaultLocale, locale, messages } = await getIntl()
@@ -55,10 +55,7 @@ export default async function RootLayout({
       <body>
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           <TrpcProvider lang={params.lang}>
-            <Header
-              lang={params.lang}
-              languageSwitcher={languageSwitcher}
-            />
+            {header}
             {children}
             <Footer lang={params.lang} />
           </TrpcProvider>
diff --git a/components/Current/Header/LanguageSwitcher/index.tsx b/components/Current/Header/LanguageSwitcher/index.tsx
new file mode 100644
index 000000000..2d78aa9f5
--- /dev/null
+++ b/components/Current/Header/LanguageSwitcher/index.tsx
@@ -0,0 +1,25 @@
+import Desktop from "./Desktop"
+import Mobile from "./Mobile"
+
+import styles from "./languageSwitcher.module.css"
+
+import { LangParams } from "@/types/params"
+import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+
+type LanguageSwitcherProps = LangParams & { urls: LanguageSwitcherData }
+
+export default function LanguageSwitcher({
+  urls,
+  lang,
+}: LanguageSwitcherProps) {
+  return (
+    <>
+      <section className={styles.desktop}>
+        <Desktop currentLanguage={lang} urls={urls} />
+      </section>
+      <section className={styles.mobile}>
+        <Mobile currentLanguage={lang} urls={urls} />
+      </section>
+    </>
+  )
+}