Merged in feature/refactor-lang (pull request #387)

feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg

app/[lang]/(live)/(protected)/layout.tsx

@@ -5,13 +5,11 @@ import { overview } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
-
-import type { LangParams, LayoutArgs } from "@/types/params"
+import { getLang } from "@/i18n/serverContext"
 
 export default async function ProtectedLayout({
   children,
-  params,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+}: React.PropsWithChildren) {
   const session = await auth()
   /**
    *  Fallback to make sure every route nested in the
@@ -19,16 +17,16 @@ export default async function ProtectedLayout({
    */
   const h = headers()
   const redirectTo = encodeURIComponent(
-    h.get("x-url") ?? h.get("x-pathname") ?? overview[params.lang]
+    h.get("x-url") ?? h.get("x-pathname") ?? overview[getLang()]
   )
 
   if (!session) {
-    redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
+    redirect(`/${getLang()}/login?redirectTo=${redirectTo}`)
   }
 
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
-    redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
+    redirect(`/${getLang()}/login?redirectTo=${redirectTo}`)
   }
 
   return children

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -1,5 +1,10 @@
 import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
 
-export default function AllBreadcrumbs() {
   return <Breadcrumbs />
 }

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -4,6 +4,7 @@ import Content from "@/components/MyPages/AccountPage/Content"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
@@ -12,6 +13,8 @@ import type { LangParams, PageArgs } from "@/types/params"
 export default async function MyPages({
   params,
 }: PageArgs<LangParams & { path: string[] }>) {
+  setLang(params.lang)
+
   const accountPageRes = await serverClient().contentstack.accountPage.get()
   const { formatMessage } = await getIntl()
 
@@ -26,7 +29,7 @@ export default async function MyPages({
       <main className={styles.blocks}>
         <Title>{accountPage.heading}</Title>
         {accountPage.content.length ? (
-          <Content lang={params.lang} content={accountPage.content} />
+          <Content content={accountPage.content} />
         ) : (
           <p>{formatMessage({ id: "No content published" })}</p>
         )}

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -2,20 +2,17 @@ import Sidebar from "@/components/MyPages/Sidebar"
 
 import styles from "./layout.module.css"
 
-import { LangParams, LayoutArgs } from "@/types/params"
-
 export default async function MyPagesLayout({
   breadcrumbs,
   children,
-  params,
-}: React.PropsWithChildren<LayoutArgs<LangParams>> & {
+}: React.PropsWithChildren & {
   breadcrumbs: React.ReactNode
 }) {
   return (
     <section className={styles.layout}>
       {breadcrumbs}
       <section className={styles.content}>
-        <Sidebar lang={params.lang} />
+        <Sidebar />
         {children}
       </section>
     </section>

app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx

@@ -3,10 +3,17 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-export default async function CommunicationSlot() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function CommunicationSlot({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
+
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>

app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx

@@ -7,10 +7,14 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-export default async function CreditCardSlot() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const { formatMessage } = await getIntl()
   const creditCards = await serverClient().user.creditCards()
 

app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx

@@ -5,10 +5,16 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-export default async function MembershipCardSlot() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function MembershipCardSlot({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
   const { formatMessage } = await getIntl()
   const membershipCards = await serverClient().user.membershipCards()
 

app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx

@@ -1,8 +1,15 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import Form from "@/components/Forms/Edit/Profile"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function EditProfileSlot({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
 
-export default async function EditProfileSlot() {
   const user = await serverClient().user.get({ mask: false })
   if (!user || "error" in user) {
     return null

app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx

@@ -16,12 +16,14 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import { LangParams, PageArgs } from "@/types/params"
 
 export default async function Profile({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
@@ -40,7 +42,7 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
           </Title>
         </hgroup>
         <Button asChild intent="primary" size="small" theme="base">
-          <Link color="none" href={profileEdit[params.lang]}>
+          <Link color="none" href={profileEdit[getLang()]}>
             {formatMessage({ id: "Edit profile" })}
           </Link>
         </Button>

app/[lang]/(live)/(protected)/my-pages/profile/page.tsx

@@ -3,8 +3,12 @@ import "./profileLayout.css"
 import { serverClient } from "@/lib/trpc/server"
 
 import TrackingSDK from "@/components/TrackingSDK"
+import { setLang } from "@/i18n/serverContext"
 
-export default async function ProfilePage() {
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function ProfilePage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
   const accountPage = await serverClient().contentstack.accountPage.get()
 
   if (!accountPage) {