fix: Use Interface Language instead

src/shared/components/comment/comment-form.tsx

@@ -1,5 +1,5 @@
 import { myAuthRequired } from "@utils/app";
-import getUserPrimaryLanguage from "@utils/app/user-primary-language";
+import getUserInterfaceLangId from "@utils/app/user-interface-language";
 import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
@@ -41,9 +41,10 @@ export class CommentForm extends Component<CommentFormProps, any> {
           : undefined
         : undefined;
 
-    const userPrimaryLanguage = getUserPrimaryLanguage(
+    const userInterfaceLangId = getUserInterfaceLangId({
-      UserService?.Instance?.myUserInfo
+      myUserInfo: UserService.Instance.myUserInfo,
-    );
+      allLanguages: this.props.allLanguages,
+    });
 
     return (
       <div
@@ -54,7 +55,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
         {UserService.Instance.myUserInfo ? (
           <MarkdownTextArea
             initialContent={initialContent}
-            initialLanguageId={userPrimaryLanguage}
+            initialLanguageId={userInterfaceLangId}
             showLanguage
             buttonTitle={this.buttonTitle}
             finished={this.props.finished}

src/shared/components/post/post-form.tsx

@@ -4,7 +4,7 @@ import {
   myAuth,
   myAuthRequired,
 } from "@utils/app";
-import getUserPrimaryLanguage from "@utils/app/user-primary-language";
+import getUserInterfaceLangId from "@utils/app/user-interface-language";
 import {
   capitalizeFirstLetter,
   debounce,
@@ -324,12 +324,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   }
 
   render() {
-    const userPrimaryLanguage = getUserPrimaryLanguage(
-      UserService?.Instance?.myUserInfo
-    );
-
     const url = this.state.form.url;
 
+    const userInterfaceLangId = getUserInterfaceLangId({
+      myUserInfo: UserService.Instance.myUserInfo,
+      allLanguages: this.props.allLanguages,
+    });
+
     return (
       <form className="post-form" onSubmit={linkEvent(this, handlePostSubmit)}>
         <NavigationPrompt
@@ -496,7 +497,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         </div>
         <LanguageSelect
           allLanguages={this.props.allLanguages}
-          selectedLanguageIds={[userPrimaryLanguage]}
+          selectedLanguageIds={[userInterfaceLangId]}
           siteLanguages={this.props.siteLanguages}
           multiple={false}
           onChange={this.handleLanguageChange}

src/shared/utils/app/index.ts

@@ -53,7 +53,7 @@ import showScores from "./show-scores";
 import siteBannerCss from "./site-banner-css";
 import updateCommunityBlock from "./update-community-block";
 import updatePersonBlock from "./update-person-block";
-import getUserPrimaryLanguage from "./user-primary-language";
+import getUserInterfaceLangId from "./user-interface-language";
 
 export {
   buildCommentsTree,
@@ -88,7 +88,7 @@ export {
   getIdFromProps,
   getRecipientIdFromProps,
   getUpdatedSearchId,
-  getUserPrimaryLanguage,
+  getUserInterfaceLangId,
   initializeSite,
   insertCommentIntoTree,
   isAuthPath,

src/shared/utils/app/user-interface-language.ts

@@ -0,0 +1,22 @@
+import { Language, MyUserInfo } from "lemmy-js-client";
+import { I18NextService } from "../../services/I18NextService";
+
+export default function getUserInterfaceLanguageId({
+  myUserInfo,
+  allLanguages,
+}: {
+  myUserInfo: MyUserInfo;
+  allLanguages: Language[];
+}): number {
+  // Get the string of the browser- or user-defined language, like en-US
+  const i18nLang = I18NextService.i18n.language;
+
+  // Find the Language object with a code that matches the initial characters of
+  // this string
+  const userLang = allLanguages.find(lang => {
+    return i18nLang.indexOf(lang.code) === 0;
+  });
+
+  // Return the ID of that language object
+  return userLang.id || 0;
+}

src/shared/utils/app/user-primary-language.ts

@@ -1,9 +0,0 @@
-import { UserService } from "../../services";
-
-export default function getUserPrimaryLanguage(
-  myUserInfo = UserService.Instance.myUserInfo
-): number {
-  // Get first language in discussion languages array that isn't equal to "0",
-  // which is the language selection "Undetermined"
-  return myUserInfo?.discussion_languages.find(lang => lang !== 0) || 0;
-}