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

feat: improve instantiation of intl

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/scandic-web/app/[lang]/(live)/layout.tsx
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>

16
apps/scandic-web/app/[lang]/(live-current)/layout.tsx
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();

15
apps/scandic-web/app/[lang]/(no-layout)/layout.tsx
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>

7
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx
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>.",
},

15
apps/scandic-web/app/[lang]/(partner)/layout.tsx
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>
)

15
apps/scandic-web/app/[lang]/webview/layout.tsx
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>
)

7
apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -12,8 +12,6 @@ import SectionWrapper from "../SectionWrapper"
import styles from "./loyaltyLevels.module.css"
import type { FormatXMLElementFn } from "intl-messageformat"
import type { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent"
import type { LevelCardProps } from "@/types/components/overviewTable"
@@ -44,10 +42,7 @@ async function LevelCard({ level }: LevelCardProps) {
)
if (level.required_nights) {
pointsMsg = intl.formatMessage<
React.ReactNode,
FormatXMLElementFn<React.ReactNode>
>(
pointsMsg = intl.formatMessage(
{
id: "{pointsAmount, number} points <highlight>or {nightsAmount, number} nights</highlight>",
},

20
apps/scandic-web/i18n/Provider.tsx
View File

@@ -2,11 +2,21 @@
import { IntlProvider } from "react-intl"
import type { ServerIntlProviderProps } from "@/types/i18n"
import type { ClientIntlProviderProps } from "@/types/i18n"
export default function ServerIntlProvider({
export default function ClientIntlProvider({
children,
intl,
}: ServerIntlProviderProps) {
return <IntlProvider {...intl}>{children}</IntlProvider>
locale,
defaultLocale,
messages,
}: ClientIntlProviderProps) {
return (
<IntlProvider
locale={locale}
defaultLocale={defaultLocale}
messages={messages}
>
{children}
</IntlProvider>
)
}

42
apps/scandic-web/i18n/index.ts
View File

@@ -1,32 +1,36 @@
import "server-only"
import { createIntl, createIntlCache } from "@formatjs/intl"
import { headers } from "next/headers"
import { Lang } from "@/constants/languages"
import { getLang } from "@/i18n/serverContext"
import type { IntlShape } from "react-intl"
const cache = createIntlCache()
export async function initIntl(lang: Lang) {
return createIntl<React.ReactNode>(
{
defaultLocale: Lang.en,
locale: lang,
messages: (await import(`./dictionaries/${lang}.json`)).default,
},
cache
)
const instances: Partial<Record<Lang, IntlShape>> = {}
export async function getMessages(lang: Lang): Promise<Record<string, string>> {
return (await import(`./dictionaries/${lang}.json`)).default
}
export async function getIntl(forceLang?: Lang) {
const h = headers()
let lang = h.get("x-lang") as Lang
if (!lang) {
lang = Lang.en
export async function getIntl() {
const lang = getLang()
if (!instances[lang]) {
const messages = await getMessages(lang)
instances[lang] = createIntl<React.ReactNode>(
{
defaultLocale: Lang.en,
locale: lang,
messages,
},
cache
)
}
if (forceLang) {
return await initIntl(forceLang)
}
return await initIntl(lang)
// Exclamation mark can be removed once we update TS to 5.8.2+
return instances[lang]!
}

2
apps/scandic-web/server/routers/navigation/mypages/getPrimaryLinks.ts
View File

@@ -19,7 +19,7 @@ export const getPrimaryLinks = cache(
lang: Lang
memberships: Membership[]
}): Promise<MyPagesLink[]> => {
const intl = await getIntl(lang)
const intl = await getIntl()
const showSASLink = isScandicXSASActive(memberships)
const [showTeamMemberLink] = await safeTry(showTeamMemberCard())

6
apps/scandic-web/types/i18n.ts
View File

@@ -1,5 +1,5 @@
import type { IntlConfig } from "react-intl"
export type ServerIntlProviderProps = React.PropsWithChildren<{
intl: IntlConfig
}>
export type ClientIntlProviderProps = React.PropsWithChildren<
Pick<IntlConfig, "defaultLocale" | "locale" | "messages">
>