9d4b913bdc
* redirect to your preferred language (#25664) * redirect to your preferred language * refactorings * use js-cookies * make sure no cache when language is involved in the redirect * fix tests
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import Cookies from 'js-cookie'
|
|
|
|
import { Link } from 'components/Link'
|
|
import { useLanguages } from 'components/context/LanguagesContext'
|
|
import { Picker } from 'components/ui/Picker'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
|
|
// This value is replicated in two places! See middleware/detect-language.js
|
|
const PREFERRED_LOCALE_COOKIE_NAME = 'preferredlang'
|
|
|
|
type Props = {
|
|
variant?: 'inline'
|
|
}
|
|
|
|
export const LanguagePicker = ({ variant }: Props) => {
|
|
const router = useRouter()
|
|
const { languages } = useLanguages()
|
|
const locale = router.locale || 'en'
|
|
const langs = Object.values(languages)
|
|
const selectedLang = languages[locale]
|
|
const { t } = useTranslation('picker')
|
|
|
|
// The `router.asPath` will always be without a hash in SSR
|
|
// So to avoid a hydraration failure on the client, we have to
|
|
// normalize it to be without the hash. That way the path is treated
|
|
// in a "denormalized" way.
|
|
const routerPath = router.asPath.split('#')[0]
|
|
|
|
function rememberPreferredLanguage(code: string) {
|
|
try {
|
|
Cookies.set(PREFERRED_LOCALE_COOKIE_NAME, code, {
|
|
expires: 365,
|
|
secure: document.location.protocol !== 'http:',
|
|
})
|
|
} catch (err) {
|
|
// You can never be too careful because setting a cookie
|
|
// can fail. For example, some browser
|
|
// extensions disallow all setting of cookies and attempts
|
|
// at the `document.cookie` setter could throw. Just swallow
|
|
// and move on.
|
|
console.warn('Unable to set preferred language cookie', err)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Picker
|
|
variant={variant}
|
|
data-testid="language-picker"
|
|
defaultText={t('language_picker_default_text')}
|
|
options={langs
|
|
.filter((lang) => !lang.wip)
|
|
.map((lang) => ({
|
|
text: lang.nativeName || lang.name,
|
|
selected: lang === selectedLang,
|
|
item: (
|
|
<Link
|
|
href={routerPath}
|
|
locale={lang.code}
|
|
onClick={() => {
|
|
rememberPreferredLanguage(lang.code)
|
|
}}
|
|
>
|
|
{lang.nativeName ? (
|
|
<>
|
|
<span lang={lang.code}>{lang.nativeName}</span> (
|
|
<span lang="en">{lang.name}</span>)
|
|
</>
|
|
) : (
|
|
<span lang={lang.code}>{lang.name}</span>
|
|
)}
|
|
</Link>
|
|
),
|
|
}))}
|
|
/>
|
|
)
|
|
}
|