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

feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -4,15 +4,14 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { Lang, languages } from "@/constants/languages"
 
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 
 import styles from "./desktop.module.css"
 
 import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
 
-export default function Desktop({
-  currentLanguage,
-  urls,
-}: LanguageSwitcherProps) {
+export default function Desktop({ urls }: LanguageSwitcherProps) {
+  const currentLanguage = useLang()
   const [isOpen, setIsOpen] = useState(false)
   const divRef = useRef<HTMLDivElement>(null)
 

components/Current/Header/LanguageSwitcher/Mobile/index.tsx

@@ -3,14 +3,14 @@ import { useState } from "react"
 
 import { Lang, languages } from "@/constants/languages"
 
+import useLang from "@/hooks/useLang"
+
 import styles from "./mobile.module.css"
 
 import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
 
-export default function Mobile({
-  currentLanguage,
-  urls,
-}: LanguageSwitcherProps) {
+export default function Mobile({ urls }: LanguageSwitcherProps) {
+  const currentLanguage = useLang()
   const [isOpen, setIsOpen] = useState(false)
 
   function toggleOpen() {

components/Current/Header/LanguageSwitcher/index.tsx

@@ -1,19 +1,15 @@
 import Desktop from "./Desktop"
 import Mobile from "./Mobile"
 
-import { LangParams } from "@/types/params"
 import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
-type LanguageSwitcherProps = LangParams & { urls: LanguageSwitcherData }
+type LanguageSwitcherProps = { urls: LanguageSwitcherData }
 
-export default function LanguageSwitcher({
-  urls,
-  lang,
-}: LanguageSwitcherProps) {
+export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
   return (
     <>
-      <Desktop currentLanguage={lang} urls={urls} />
-      <Mobile currentLanguage={lang} urls={urls} />
+      <Desktop urls={urls} />
+      <Mobile urls={urls} />
     </>
   )
 }

components/Current/Header/LoginButton.tsx

@@ -7,26 +7,24 @@ import { login } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { LinkProps } from "@/components/TempDesignSystem/Link/link"
+import useLang from "@/hooks/useLang"
 import { trackLoginClick } from "@/utils/tracking"
 
 import { TrackingPosition } from "@/types/components/tracking"
-import { LangParams } from "@/types/params"
 
 export default function LoginButton({
   className,
   position,
   trackingId,
-  lang,
   children,
   color = "black",
-}: PropsWithChildren<
-  LangParams & {
-    className: string
-    trackingId: string
-    position: TrackingPosition
-    color?: LinkProps["color"]
-  }
->) {
+}: PropsWithChildren<{
+  className: string
+  trackingId: string
+  position: TrackingPosition
+  color?: LinkProps["color"]
+}>) {
+  const lang = useLang()
   const pathName = usePathname()
 
   useEffect(() => {

components/Current/Header/MainMenu/index.tsx

@@ -8,6 +8,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import Avatar from "@/components/MyPages/Avatar"
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"
 
 import BookingButton from "../BookingButton"
@@ -27,9 +28,9 @@ export function MainMenu({
   myPagesMobileDropdown,
   bookingHref,
   user,
-  lang,
 }: MainMenuProps) {
   const intl = useIntl()
+  const lang = useLang()
 
   const {
     isHamburgerMenuOpen,
@@ -111,7 +112,6 @@ export function MainMenu({
                       position="hamburger menu"
                       trackingId="loginStartHamburgerMenu"
                       className={styles.mobileLinkButton}
-                      lang={lang}
                     >
                       {intl.formatMessage({ id: "Log in" })}
                     </LoginButton>

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -2,7 +2,6 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
-import { Lang } from "@/constants/languages"
 import { logout } from "@/constants/routes/handleAuth"
 import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
 import useDropdownStore from "@/stores/main-menu"
@@ -10,6 +9,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"
 
@@ -17,12 +17,11 @@ type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
 
 export default function MyPagesMobileDropdown({
   navigation,
-  lang,
 }: {
   navigation: Navigation
-  lang: Lang | null
 }) {
   const { formatMessage } = useIntl()
+  const lang = useLang()
   const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
     useDropdownStore()
 

components/Current/Header/TopMenu/index.tsx

@@ -3,6 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import LoginButton from "../LoginButton"
 
@@ -19,7 +20,6 @@ export default async function TopMenu({
   homeHref,
   links,
   languageSwitcher,
-  lang,
 }: TopMenuProps) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.name()
@@ -47,7 +47,7 @@ export default async function TopMenu({
               <>
                 {user ? (
                   <Link
-                    href={logout[lang]}
+                    href={logout[getLang()]}
                     className={styles.sessionLink}
                     prefetch={false}
                   >
@@ -56,7 +56,7 @@ export default async function TopMenu({
                 ) : null}
                 <div className={styles.loginSeparator} />
                 <Link
-                  href={logout[lang]}
+                  href={logout[getLang()]}
                   className={styles.sessionLink}
                   prefetch={false}
                 >
@@ -68,7 +68,6 @@ export default async function TopMenu({
                 position="hamburger menu"
                 trackingId="loginStartTopMeny"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
-                lang={lang}
               >
                 {formatMessage({ id: "Log in" })}
               </LoginButton>

components/Current/Header/index.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
 import { BookingWidget } from "@/components/BookingWidget"
+import { getLang } from "@/i18n/serverContext"
 
 import { MainMenu } from "./MainMenu"
 import OfflineBanner from "./OfflineBanner"
@@ -11,17 +12,15 @@ import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
-import { LangParams } from "@/types/params"
-
 export default async function Header({
-  lang,
   languageSwitcher,
   myPagesMobileDropdown,
-}: LangParams & { languageSwitcher: React.ReactNode } & {
+}: {
+  languageSwitcher: React.ReactNode
   myPagesMobileDropdown: React.ReactNode
 }) {
   const data = await serverClient().contentstack.base.header({
-    lang,
+    lang: getLang(),
   })
 
   const user = await serverClient().user.name()
@@ -35,7 +34,7 @@ export default async function Header({
     return null
   }
 
-  const homeHref = homeHrefs[env.NODE_ENV][lang]
+  const homeHref = homeHrefs[env.NODE_ENV][getLang()]
   const { frontpage_link_text, logo, menu, top_menu } = data
 
   const topMenuMobileLinks = top_menu.links
@@ -50,7 +49,6 @@ export default async function Header({
         homeHref={homeHref}
         links={top_menu.links}
         languageSwitcher={languageSwitcher}
-        lang={lang}
       />
       <MainMenu
         frontpageLinkText={frontpage_link_text}
@@ -62,7 +60,6 @@ export default async function Header({
         myPagesMobileDropdown={myPagesMobileDropdown}
         bookingHref={homeHref}
         user={user}
-        lang={lang}
       />
       {hideBookingWidget ? null : <BookingWidget />}
     </header>