feat: improve instantiation of intl

This commit is contained in:
Michael Zetterberg
2025-04-07 07:33:28 +02:00
parent f31b374370
commit 7c82a565ae
11 changed files with 95 additions and 65 deletions

View File

@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import Script from "next/script"
import { SessionProvider } from "next-auth/react"
import { Lang } from "@/constants/languages"
import TrpcProvider from "@/lib/trpc/Provider"
import { SessionRefresher } from "@/components/Auth/TokenRefresher"
@@ -19,8 +20,8 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getMessages } from "@/i18n"
import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
import type { LangParams, LayoutArgs } from "@/types/params"
@@ -35,7 +36,7 @@ export default async function RootLayout({
}
>) {
setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl()
const messages = await getMessages(params.lang)
return (
<html lang={params.lang}>
@@ -56,7 +57,11 @@ export default async function RootLayout({
</head>
<body className="scandic">
<SessionProvider basePath="/api/web/auth">
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider>
<RouterTracking />
<SitewideAlert />
@@ -70,7 +75,7 @@ export default async function RootLayout({
<CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} />
</TrpcProvider>
</ServerIntlProvider>
</ClientIntlProvider>
</SessionProvider>
</body>
</html>

View File

@@ -5,6 +5,8 @@ import "@scandic-hotels/design-system/style.css"
import Script from "next/script"
import { Lang } from "@/constants/languages"
import TokenRefresher from "@/components/Auth/TokenRefresher"
import CookieBotConsent from "@/components/CookieBot"
import AdobeScript from "@/components/Current/AdobeScript"
@@ -12,8 +14,8 @@ import Footer from "@/components/Current/Footer"
import LangPopup from "@/components/Current/LangPopup"
import SkipToMainContent from "@/components/SkipToMainContent"
import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getMessages } from "@/i18n"
import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
import type { Metadata } from "next"
@@ -34,7 +36,7 @@ export default async function RootLayout({
LayoutArgs<LangParams> & { header: React.ReactNode }
>) {
setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl()
const messages = await getMessages(params.lang)
return (
<html lang={params.lang}>
@@ -59,14 +61,18 @@ export default async function RootLayout({
<body className="theme-00Corecolours theme-X0Oldcorecolours">
<LangPopup />
<SkipToMainContent />
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<RouterTracking />
{header}
{children}
<Footer />
<TokenRefresher />
<CookieBotConsent />
</ServerIntlProvider>
</ClientIntlProvider>
<Script id="page-tracking">{`
if (typeof _satellite !== "undefined" && typeof _satellite.pageBottom === "function") {
_satellite.pageBottom();

View File

@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import Script from "next/script"
import { SessionProvider } from "next-auth/react"
import { Lang } from "@/constants/languages"
import TrpcProvider from "@/lib/trpc/Provider"
import { SessionRefresher } from "@/components/Auth/TokenRefresher"
@@ -16,8 +17,8 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getMessages } from "@/i18n"
import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
import type { LangParams, LayoutArgs } from "@/types/params"
@@ -27,7 +28,7 @@ export default async function RootLayout({
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl()
const messages = await getMessages(params.lang)
return (
<html lang={params.lang}>
@@ -48,7 +49,11 @@ export default async function RootLayout({
</head>
<body className="scandic">
<SessionProvider basePath="/api/web/auth">
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider>
<RouterTracking />
{children}
@@ -58,7 +63,7 @@ export default async function RootLayout({
<CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} />
</TrpcProvider>
</ServerIntlProvider>
</ClientIntlProvider>
</SessionProvider>
</body>
</html>

View File

@@ -14,8 +14,6 @@ import { getIntl } from "@/i18n"
import { SASModal } from "../components/SASModal"
import type { FormatXMLElementFn } from "intl-messageformat"
import type { LangParams, PageArgs, SearchParams } from "@/types/params"
import type { State } from "../sasUtils"
@@ -82,10 +80,7 @@ export default async function SASxScandicLoginPage({
</p>
</Typography>
<Footnote textAlign="center">
{intl.formatMessage<
React.ReactNode,
FormatXMLElementFn<React.ReactNode>
>(
{intl.formatMessage(
{
id: "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
},

View File

@@ -6,6 +6,7 @@ import "@scandic-hotels/design-system/style.css"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import Script from "next/script"
import { Lang } from "@/constants/languages"
import { env } from "@/env/server"
import TrpcProvider from "@/lib/trpc/Provider"
@@ -16,8 +17,8 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getMessages } from "@/i18n"
import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
import type { LangParams, LayoutArgs } from "@/types/params"
@@ -31,7 +32,7 @@ export default async function RootLayout({
}
setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl()
const messages = await getMessages(params.lang)
return (
<html lang={params.lang}>
@@ -51,7 +52,11 @@ export default async function RootLayout({
`}</Script>
</head>
<body className="scandic">
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider>
<RouterTracking />
{children}
@@ -61,7 +66,7 @@ export default async function RootLayout({
<CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} />
</TrpcProvider>
</ServerIntlProvider>
</ClientIntlProvider>
</body>
</html>
)

View File

@@ -5,14 +5,15 @@ import "@scandic-hotels/design-system/style.css"
import Script from "next/script"
import { Lang } from "@/constants/languages"
import TrpcProvider from "@/lib/trpc/Provider"
import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
import GTMScript from "@/components/TrackingSDK/GTMScript"
import RouterTracking from "@/components/TrackingSDK/RouterTracking"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { getMessages } from "@/i18n"
import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
import styles from "./layout.module.css"
@@ -30,7 +31,7 @@ export default async function RootLayout({
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
setLang(params.lang)
const { defaultLocale, locale, messages } = await getIntl()
const messages = await getMessages(params.lang)
return (
<html lang={params.lang}>
@@ -42,13 +43,17 @@ export default async function RootLayout({
`}</Script>
</head>
<body className={styles.layout}>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<ClientIntlProvider
defaultLocale={Lang.en}
locale={params.lang}
messages={messages}
>
<TrpcProvider>
<RouterTracking />
{children}
<ToastHandler />
</TrpcProvider>
</ServerIntlProvider>
</ClientIntlProvider>
</body>
</html>
)