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

feat: SW-238 Avoid prop drilling of lang Approved-by: Michael Zetterberg
2024-08-14 11:00:20 +00:00
parent 35128dbf44
commit e67212bd94
94 changed files with 378 additions and 322 deletions
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
@@ -6,20 +6,19 @@ import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"

 import styles from "./current.module.css"

 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"

 export default async function CurrentBenefitsBlock({
  title,
  subtitle,
  link,
-  lang,
-}: AccountPageComponentProps & LangParams) {
+}: AccountPageComponentProps) {
  const user = await serverClient().user.get()
  // TAKE NOTE: we need clarification on how benefits stack from different levels
  // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
@@ -35,7 +34,7 @@ export default async function CurrentBenefitsBlock({

  const currentLevel = getMembershipLevelObject(
    user.memberships[0].membershipLevel as MembershipLevelEnum,
-    lang
+    getLang()
  )
  if (!currentLevel) {
    //  TODO: handle this case?
--- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
@@ -11,6 +11,7 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"

 import styles from "./next.module.css"
@@ -20,7 +21,6 @@ import { AccountPageComponentProps } from "@/types/components/myPages/myPage/acc
 export default async function NextLevelBenefitsBlock({
  title,
  subtitle,
-  lang,
  link,
 }: AccountPageComponentProps) {
  const { formatMessage } = await getIntl()
@@ -30,7 +30,7 @@ export default async function NextLevelBenefitsBlock({
  }
  const nextLevel = getMembershipLevelObject(
    user.memberships[0].nextLevel as MembershipLevelEnum,
-    lang
+    getLang()
  )
  if (!nextLevel) {
    //  TODO: handle this case, when missing or when user is top level?
--- a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx
@@ -1,5 +1,6 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"

+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"

@@ -7,13 +8,12 @@ import PointsContainer from "./Container"
 import { NextLevelPointsColumn, YourPointsColumn } from "./PointsColumn"

 import { UserProps } from "@/types/components/myPages/user"
-import { LangParams } from "@/types/params"

-export default async function Points({ user, lang }: UserProps & LangParams) {
+export default async function Points({ user }: UserProps) {
  const membership = getMembership(user.memberships)
  const nextLevel = getMembershipLevelObject(
    membership?.nextLevel as MembershipLevelEnum,
-    lang
+    getLang()
  )

  return (
--- a/components/MyPages/Blocks/Overview/Stats/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/index.tsx
@@ -6,12 +6,11 @@ import Points from "./Points"
 import styles from "./stats.module.css"

 import type { UserProps } from "@/types/components/myPages/user"
-import type { LangParams } from "@/types/params"

-export default function Stats({ user, lang }: UserProps & LangParams) {
+export default function Stats({ user }: UserProps) {
  return (
    <section className={styles.stats}>
-      <Points user={user} lang={lang} />
+      <Points user={user} />
      <Divider variant="default" color="pale" />
      <ExpiringPoints user={user} />
    </section>
--- a/components/MyPages/Blocks/Overview/index.tsx
+++ b/components/MyPages/Blocks/Overview/index.tsx
@@ -4,6 +4,7 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Divider from "@/components/TempDesignSystem/Divider"
+import { getLang } from "@/i18n/serverContext"

 import Hero from "./Friend/Hero"
 import Friend from "./Friend"
@@ -12,14 +13,12 @@ import Stats from "./Stats"
 import styles from "./overview.module.css"

 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"

 export default async function Overview({
  link,
  subtitle,
  title,
-  lang,
-}: AccountPageComponentProps & LangParams) {
+}: AccountPageComponentProps) {
  const user = await serverClient().user.get()
  if (!user || "error" in user) {
    return null
@@ -31,7 +30,7 @@ export default async function Overview({
      <Hero color="red">
        <Friend user={user} color="burgundy" />
        <Divider className={styles.divider} color="peach" />
-        <Stats user={user} lang={lang} />
+        <Stats user={user} />
      </Hero>
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
--- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx
@@ -1,6 +1,7 @@
 import { dt } from "@/lib/dt"

 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"

 import AwardPoints from "./AwardPoints"

@@ -8,15 +9,17 @@ import styles from "./row.module.css"

 import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"

-export default async function Row({ transaction, lang }: RowProps) {
+export default async function Row({ transaction }: RowProps) {
  const { formatMessage } = await getIntl()
  const description =
    transaction.hotelName && transaction.city
      ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`
      : `${transaction.nights} ${formatMessage({ id: "nights" })}`
-  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
+  const arrival = dt(transaction.checkinDate)
+    .locale(getLang())
+    .format("DD MMM YYYY")
  const departure = dt(transaction.checkoutDate)
-    .locale(lang)
+    .locale(getLang())
    .format("DD MMM YYYY")
  return (
    <tr className={styles.tr}>
--- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx
@@ -15,7 +15,7 @@ const tableHeadings = [
  "Points",
 ]

-export default async function DesktopTable({ lang, transactions }: TableProps) {
+export default async function DesktopTable({ transactions }: TableProps) {
  const { formatMessage } = await getIntl()
  return (
    <div className={styles.container}>
@@ -35,7 +35,6 @@ export default async function DesktopTable({ lang, transactions }: TableProps) {
          <tbody>
            {transactions.map((transaction) => (
              <Row
-                lang={lang}
                key={transaction.confirmationNumber}
                transaction={transaction}
              />
--- a/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx
@@ -3,12 +3,13 @@ import { dt } from "@/lib/dt"
 import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"

 import styles from "./mobile.module.css"

 import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"

-export default async function MobileTable({ lang, transactions }: TableProps) {
+export default async function MobileTable({ transactions }: TableProps) {
  const { formatMessage } = await getIntl()
  return (
    <div className={styles.container}>
@@ -32,7 +33,7 @@ export default async function MobileTable({ lang, transactions }: TableProps) {
                <td className={`${styles.td} ${styles.transactionDetails}`}>
                  <span className={styles.transactionDate}>
                    {dt(transaction.checkinDate)
-                      .locale(lang)
+                      .locale(getLang())
                      .format("DD MMM YYYY")}
                  </span>
                  {transaction.hotelName && transaction.city ? (
--- a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
@@ -10,7 +10,6 @@ import MobileTable from "./Mobile"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

 export default async function EarnAndBurn({
-  lang,
  link,
  subtitle,
  title,
@@ -23,8 +22,8 @@ export default async function EarnAndBurn({
  return (
    <SectionContainer>
      <SectionHeader title={title} link={link} subtitle={subtitle} />
-      <MobileTable lang={lang} transactions={transactions.data} />
-      <DesktopTable lang={lang} transactions={transactions.data} />
+      <MobileTable transactions={transactions.data} />
+      <DesktopTable transactions={transactions.data} />
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
  )
--- a/components/MyPages/Blocks/Points/Overview/index.tsx
+++ b/components/MyPages/Blocks/Points/Overview/index.tsx
@@ -12,14 +12,12 @@ import Stats from "../../Overview/Stats"
 import styles from "./overview.module.css"

 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"

 export default async function PointsOverview({
  link,
  subtitle,
  title,
-  lang,
-}: AccountPageComponentProps & LangParams) {
+}: AccountPageComponentProps) {
  const user = await serverClient().user.get()
  if (!user || "error" in user) {
    return null
@@ -31,7 +29,7 @@ export default async function PointsOverview({
      <Hero color="burgundy">
        <Friend user={user} color="red" />
        <Divider className={styles.divider} color="peach" />
-        <Stats user={user} lang={lang} />
+        <Stats user={user} />
      </Hero>
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
--- a/components/MyPages/Blocks/Stays/Previous/Client.tsx
+++ b/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 ? (
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/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 />
      )}
--- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
+++ b/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"
      >
--- a/components/MyPages/Blocks/Stays/Soonest/index.tsx
+++ b/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>
--- a/components/MyPages/Blocks/Stays/StayCard/index.tsx
+++ b/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

--- a/components/MyPages/Blocks/Stays/Upcoming/Client.tsx
+++ b/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 ? (
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/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"
      >
--- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx
+++ b/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>