Fix language names (#580)

* Fix language names

* Remove translations which are less than 70% completed, simplify localization code

* address review comment

Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

lemmy-translations

@@ -1 +1 @@
-Subproject commit 0d63b5affe2273bb88b3593cdc13e4bb0f4d2d5d
+Subproject commit b18bfc1a8d512d081056cf5aa1f422e4710ef683

package.json

@@ -74,7 +74,6 @@
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "import-sort-style-module": "^6.0.0",
-    "iso-639-1": "^2.1.10",
     "lemmy-js-client": "0.15.1-rc.1",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.4.5",

src/shared/components/app/navbar.tsx

@@ -18,7 +18,7 @@ import { UserService, WebSocketService } from "../../services";
 import {
   authField,
   donateLemmyUrl,
-  getLanguage,
+  getLanguages,
   isBrowser,
   notifyComment,
   notifyPrivateMessage,
@@ -612,7 +612,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
       setTheme(
         UserService.Instance.myUserInfo.local_user_view.local_user.theme
       );
-      i18n.changeLanguage(getLanguage());
+      i18n.changeLanguage(getLanguages()[0]);
       this.state.isLoggedIn = true;
       this.setState(this.state);
     } else if (op == UserOperation.CreateComment) {

src/shared/components/common/moment-time.tsx

@@ -1,7 +1,7 @@
 import { Component } from "inferno";
 import moment from "moment";
 import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, getMomentLanguage } from "../../utils";
+import { capitalizeFirstLetter, getLanguages } from "../../utils";
 import { Icon } from "./icon";
 
 interface MomentTimeProps {
@@ -18,7 +18,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
-    let lang = getMomentLanguage();
+    let lang = getLanguages();
 
     moment.locale(lang);
   }

src/shared/components/person/settings.tsx

@@ -18,7 +18,7 @@ import {
   UserOperation,
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
-import { i18n } from "../../i18next";
+import { i18n, languages } from "../../i18next";
 import { UserService, WebSocketService } from "../../services";
 import {
   authField,
@@ -30,10 +30,8 @@ import {
   elementUrl,
   fetchCommunities,
   fetchUsers,
-  getLanguage,
+  getLanguages,
-  getNativeLanguageName,
   isBrowser,
-  languages,
   personSelectName,
   personToChoice,
   setIsoData,
@@ -526,9 +524,7 @@ export class Settings extends Component<any, SettingsState> {
                 {languages
                   .sort((a, b) => a.code.localeCompare(b.code))
                   .map(lang => (
-                    <option value={lang.code}>
+                    <option value={lang.code}>{lang.name}</option>
-                      {getNativeLanguageName(lang.code)}
-                    </option>
                   ))}
               </select>
             </div>
@@ -935,7 +931,7 @@ export class Settings extends Component<any, SettingsState> {
 
   handleLangChange(i: Settings, event: any) {
     i.state.saveUserSettingsForm.lang = event.target.value;
-    i18n.changeLanguage(getLanguage(i.state.saveUserSettingsForm.lang));
+    i18n.changeLanguage(getLanguages(i.state.saveUserSettingsForm.lang)[0]);
     i.setState(i.state);
   }
 

src/shared/i18next.ts

@@ -1,11 +1,8 @@
-import i18next, { i18nTyped } from "i18next";
+import i18next, { i18nTyped, Resource } from "i18next";
 import { ar } from "./translations/ar";
-import { as } from "./translations/as";
 import { bg } from "./translations/bg";
-import { bn } from "./translations/bn";
 import { ca } from "./translations/ca";
 import { cs } from "./translations/cs";
-import { cy } from "./translations/cy";
 import { da } from "./translations/da";
 import { de } from "./translations/de";
 import { el } from "./translations/el";
@@ -18,88 +15,57 @@ import { fi } from "./translations/fi";
 import { fr } from "./translations/fr";
 import { ga } from "./translations/ga";
 import { gl } from "./translations/gl";
-import { hi } from "./translations/hi";
 import { hr } from "./translations/hr";
-import { hu } from "./translations/hu";
 import { id } from "./translations/id";
 import { it } from "./translations/it";
 import { ja } from "./translations/ja";
-import { ka } from "./translations/ka";
-import { km } from "./translations/km";
 import { ko } from "./translations/ko";
-import { lt } from "./translations/lt";
-import { ml } from "./translations/ml";
-import { mnc } from "./translations/mnc";
-import { nb_NO } from "./translations/nb_NO";
 import { nl } from "./translations/nl";
-import { oc } from "./translations/oc";
 import { pl } from "./translations/pl";
 import { pt } from "./translations/pt";
 import { pt_BR } from "./translations/pt_BR";
 import { ru } from "./translations/ru";
-import { sk } from "./translations/sk";
-import { sq } from "./translations/sq";
-import { sr_Latn } from "./translations/sr_Latn";
 import { sv } from "./translations/sv";
-import { th } from "./translations/th";
-import { tr } from "./translations/tr";
-import { uk } from "./translations/uk";
 import { vi } from "./translations/vi";
 import { zh } from "./translations/zh";
 import { zh_Hant } from "./translations/zh_Hant";
-import { getLanguage } from "./utils";
+import { getLanguages } from "./utils";
 
-// https://github.com/nimbusec-oss/inferno-i18next/blob/master/tests/T.test.js#L66
+export const languages = [
-const resources = {
+  { resource: ar, code: "ar", name: "العربية" },
-  en,
+  { resource: bg, code: "bg", name: "Български" },
-  el,
+  { resource: ca, code: "ca", name: "Català" },
-  eu,
+  { resource: cs, code: "cs", name: "Česky" },
-  eo,
+  { resource: da, code: "da", name: "Dansk" },
-  es,
+  { resource: de, code: "de", name: "Deutsch" },
-  ka,
+  { resource: el, code: "el", name: "Ελληνικά" },
-  hi,
+  { resource: en, code: "en", name: "English" },
-  de,
+  { resource: eo, code: "eo", name: "Esperanto" },
-  zh,
+  { resource: es, code: "es", name: "Español" },
-  fr,
+  { resource: eu, code: "eu", name: "Euskara" },
-  sv,
+  { resource: fa, code: "fa", name: "فارسی" },
-  ru,
+  { resource: fi, code: "fi", name: "Suomi" },
-  nl,
+  { resource: fr, code: "fr", name: "Français" },
-  it,
+  { resource: ga, code: "ga", name: "Gaeilge" },
-  fi,
+  { resource: gl, code: "gl", name: "Galego" },
-  ca,
+  { resource: hr, code: "hr", name: "Hrvatski" },
-  fa,
+  { resource: id, code: "id", name: "Bahasa Indonesia" },
-  pl,
+  { resource: it, code: "it", name: "Italiano" },
-  pt_BR,
+  { resource: ja, code: "ja", name: "日本語" },
-  ja,
+  { resource: ko, code: "ko", name: "한국어" },
-  gl,
+  { resource: nl, code: "nl", name: "Nederlands" },
-  tr,
+  { resource: pl, code: "pl", name: "Polski" },
-  hu,
+  { resource: pt, code: "pt", name: "Português" },
-  uk,
+  { resource: pt_BR, code: "pt_BR", name: "Português (Brasil)" },
-  sq,
+  { resource: ru, code: "ru", name: "Русский" },
-  km,
+  { resource: sv, code: "sv", name: "Svenska" },
-  ga,
+  { resource: vi, code: "vi", name: "Tiếng Việt" },
-  sr_Latn,
+  { resource: zh, code: "zh", name: "中文" },
-  da,
+  { resource: zh_Hant, code: "zh_Hant", name: "文言" },
-  oc,
+];
-  hr,
+
-  th,
+const resources: Resource = {};
-  bg,
+languages.forEach(l => (resources[l.code] = l.resource));
-  ar,
-  ko,
-  id,
-  nb_NO,
-  zh_Hant,
-  cy,
-  mnc,
-  sk,
-  vi,
-  pt,
-  bn,
-  ml,
-  cs,
-  as,
-  lt,
-};
 
 function format(value: any, format: any): any {
   return format === "uppercase" ? value.toUpperCase() : value;
@@ -109,14 +75,11 @@ i18next.init({
   debug: false,
   compatibilityJSON: "v3",
   // load: 'languageOnly',
-
   // initImmediate: false,
-  lng: getLanguage(),
+  lng: getLanguages()[0],
   fallbackLng: "en",
   resources,
   interpolation: { format },
 });
 
 export const i18n = i18next as i18nTyped;
-
-export { resources };

src/shared/utils.ts

@@ -1,5 +1,4 @@
 import emojiShortName from "emoji-short-name";
-import ISO6391 from "iso-639-1";
 import {
   BlockCommunityResponse,
   BlockPersonResponse,
@@ -35,51 +34,12 @@ import markdown_it_html5_embed from "markdown-it-html5-embed";
 import markdown_it_sub from "markdown-it-sub";
 import markdown_it_sup from "markdown-it-sup";
 import moment from "moment";
-import "moment/locale/bg";
-import "moment/locale/bn";
-import "moment/locale/ca";
-import "moment/locale/cs";
-import "moment/locale/cy";
-import "moment/locale/da";
-import "moment/locale/de";
-import "moment/locale/el";
-import "moment/locale/eo";
-import "moment/locale/es";
-import "moment/locale/eu";
-import "moment/locale/fa";
-import "moment/locale/fi";
-import "moment/locale/fr";
-import "moment/locale/ga";
-import "moment/locale/gl";
-import "moment/locale/hi";
-import "moment/locale/hr";
-import "moment/locale/hu";
-import "moment/locale/id";
-import "moment/locale/it";
-import "moment/locale/ja";
-import "moment/locale/ka";
-import "moment/locale/km";
-import "moment/locale/ko";
-import "moment/locale/ml";
-import "moment/locale/nb";
-import "moment/locale/nl";
-import "moment/locale/pl";
-import "moment/locale/pt-br";
-import "moment/locale/ru";
-import "moment/locale/sk";
-import "moment/locale/sq";
-import "moment/locale/sr";
-import "moment/locale/sv";
-import "moment/locale/tr";
-import "moment/locale/uk";
-import "moment/locale/vi";
-import "moment/locale/zh-cn";
 import { Subscription } from "rxjs";
 import { delay, retryWhen, take } from "rxjs/operators";
 import tippy from "tippy.js";
 import Toastify from "toastify-js";
 import { httpBase } from "./env";
-import { i18n } from "./i18next";
+import { i18n, languages } from "./i18next";
 import {
   CommentNode as CommentNodeI,
   CommentSortType,
@@ -115,57 +75,6 @@ export const postRefetchSeconds: number = 60 * 1000;
 export const fetchLimit = 20;
 export const mentionDropdownFetchLimit = 10;
 
-export const languages = [
-  { code: "ca" },
-  { code: "en" },
-  { code: "el" },
-  { code: "eu" },
-  { code: "eo" },
-  { code: "es" },
-  { code: "da" },
-  { code: "de" },
-  { code: "ga" },
-  { code: "gl" },
-  { code: "hr" },
-  { code: "hu" },
-  { code: "id" },
-  { code: "ka" },
-  { code: "ko" },
-  { code: "km" },
-  { code: "hi" },
-  { code: "fa" },
-  { code: "ja" },
-  { code: "oc" },
-  { code: "nb_NO" },
-  { code: "pl" },
-  { code: "pt_BR" },
-  { code: "zh" },
-  { code: "fi" },
-  { code: "fr" },
-  { code: "sv" },
-  { code: "sq" },
-  { code: "sr_Latn" },
-  { code: "th" },
-  { code: "tr" },
-  { code: "uk" },
-  { code: "ru" },
-  { code: "nl" },
-  { code: "it" },
-  { code: "bg" },
-  { code: "zh_Hant" },
-  { code: "cy" },
-  { code: "mnc" },
-  { code: "sk" },
-  { code: "vi" },
-  { code: "pt" },
-  { code: "ar" },
-  { code: "bn" },
-  { code: "ml" },
-  { code: "cs" },
-  { code: "as" },
-  { code: "lt" },
-];
-
 export const themes = [
   "litera",
   "materia",
@@ -428,20 +337,7 @@ export function debounce(func: any, wait = 1000, immediate = false) {
   };
 }
 
-export function getNativeLanguageName(code: string): string {
+export function getLanguages(override?: string): string[] {
-  let [isoCode, qualifier] = code.split("_");
-
-  let native = ISO6391.getNativeName(isoCode) || code;
-
-  if (qualifier) {
-    return `${native}_${qualifier}`;
-  } else {
-    return native;
-  }
-}
-
-// TODO
-export function getLanguage(override?: string): string {
   let myUserInfo = UserService.Instance.myUserInfo;
   let lang =
     override ||
@@ -450,13 +346,13 @@ export function getLanguage(override?: string): string {
       : "browser");
 
   if (lang == "browser" && isBrowser()) {
-    return getBrowserLanguage();
+    return getBrowserLanguages();
   } else {
-    return lang;
+    return [lang];
   }
 }
 
-export function getBrowserLanguage(): string {
+function getBrowserLanguages(): string[] {
   // Intersect lemmy's langs, with the browser langs
   let langs = languages ? languages.map(l => l.code) : ["en"];
 
@@ -464,105 +360,7 @@ export function getBrowserLanguage(): string {
   let allowedLangs = navigator.languages
     .concat("en")
     .filter(v => langs.includes(v));
-  return allowedLangs[0];
+  return allowedLangs;
-}
-
-export function getMomentLanguage(): string {
-  let lang = getLanguage();
-  if (lang.startsWith("zh")) {
-    lang = "zh-cn";
-  } else if (lang.startsWith("sv")) {
-    lang = "sv";
-  } else if (lang.startsWith("fr")) {
-    lang = "fr";
-  } else if (lang.startsWith("de")) {
-    lang = "de";
-  } else if (lang.startsWith("ru")) {
-    lang = "ru";
-  } else if (lang.startsWith("es")) {
-    lang = "es";
-  } else if (lang.startsWith("eo")) {
-    lang = "eo";
-  } else if (lang.startsWith("nl")) {
-    lang = "nl";
-  } else if (lang.startsWith("it")) {
-    lang = "it";
-  } else if (lang.startsWith("fi")) {
-    lang = "fi";
-  } else if (lang.startsWith("ca")) {
-    lang = "ca";
-  } else if (lang.startsWith("fa")) {
-    lang = "fa";
-  } else if (lang.startsWith("pl")) {
-    lang = "pl";
-  } else if (lang.startsWith("pt_BR")) {
-    lang = "pt-br";
-  } else if (lang.startsWith("ja")) {
-    lang = "ja";
-  } else if (lang.startsWith("ka")) {
-    lang = "ka";
-  } else if (lang.startsWith("hi")) {
-    lang = "hi";
-  } else if (lang.startsWith("el")) {
-    lang = "el";
-  } else if (lang.startsWith("eu")) {
-    lang = "eu";
-  } else if (lang.startsWith("gl")) {
-    lang = "gl";
-  } else if (lang.startsWith("tr")) {
-    lang = "tr";
-  } else if (lang.startsWith("hu")) {
-    lang = "hu";
-  } else if (lang.startsWith("uk")) {
-    lang = "uk";
-  } else if (lang.startsWith("sq")) {
-    lang = "sq";
-  } else if (lang.startsWith("km")) {
-    lang = "km";
-  } else if (lang.startsWith("ga")) {
-    lang = "ga";
-  } else if (lang.startsWith("sr")) {
-    lang = "sr";
-  } else if (lang.startsWith("ko")) {
-    lang = "ko";
-  } else if (lang.startsWith("da")) {
-    lang = "da";
-  } else if (lang.startsWith("oc")) {
-    lang = "oc";
-  } else if (lang.startsWith("hr")) {
-    lang = "hr";
-  } else if (lang.startsWith("th")) {
-    lang = "th";
-  } else if (lang.startsWith("bg")) {
-    lang = "bg";
-  } else if (lang.startsWith("id")) {
-    lang = "id";
-  } else if (lang.startsWith("nb")) {
-    lang = "nb";
-  } else if (lang.startsWith("cy")) {
-    lang = "cy";
-  } else if (lang.startsWith("sk")) {
-    lang = "sk";
-  } else if (lang.startsWith("vi")) {
-    lang = "vi";
-  } else if (lang.startsWith("pt")) {
-    lang = "pt";
-  } else if (lang.startsWith("ar")) {
-    lang = "ar";
-  } else if (lang.startsWith("bn")) {
-    lang = "bn";
-  } else if (lang.startsWith("ml")) {
-    lang = "ml";
-  } else if (lang.startsWith("cs")) {
-    lang = "cs";
-  } else if (lang.startsWith("as")) {
-    lang = "as";
-  } else if (lang.startsWith("lt")) {
-    lang = "lt";
-  } else {
-    lang = "en";
-  }
-  return lang;
 }
 
 export function setTheme(theme: string, forceReload = false) {
@@ -1519,7 +1317,7 @@ export function personSelectName(pvs: PersonViewSafe): string {
 
 export function initializeSite(site: GetSiteResponse) {
   UserService.Instance.myUserInfo = site.my_user;
-  i18n.changeLanguage(getLanguage());
+  i18n.changeLanguage(getLanguages()[0]);
 }
 
 const SHORTNUM_SI_FORMAT = new Intl.NumberFormat("en-US", {

yarn.lock

@@ -4464,11 +4464,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-iso-639-1@^2.1.10:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/iso-639-1/-/iso-639-1-2.1.11.tgz#a928a7c71025321258bd46e03ae85e49ded5dbdc"
-  integrity sha512-WDF2XWfw1GuPvjn3YEn1+gFGF+72ZltVcjNhaWwmgvveN+rTy3XzWYwgIp/Y8CSZYclNvJ4Vqeh5byubiXCzPw==
-
 isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"