fix(SW-705): Add path and searchparams to language switcher
This commit is contained in:
@@ -1,9 +1,10 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
|
import { usePathname, useSearchParams } from "next/navigation"
|
||||||
import { useRef } from "react"
|
import { useRef } from "react"
|
||||||
import { useIntl } from "react-intl"
|
import { useIntl } from "react-intl"
|
||||||
|
|
||||||
import { languages } from "@/constants/languages"
|
import { Lang, languages } from "@/constants/languages"
|
||||||
import useDropdownStore from "@/stores/main-menu"
|
import useDropdownStore from "@/stores/main-menu"
|
||||||
|
|
||||||
import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
|
import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
|
||||||
@@ -23,6 +24,7 @@ import {
|
|||||||
type LanguageSwitcherProps,
|
type LanguageSwitcherProps,
|
||||||
LanguageSwitcherTypesEnum,
|
LanguageSwitcherTypesEnum,
|
||||||
} from "@/types/components/languageSwitcher/languageSwitcher"
|
} from "@/types/components/languageSwitcher/languageSwitcher"
|
||||||
|
import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
|
||||||
|
|
||||||
export default function LanguageSwitcher({
|
export default function LanguageSwitcher({
|
||||||
urls,
|
urls,
|
||||||
@@ -36,11 +38,23 @@ export default function LanguageSwitcher({
|
|||||||
isHeaderLanguageSwitcherMobileOpen,
|
isHeaderLanguageSwitcherMobileOpen,
|
||||||
isHeaderLanguageSwitcherOpen,
|
isHeaderLanguageSwitcherOpen,
|
||||||
} = useDropdownStore()
|
} = useDropdownStore()
|
||||||
|
const searchParams = useSearchParams()
|
||||||
|
const pathname = usePathname()
|
||||||
|
const queryParams = new URLSearchParams(searchParams.toString())
|
||||||
|
|
||||||
const languageSwitcherRef = useRef<HTMLDivElement>(null)
|
const languageSwitcherRef = useRef<HTMLDivElement>(null)
|
||||||
const isFooter = type === LanguageSwitcherTypesEnum.Footer
|
const isFooter = type === LanguageSwitcherTypesEnum.Footer
|
||||||
const isHeader = !isFooter
|
const isHeader = !isFooter
|
||||||
const globeIconSize = type === "desktopHeader" ? 16 : 20
|
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 position = isFooter ? "footer" : "header"
|
||||||
|
|
||||||
const dropdownType = {
|
const dropdownType = {
|
||||||
@@ -105,7 +119,7 @@ export default function LanguageSwitcher({
|
|||||||
{isLanguageSwitcherOpen ? (
|
{isLanguageSwitcherOpen ? (
|
||||||
<LanguageSwitcherContainer type={type}>
|
<LanguageSwitcherContainer type={type}>
|
||||||
<LanguageSwitcherContent
|
<LanguageSwitcherContent
|
||||||
urls={urls}
|
urls={fullUrls}
|
||||||
onLanguageSwitch={() => toggleDropdown(dropdownType)}
|
onLanguageSwitch={() => toggleDropdown(dropdownType)}
|
||||||
/>
|
/>
|
||||||
</LanguageSwitcherContainer>
|
</LanguageSwitcherContainer>
|
||||||
|
|||||||
Reference in New Issue
Block a user