mirror of
https://github.com/wassname/Open-Assistant.git
synced 2026-08-02 12:20:35 +08:00
Fixing basque language name hydration issues on Google Chrome (#1415)
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user