Fixing basque language name hydration issues on Google Chrome (#1415)

This commit is contained in:
Keith Stevens
2023-02-10 07:47:43 +01:00
committed by GitHub
parent aaa1276bae
commit ebd05e8d32
5 changed files with 22 additions and 9 deletions
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { useCallback, useEffect, useMemo } from "react";
import { useCookies } from "react-cookie";
import { getLocaleDisplayName } from "src/lib/languages";
const LanguageSelector = () => {
const router = useRouter();
@@ -20,15 +21,11 @@ const LanguageSelector = () => {
}
}, [cookies, setCookie, router]);
const firstLetterUppercase = (str) => {
return str.charAt(0).toLocaleUpperCase() + str.slice(1);
};
// Memo the set of locales and their display names.
const localesAndNames = useMemo(() => {
return router.locales.map((locale) => ({
locale,
name: firstLetterUppercase(new Intl.DisplayNames([locale], { type: "language" }).of(locale)),
name: getLocaleDisplayName(locale),
}));
}, [router.locales]);
@@ -2,6 +2,7 @@ import { Button, Flex, Tooltip } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { useCookies } from "react-cookie";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { getLocaleDisplayName } from "src/lib/languages";
interface LabelFlagGroupProps {
values: number[];
@@ -21,7 +22,7 @@ export const LabelFlagGroup = ({
const { t } = useTranslation("labelling");
const [cookies] = useCookies(["NEXT_LOCALE"]);
const currentLanguage = cookies["NEXT_LOCALE"];
const expectedLanguageName = new Intl.DisplayNames(currentLanguage, { type: "language" }).of(expectedLanguage);
const expectedLanguageName = getLocaleDisplayName(expectedLanguage, currentLanguage);
return (
<Flex wrap="wrap" gap="4">
{labelNames.map((name, idx) => (
@@ -5,6 +5,7 @@ import { useTranslation } from "next-i18next";
import React from "react";
import { useCookies } from "react-cookie";
import { LanguageAbbreviations } from "src/lib/iso6393";
import { getLocaleDisplayName } from "src/lib/languages";
import { colors } from "src/styles/Theme/colors";
interface TrackedTextboxProps {
@@ -80,8 +81,8 @@ export const TrackedTextarea = (props: TrackedTextboxProps) => {
>
<Tooltip
label={t(wrongLanguage ? "writing_wrong_langauge_a_b" : "submitted_as", {
submit_lang: new Intl.DisplayNames(currentLanguage, { type: "language" }).of(currentLanguage),
detected_lang: new Intl.DisplayNames(currentLanguage, { type: "language" }).of(detectedLang),
submit_lang: getLocaleDisplayName(currentLanguage),
detected_lang: getLocaleDisplayName(detectedLang, currentLanguage),
})}
>
{detectedLang}