From 6e1806fb29daecb6be0efafad5e9d25f64bc7672 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 29 Nov 2024 15:17:39 +0100 Subject: [PATCH 1/4] fix(SW-705): Add path and searchparams to language switcher --- components/LanguageSwitcher/index.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx index f087502c0..16d5e8d41 100644 --- a/components/LanguageSwitcher/index.tsx +++ b/components/LanguageSwitcher/index.tsx @@ -1,9 +1,10 @@ "use client" +import { usePathname, useSearchParams } from "next/navigation" import { useRef } from "react" import { useIntl } from "react-intl" -import { languages } from "@/constants/languages" +import { Lang, languages } from "@/constants/languages" import useDropdownStore from "@/stores/main-menu" import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons" @@ -23,6 +24,7 @@ import { type LanguageSwitcherProps, LanguageSwitcherTypesEnum, } from "@/types/components/languageSwitcher/languageSwitcher" +import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher" export default function LanguageSwitcher({ urls, @@ -36,11 +38,23 @@ export default function LanguageSwitcher({ isHeaderLanguageSwitcherMobileOpen, isHeaderLanguageSwitcherOpen, } = useDropdownStore() + const searchParams = useSearchParams() + const pathname = usePathname() + const queryParams = new URLSearchParams(searchParams.toString()) + const languageSwitcherRef = useRef(null) const isFooter = type === LanguageSwitcherTypesEnum.Footer const isHeader = !isFooter const globeIconSize = type === "desktopHeader" ? 16 : 20 + const currentUrl = `${pathname}?${queryParams.toString()}` + + const fullUrls = Object.entries(urls).reduce((acc, [lang, { url }]) => { + const newUrl = currentUrl.replace(/^\/[a-z]{2}\//, url) + acc[lang as Lang] = { url: newUrl } + return acc + }, {} as LanguageSwitcherData) + const position = isFooter ? "footer" : "header" const dropdownType = { @@ -105,7 +119,7 @@ export default function LanguageSwitcher({ {isLanguageSwitcherOpen ? ( toggleDropdown(dropdownType)} /> From 9d4c6eb25d336648f06315d68667eb0c3c0cae0a Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 29 Nov 2024 16:16:35 +0100 Subject: [PATCH 2/4] fix(SW-705): Added Suspense to LanguageSwitcher --- components/Current/Header/MainMenu/index.tsx | 28 ++++++++++++-------- components/Current/Header/TopMenu/index.tsx | 11 +++++++- components/Footer/Details/index.tsx | 6 ++++- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx index 0303a9448..00e28adb0 100644 --- a/components/Current/Header/MainMenu/index.tsx +++ b/components/Current/Header/MainMenu/index.tsx @@ -1,5 +1,6 @@ "use client" import { usePathname } from "next/navigation" +import { Suspense } from "react" import { useIntl } from "react-intl" import { logout } from "@/constants/routes/handleAuth" @@ -9,6 +10,7 @@ import useDropdownStore from "@/stores/main-menu" import Image from "@/components/Image" import LoginButton from "@/components/LoginButton" import Avatar from "@/components/MyPages/Avatar" +import SkeletonShimmer from "@/components/SkeletonShimmer" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" import { trackClick } from "@/utils/tracking" @@ -112,16 +114,14 @@ export function MainMenu({ >
    {!isThreeStaticPagesPathnames && !!user ? ( - <> -
  • - - {intl.formatMessage({ id: "My pages" })} - -
    • - +
  • + + {intl.formatMessage({ id: "My pages" })} + +
    • ) : ( <>
  • @@ -190,7 +190,13 @@ export function MainMenu({ ))}
{languageSwitcher ? ( -
  • {languageSwitcher}
    • +
  • + } + > + {languageSwitcher} + +
    • ) : null} {!!user ? (
  • diff --git a/components/Current/Header/TopMenu/index.tsx b/components/Current/Header/TopMenu/index.tsx index b33c44424..65700f66c 100644 --- a/components/Current/Header/TopMenu/index.tsx +++ b/components/Current/Header/TopMenu/index.tsx @@ -1,8 +1,11 @@ +import { Suspense } from "react" + import { logout } from "@/constants/routes/handleAuth" import { overview } from "@/constants/routes/myPages" import { getName } from "@/lib/trpc/memoizedRequests" import LoginButton from "@/components/LoginButton" +import SkeletonShimmer from "@/components/SkeletonShimmer" import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" @@ -32,7 +35,13 @@ export default async function TopMenu({
      {languageSwitcher ? ( -
    • {languageSwitcher}
      • +
    • + } + > + {languageSwitcher} + +
      • ) : null} {links.map(({ link }, i) => ( diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx index b95c20cca..6d170e3d2 100644 --- a/components/Footer/Details/index.tsx +++ b/components/Footer/Details/index.tsx @@ -1,3 +1,5 @@ +import { Suspense } from "react" + import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests" import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" @@ -86,7 +88,9 @@ export default async function FooterDetails() { )} {languages?.urls ? ( - + }> + + ) : null} From 89c131e3eb82f778e7e810f2a60b8eb70fdf9816 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 29 Nov 2024 17:03:20 +0100 Subject: [PATCH 3/4] fix(SW-705): Updated logic for language switcher --- components/Current/Header/MainMenu/index.tsx | 10 +--------- components/Current/Header/TopMenu/index.tsx | 11 +---------- components/Footer/Details/index.tsx | 6 +----- .../LanguageSwitcherContent/index.tsx | 9 ++++++++- .../LanguageSwitcherContent/utils.ts | 19 +++++++++++++++++++ components/LanguageSwitcher/index.tsx | 19 +++---------------- 6 files changed, 33 insertions(+), 41 deletions(-) create mode 100644 components/LanguageSwitcher/LanguageSwitcherContent/utils.ts diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx index 00e28adb0..98ed2f19e 100644 --- a/components/Current/Header/MainMenu/index.tsx +++ b/components/Current/Header/MainMenu/index.tsx @@ -1,6 +1,5 @@ "use client" import { usePathname } from "next/navigation" -import { Suspense } from "react" import { useIntl } from "react-intl" import { logout } from "@/constants/routes/handleAuth" @@ -10,7 +9,6 @@ import useDropdownStore from "@/stores/main-menu" import Image from "@/components/Image" import LoginButton from "@/components/LoginButton" import Avatar from "@/components/MyPages/Avatar" -import SkeletonShimmer from "@/components/SkeletonShimmer" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" import { trackClick } from "@/utils/tracking" @@ -190,13 +188,7 @@ export function MainMenu({ ))}
    {languageSwitcher ? ( -
  • - } - > - {languageSwitcher} - -
    • +
  • {languageSwitcher}
    • ) : null} {!!user ? (
  • diff --git a/components/Current/Header/TopMenu/index.tsx b/components/Current/Header/TopMenu/index.tsx index 65700f66c..b33c44424 100644 --- a/components/Current/Header/TopMenu/index.tsx +++ b/components/Current/Header/TopMenu/index.tsx @@ -1,11 +1,8 @@ -import { Suspense } from "react" - import { logout } from "@/constants/routes/handleAuth" import { overview } from "@/constants/routes/myPages" import { getName } from "@/lib/trpc/memoizedRequests" import LoginButton from "@/components/LoginButton" -import SkeletonShimmer from "@/components/SkeletonShimmer" import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" @@ -35,13 +32,7 @@ export default async function TopMenu({
      {languageSwitcher ? ( -
    • - } - > - {languageSwitcher} - -
      • +
    • {languageSwitcher}
      • ) : null} {links.map(({ link }, i) => ( diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx index 6d170e3d2..b95c20cca 100644 --- a/components/Footer/Details/index.tsx +++ b/components/Footer/Details/index.tsx @@ -1,5 +1,3 @@ -import { Suspense } from "react" - import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests" import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" @@ -88,9 +86,7 @@ export default async function FooterDetails() { )} {languages?.urls ? ( - }> - - + ) : null} diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx index 19cc69961..51be8f29c 100644 --- a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx +++ b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx @@ -1,5 +1,6 @@ "use client" +import { usePathname, useSearchParams } from "next/navigation" import { useIntl } from "react-intl" import { Lang, languages } from "@/constants/languages" @@ -10,6 +11,8 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import useLang from "@/hooks/useLang" import { useTrapFocus } from "@/hooks/useTrapFocus" +import { replaceUrlPart } from "./utils" + import styles from "./languageSwitcherContent.module.css" import type { LanguageSwitcherContentProps } from "@/types/components/languageSwitcher/languageSwitcher" @@ -18,12 +21,15 @@ export default function LanguageSwitcherContent({ urls, onLanguageSwitch, }: LanguageSwitcherContentProps) { + console.log(urls) const intl = useIntl() const currentLanguage = useLang() const languageSwitcherRef = useTrapFocus() const urlKeys = Object.keys(urls) as Lang[] + const pathname = usePathname() + return (
      @@ -39,8 +45,9 @@ export default function LanguageSwitcherContent({
    • {languages[key]} {isActive ? : null} diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/utils.ts b/components/LanguageSwitcher/LanguageSwitcherContent/utils.ts new file mode 100644 index 000000000..ee9c27a1d --- /dev/null +++ b/components/LanguageSwitcher/LanguageSwitcherContent/utils.ts @@ -0,0 +1,19 @@ +export function replaceUrlPart(currentPath: string, newPart: string): string { + const pathSegments = currentPath.split("/").filter((segment) => segment) + + const newPathSegments = newPart + .replace(/\/$/, "") + .split("/") + .filter((segment) => segment) + + const isFullPathReplacement = newPathSegments.length > 1 + + if (isFullPathReplacement) { + return `/${newPathSegments.join("/")}` + } + + const updatedPathSegments = pathSegments.slice(1) + const updatedPath = `/${newPathSegments.concat(updatedPathSegments).join("/")}` + + return updatedPath +} diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx index 16d5e8d41..b69b75d3b 100644 --- a/components/LanguageSwitcher/index.tsx +++ b/components/LanguageSwitcher/index.tsx @@ -1,10 +1,9 @@ "use client" -import { usePathname, useSearchParams } from "next/navigation" -import { useRef } from "react" +import { Suspense, useRef } from "react" import { useIntl } from "react-intl" -import { Lang, languages } from "@/constants/languages" +import { languages } from "@/constants/languages" import useDropdownStore from "@/stores/main-menu" import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons" @@ -24,7 +23,6 @@ import { type LanguageSwitcherProps, LanguageSwitcherTypesEnum, } from "@/types/components/languageSwitcher/languageSwitcher" -import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher" export default function LanguageSwitcher({ urls, @@ -38,23 +36,12 @@ export default function LanguageSwitcher({ isHeaderLanguageSwitcherMobileOpen, isHeaderLanguageSwitcherOpen, } = useDropdownStore() - const searchParams = useSearchParams() - const pathname = usePathname() - const queryParams = new URLSearchParams(searchParams.toString()) const languageSwitcherRef = useRef(null) const isFooter = type === LanguageSwitcherTypesEnum.Footer const isHeader = !isFooter const globeIconSize = type === "desktopHeader" ? 16 : 20 - const currentUrl = `${pathname}?${queryParams.toString()}` - - const fullUrls = Object.entries(urls).reduce((acc, [lang, { url }]) => { - const newUrl = currentUrl.replace(/^\/[a-z]{2}\//, url) - acc[lang as Lang] = { url: newUrl } - return acc - }, {} as LanguageSwitcherData) - const position = isFooter ? "footer" : "header" const dropdownType = { @@ -119,7 +106,7 @@ export default function LanguageSwitcher({ {isLanguageSwitcherOpen ? ( toggleDropdown(dropdownType)} /> From 47d6f87529af60f03ab72d8de6f1363b4149d1ea Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 29 Nov 2024 17:04:39 +0100 Subject: [PATCH 4/4] fix(705): removed unused --- components/LanguageSwitcher/LanguageSwitcherContent/index.tsx | 3 +-- components/LanguageSwitcher/index.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx index 51be8f29c..2f684d96e 100644 --- a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx +++ b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx @@ -1,6 +1,6 @@ "use client" -import { usePathname, useSearchParams } from "next/navigation" +import { usePathname } from "next/navigation" import { useIntl } from "react-intl" import { Lang, languages } from "@/constants/languages" @@ -21,7 +21,6 @@ export default function LanguageSwitcherContent({ urls, onLanguageSwitch, }: LanguageSwitcherContentProps) { - console.log(urls) const intl = useIntl() const currentLanguage = useLang() diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx index b69b75d3b..7eb47c90c 100644 --- a/components/LanguageSwitcher/index.tsx +++ b/components/LanguageSwitcher/index.tsx @@ -1,6 +1,6 @@ "use client" -import { Suspense, useRef } from "react" +import { useRef } from "react" import { useIntl } from "react-intl" import { languages } from "@/constants/languages"