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

feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg

components/MyPages/Blocks/Stays/Previous/Client.tsx

@@ -16,7 +16,6 @@ import type {
 
 export default function ClientPreviousStays({
   initialPreviousStays,
-  lang,
 }: PreviousStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientPreviousStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard
-            key={stay.attributes.confirmationNumber}
-            lang={lang}
-            stay={stay}
-          />
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -10,7 +10,6 @@ import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function PreviousStays({
-  lang,
   title,
   subtitle,
   link,
@@ -23,10 +22,7 @@ export default async function PreviousStays({
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       {initialPreviousStays.data.length ? (
-        <ClientPreviousStays
-          initialPreviousStays={initialPreviousStays}
-          lang={lang}
-        />
+        <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
       ) : (
         <EmptyPreviousStaysBlock />
       )}

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
+export default async function EmptyUpcomingStaysBlock() {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
         </Title>
       </div>
       <Link
-        href={homeHrefs[env.NODE_ENV][lang]}
+        href={homeHrefs[env.NODE_ENV][getLang()]}
         className={styles.link}
         color="peach80"
       >

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -11,7 +11,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function SoonestStays({
-  lang,
   title,
   subtitle,
   link,
@@ -27,15 +26,11 @@ export default async function SoonestStays({
       {response.data.length ? (
         <Grids.Stackable>
           {response.data.map((stay) => (
-            <StayCard
-              key={stay.attributes.confirmationNumber}
-              lang={lang}
-              stay={stay}
-            />
+            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
           ))}
         </Grids.Stackable>
       ) : (
-        <EmptyUpcomingStaysBlock lang={lang} />
+        <EmptyUpcomingStaysBlock />
       )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -5,12 +5,14 @@ import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
 
 import styles from "./stay.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
-export default function StayCard({ stay, lang }: StayCardProps) {
+export default function StayCard({ stay }: StayCardProps) {
+  const lang = useLang()
   const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
     stay.attributes
 

components/MyPages/Blocks/Stays/Upcoming/Client.tsx

@@ -16,7 +16,6 @@ import type {
 
 export default function ClientUpcomingStays({
   initialUpcomingStays,
-  lang,
 }: UpcomingStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.upcoming.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientUpcomingStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard
-            key={stay.attributes.confirmationNumber}
-            lang={lang}
-            stay={stay}
-          />
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
+export default async function EmptyUpcomingStaysBlock() {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
         </Title>
       </div>
       <Link
-        href={homeHrefs[env.NODE_ENV][lang]}
+        href={homeHrefs[env.NODE_ENV][getLang()]}
         className={styles.link}
         color="peach80"
       >

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -10,7 +10,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function UpcomingStays({
-  lang,
   title,
   subtitle,
   link,
@@ -23,12 +22,9 @@ export default async function UpcomingStays({
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       {initialUpcomingStays.data.length ? (
-        <ClientUpcomingStays
-          initialUpcomingStays={initialUpcomingStays}
-          lang={lang}
-        />
+        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (
-        <EmptyUpcomingStaysBlock lang={lang} />
+        <EmptyUpcomingStaysBlock />
       )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>