Use DisplayNames instead of hard-coding languages

openstax · Nov 3, 2023 · 3734977 · 3734977
1 parent b0b164a
commit 3734977
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 38 deletions.
diff --git a/src/app/components/language-selector/language-selector.js b/src/app/components/language-selector/language-selector.js
@@ -5,47 +5,39 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe';
 import './language-selector.scss';
 
-// You can't use a variable for id
-const languageFromLocale = {
-    en: () => <FormattedMessage id="en" defaultMessage="English" />,
-    es: () => <FormattedMessage id="es" defaultMessage="Spanish" />,
-    pl: () => <FormattedMessage id="pl" defaultMessage="Polish" />
-};
-
 const polishSite = 'https://openstax.pl/podreczniki';
 
-const NoLanguage = () => null;
-
-export function useLanguageText(locale) {
-    return React.useMemo(
-        () => languageFromLocale[locale] || NoLanguage,
-        [locale]
-    );
-}
-
 export function LanguageLink({locale, slug}) {
     const {setLanguage} = useLanguageContext();
     const onClick = React.useCallback((event) => {
         event.preventDefault();
         setLanguage(locale);
     }, [locale, setLanguage]);
-    const LanguageText = useLanguageText(locale);
     const href = slug ? `/subjects/${slug}/` : locale;
+    const props = locale === 'pl' ? {href: polishSite, target: '_blank'} : {href, onClick};
+
+    return (<a {...props}><LanguageText locale={locale} /></a>);
+}
 
-    // Magic: handle Polish specially
-    if (locale === 'pl') {
-        return (
-            // eslint-disable-next-line react/jsx-no-target-blank
-            <a href={polishSite} target="_blank">
-                <LanguageText />
-            </a>
-        );
+// Provide a fallback so ancient browsers don't outright fail
+function LanguageText({locale}) {
+    if (Intl.DisplayNames) {
+        return (<LanguageTextUsingIntl locale={locale} />);
     }
+    return locale;
+}
+
+function LanguageTextUsingIntl({locale}) {
+    const {language} = useLanguageContext();
+    const languageName = React.useMemo(
+        () => new Intl.DisplayNames([language], {type: 'language'}),
+        [language]
+    );
 
     return (
-        <a href={href} onClick={onClick}>
-            <LanguageText />
-        </a>
+        <React.Fragment>
+            {languageName.of(locale)}
+        </React.Fragment>
     );
 }
 
@@ -75,12 +67,10 @@ export function LanguageSelectorWrapper({children}) {
 export default function LanguageSelector({
     LeadIn, otherLocales=[], LinkPresentation=LanguageLink, addPolish=false
 }) {
-    const {language} = useLanguageContext();
-    const LanguageText = useLanguageText(language);
-
     if (addPolish) {
         otherLocales.push('pl');
     }
+    const {language} = useLanguageContext();
 
     if (otherLocales.length < 1) {
         return null;
@@ -90,7 +80,7 @@ export default function LanguageSelector({
         <LanguageSelectorWrapper>
             <LeadIn />
             {' '}
-            <LanguageText />
+            <LanguageText locale={language} />
             {
                 otherLocales.map(
                     (lo) => <AnotherLanguage key={lo} locale={lo} LinkPresentation={LinkPresentation} />

diff --git a/src/app/lang/en.js b/src/app/lang/en.js
@@ -1,8 +1,5 @@
 export default {
-    en: 'English',
-    es: 'Spanish',
     and: 'and',
-    pl: 'Polish',
     option: 'option',
     options: 'options',
     fewer: 'fewer',

diff --git a/src/app/lang/es.js b/src/app/lang/es.js
@@ -1,7 +1,4 @@
 export default {
-    en: 'inglés',
-    es: 'español',
-    pl: 'polaco',
     and: 'y',
     option: 'opción',
     options: 'opciones',