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

feat: add language switcher parallel route

Browse Source
This commit is contained in:
Christel Westerberg
2024-05-27 16:42:13 +02:00
parent dd930688fc
commit a83bdb21fe
11 changed files with 194 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.module.css Normal file
View File

@@ -0,0 +1,17 @@
.desktop {
display: none;
}
.mobile {
display: block;
}
@media (min-width: 950px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}

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

@@ -0,0 +1,50 @@
import { notFound } from "next/navigation"
import { Lang } from "@/constants/languages"
import { serverClient } from "@/lib/trpc/server"
import Desktop from "@/components/Current/Header/LanguageSwitcher/Desktop"
import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile"
import styles from "./page.module.css"
import {
ContentTypeParams,
LangParams,
PageArgs,
UIDParams,
} from "@/types/params"
import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
export default async function LanguageSwitcher({
params,
}: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
let urls: LanguageSwitcherData
let lang: Lang
switch (params.contentType) {
case "loyalty-page":
const data =
await serverClient().contentstack.loyaltyPage.languageSwitcher()
urls = data.urls
lang = data.lang
break
case "content-page":
// TODO: Implement this
return null
default:
const type: never = params.contentType
console.error(`Unsupported content type given: ${type}`)
notFound()
}
return (
<>
<section className={styles.desktop}>
<Desktop currentLanguage={params.lang} urls={urls} />
</section>
<section className={styles.mobile}>
<Mobile currentLanguage={params.lang} urls={urls} />
</section>
</>
)
}

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

@@ -0,0 +1,3 @@
export default async function LanguageSwitcher() {
return null
}

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

@@ -0,0 +1,17 @@
.desktop {
display: none;
}
.mobile {
display: block;
}
@media (min-width: 950px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}

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

@@ -0,0 +1,21 @@
import { serverClient } from "@/lib/trpc/server"
import Desktop from "@/components/Current/Header/LanguageSwitcher/Desktop"
import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile"
import styles from "./page.module.css"
export default async function LanguageSwitcher() {
const data = await serverClient().contentstack.accountPage.languageSwitcher()
return (
<>
<section className={styles.desktop}>
<Desktop currentLanguage={data.lang} urls={data.urls} />
</section>
<section className={styles.mobile}>
<Mobile currentLanguage={data.lang} urls={data.urls} />
</section>
</>
)
}

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

@@ -6,6 +6,7 @@ import Script from "next/script"
import TrpcProvider from "@/lib/trpc/Provider" import TrpcProvider from "@/lib/trpc/Provider"
import AdobeScript from "@/components/Current/AdobeScript" import AdobeScript from "@/components/Current/AdobeScript"
import Header from "@/components/Current/Header"
import VwoScript from "@/components/Current/VwoScript" import VwoScript from "@/components/Current/VwoScript"
import type { Metadata } from "next" import type { Metadata } from "next"
@@ -20,7 +21,12 @@ export const metadata: Metadata = {
export default async function RootLayout({ export default async function RootLayout({
children, children,
params, params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) { languageSwitcher,
}: React.PropsWithChildren<
LayoutArgs<LangParams> & {
languageSwitcher: React.ReactNode
}
>) {
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
<head> <head>
@@ -43,7 +49,8 @@ export default async function RootLayout({
<VwoScript /> <VwoScript />
</head> </head>
<body> <body>
<TrpcProvider lang={params.lang}>{children}</TrpcProvider> <TrpcProvider lang={params.lang}>
<Header lang={params.lang} languageSwitcher={languageSwitcher} />{children}</TrpcProvider>
<Script id="page-tracking">{` <Script id="page-tracking">{`
typeof _satellite !== "undefined" && _satellite.pageBottom(); typeof _satellite !== "undefined" && _satellite.pageBottom();
`}</Script> `}</Script>

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

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

17
app/[lang]/(live-current)/@languageSwitcher/page.module.css Normal file
View File

@@ -0,0 +1,17 @@
.desktop {
display: none;
}
.mobile {
display: block;
}
@media (min-width: 950px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}

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

@@ -0,0 +1,54 @@
import { batchRequest } from "@/lib/graphql/batchRequest"
import {
GetDaDeEnUrls,
GetFiNoSvUrls,
} from "@/lib/graphql/Query/LanguageSwitcherCurrent.graphql"
import Desktop from "@/components/Current/Header/LanguageSwitcher/Desktop"
import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile"
import styles from "./page.module.css"
import { LangParams, PageArgs } from "@/types/params"
import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
export default async function LanguageSwitcher({
params,
searchParams,
}: PageArgs<
LangParams,
{
uid: string
uri: string
}
>) {
if (!searchParams.uid) {
return null
}
const variables = {
uid: searchParams.uid,
}
const { data: urls } = await batchRequest<LanguageSwitcherData>([
{
document: GetDaDeEnUrls,
variables,
},
{
document: GetFiNoSvUrls,
variables,
},
])
return (
<>
<section className={styles.desktop}>
<Desktop currentLanguage={params.lang} urls={urls} />
</section>
<section className={styles.mobile}>
<Mobile currentLanguage={params.lang} urls={urls} />
</section>
</>
)
}

1
app/[lang]/(live-current)/current-content-page/page.tsx
View File

@@ -60,7 +60,6 @@ export default async function CurrentContentPage({
return ( return (
<> <>
<Header lang={params.lang} />
<ContentPage data={response.data} /> <ContentPage data={response.data} />
<Tracking pageData={trackingData} /> <Tracking pageData={trackingData} />
</> </>

7
app/[lang]/(live-current)/layout.tsx
View File

@@ -22,7 +22,10 @@ export const metadata: Metadata = {
export default function RootLayout({ export default function RootLayout({
children, children,
params, params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) { languageSwitcher,
}: React.PropsWithChildren<
LayoutArgs<LangParams> & { languageSwitcher: React.ReactNode }
>) {
return ( return (
<html lang={params.lang}> <html lang={params.lang}>
<head> <head>
@@ -76,7 +79,7 @@ export default function RootLayout({
<body className="theme-00Corecolours theme-X0Oldcorecolours"> <body className="theme-00Corecolours theme-X0Oldcorecolours">
<LangPopup lang={params.lang} /> <LangPopup lang={params.lang} />
<SkipToMainContent lang={params.lang} /> <SkipToMainContent lang={params.lang} />
<Header lang={params.lang} /> <Header lang={params.lang} languageSwitcher={languageSwitcher} />
{children} {children}
<Footer lang={params.lang} /> <Footer lang={params.lang} />
<Script id="page-tracking">{` <Script id="page-tracking">{`