Present locales with their locale language rather than the current locale language

This commit is contained in:
Keith Stevens
2023-01-23 18:29:43 +09:00
parent 0cfc6a3d10
commit 219ef2cb8e
@@ -8,12 +8,13 @@ const LanguageSelector = () => {
const router = useRouter(); const router = useRouter();
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const { language: currentLanguage } = i18n; // Memo the set of locales and their display names.
const languageNames = useMemo(() => { const localesAndNames = useMemo(() => {
return new Intl.DisplayNames([currentLanguage], { return router.locales.map((locale) => ({
type: "language", locale,
}); name: new Intl.DisplayNames([locale], { type: "language" }).of(locale),
}, [currentLanguage]); }));
}, [router.locales]);
const languageChanged = useCallback( const languageChanged = useCallback(
async (option) => { async (option) => {
@@ -25,12 +26,12 @@ const LanguageSelector = () => {
[router] [router]
); );
const locales = router.locales; const { language: currentLanguage } = i18n;
return ( return (
<Select onChange={languageChanged} defaultValue={currentLanguage}> <Select onChange={languageChanged} defaultValue={currentLanguage}>
{locales.map((locale) => ( {localesAndNames.map(({ locale, name }) => (
<option key={locale} value={locale}> <option key={locale} value={locale}>
{languageNames.of(locale) ?? locale} {name}
</option> </option>
))} ))}
</Select> </Select>