Partially done with language tagging. #783

.prettierrc.js

@@ -1,4 +0,0 @@
-module.exports = Object.assign(require("eslint-plugin-prettier"), {
-  arrowParens: "avoid",
-  semi: true,
-});

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "semi": true
+}

package.json

@@ -9,7 +9,7 @@
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
     "dev": "yarn start",
-    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
+    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src && prettier --check 'src/**/*.tsx'",
     "prebuild:dev": "yarn clean && node generate_translations.js",
     "prebuild:prod": "yarn clean && node generate_translations.js",
     "prepare": "husky install",
@@ -47,7 +47,7 @@
     "inferno-server": "^8.0.3",
     "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.17.0-rc.54",
+    "lemmy-js-client": "0.17.0-rc.55",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "markdown-it-footnote": "^3.0.3",

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

@@ -35,6 +35,7 @@ interface CommentFormProps {
   focus?: boolean;
   onReplyCancel?(): any;
   allLanguages: Language[];
+  siteLanguages: number[];
 }
 
 interface CommentFormState {
@@ -81,7 +82,13 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     let selectedLang = this.props.node
       .left()
       .map(n => n.comment_view.comment.language_id)
-      .or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo));
+      .or(
+        myFirstDiscussionLanguageId(
+          this.props.allLanguages,
+          this.props.siteLanguages,
+          UserService.Instance.myUserInfo
+        )
+      );
 
     return (
       <div className="mb-3">
@@ -100,6 +107,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
             onReplyCancel={this.handleReplyCancel}
             placeholder={Some(i18n.t("comment_here"))}
             allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
           />
         ) : (
           <div className="alert alert-warning" role="alert">

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

@@ -104,6 +104,7 @@ interface CommentNodeProps {
   enableDownvotes: boolean;
   viewType: CommentViewType;
   allLanguages: Language[];
+  siteLanguages: number[];
   hideImages?: boolean;
 }
 
@@ -329,6 +330,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 disabled={this.props.locked}
                 focus
                 allLanguages={this.props.allLanguages}
+                siteLanguages={this.props.siteLanguages}
               />
             )}
             {!this.state.showEdit && !this.state.collapsed && (
@@ -1015,6 +1017,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             disabled={this.props.locked}
             focus
             allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
           />
         )}
         {!this.state.collapsed && node.children.length > 0 && (
@@ -1027,6 +1030,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             enableDownvotes={this.props.enableDownvotes}
             viewType={this.props.viewType}
             allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
             hideImages={this.props.hideImages}
           />
         )}

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

@@ -24,6 +24,7 @@ interface CommentNodesProps {
   enableDownvotes?: boolean;
   viewType: CommentViewType;
   allLanguages: Language[];
+  siteLanguages: number[];
   hideImages?: boolean;
 }
 
@@ -55,6 +56,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
             enableDownvotes={this.props.enableDownvotes}
             viewType={this.props.viewType}
             allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
             hideImages={this.props.hideImages}
           />
         ))}

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

@@ -65,6 +65,7 @@ export class CommentReport extends Component<CommentReportProps, any> {
           viewOnly={true}
           showCommunity={true}
           allLanguages={[]}
+          siteLanguages={[]}
           hideImages
         />
         <div>

src/shared/components/common/language-select.tsx

@@ -3,14 +3,18 @@ import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { Language } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { randomStr } from "../../utils";
+import { UserService } from "../../services/UserService";
+import { randomStr, selectableLanguages } from "../../utils";
 import { Icon } from "./icon";
 
 interface LanguageSelectProps {
   allLanguages: Language[];
+  siteLanguages: number[];
   selectedLanguageIds: Option<number[]>;
   multiple: boolean;
   onChange(val: number[]): any;
+  showAll?: boolean;
+  showSite?: boolean;
 }
 
 export class LanguageSelect extends Component<LanguageSelectProps, any> {
@@ -43,6 +47,13 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
 
   render() {
     let selectedLangs = this.props.selectedLanguageIds;
+    let filteredLangs = selectableLanguages(
+      this.props.allLanguages,
+      this.props.siteLanguages,
+      this.props.showAll,
+      this.props.showSite,
+      UserService.Instance.myUserInfo
+    );
 
     return (
       <div className="form-group row">
@@ -68,7 +79,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
             aria-label="action"
             multiple={this.props.multiple}
           >
-            {this.props.allLanguages.map(l => (
+            {filteredLangs.map(l => (
               <option
                 key={l.id}
                 value={l.id}

src/shared/components/common/markdown-textarea.tsx

@@ -41,6 +41,7 @@ interface MarkdownTextAreaProps {
     languageId: Option<number>;
   }): any;
   allLanguages: Language[];
+  siteLanguages: number[];
 }
 
 interface MarkdownTextAreaState {
@@ -170,6 +171,7 @@ export class MarkdownTextArea extends Component<
               <LanguageSelect
                 allLanguages={this.props.allLanguages}
                 selectedLanguageIds={this.state.languageId.map(Array.of)}
+                siteLanguages={this.props.siteLanguages}
                 multiple={false}
                 onChange={this.handleLanguageChange}
               />

src/shared/components/common/registration-application.tsx

@@ -102,6 +102,7 @@ export class RegistrationApplication extends Component<
                 maxLength={None}
                 hideNavigationWarnings
                 allLanguages={[]}
+                siteLanguages={[]}
               />
             </div>
           </div>

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

@@ -6,6 +6,7 @@ import {
   CommunityView,
   CreateCommunity,
   EditCommunity,
+  Language,
   toUndefined,
   UserOperation,
   wsJsonToRes,
@@ -23,10 +24,14 @@ import {
 } from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
+import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 
 interface CommunityFormProps {
   community_view: Option<CommunityView>; // If a community is given, that means this is an edit
+  allLanguages: Language[];
+  siteLanguages: number[];
+  communityLanguages: Option<number[]>;
   onCancel?(): any;
   onCreate?(community: CommunityView): any;
   onEdit?(community: CommunityView): any;
@@ -50,6 +55,7 @@ export class CommunityForm extends Component<
       name: undefined,
       title: undefined,
       description: None,
+      discussion_languages: this.props.communityLanguages,
       nsfw: None,
       icon: None,
       banner: None,
@@ -73,6 +79,9 @@ export class CommunityForm extends Component<
     this.handleBannerUpload = this.handleBannerUpload.bind(this);
     this.handleBannerRemove = this.handleBannerRemove.bind(this);
 
+    this.handleDiscussionLanguageChange =
+      this.handleDiscussionLanguageChange.bind(this);
+
     this.parseMessage = this.parseMessage.bind(this);
     this.subscription = wsSubscribe(this.parseMessage);
 
@@ -90,6 +99,7 @@ export class CommunityForm extends Component<
           posting_restricted_to_mods: Some(
             cv.community.posting_restricted_to_mods
           ),
+          discussion_languages: this.props.communityLanguages,
           auth: undefined,
         }),
       };
@@ -218,6 +228,7 @@ export class CommunityForm extends Component<
                 maxLength={None}
                 onContentChange={this.handleCommunityDescriptionChange}
                 allLanguages={[]}
+                siteLanguages={[]}
               />
             </div>
           </div>
@@ -261,6 +272,14 @@ export class CommunityForm extends Component<
               </div>
             </div>
           </div>
+          <LanguageSelect
+            allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
+            showSite
+            selectedLanguageIds={this.state.communityForm.discussion_languages}
+            multiple={true}
+            onChange={this.handleDiscussionLanguageChange}
+          />
           <div className="form-group row">
             <div className="col-12">
               <button
@@ -308,6 +327,7 @@ export class CommunityForm extends Component<
           banner: cForm.banner,
           nsfw: cForm.nsfw,
           posting_restricted_to_mods: cForm.posting_restricted_to_mods,
+          discussion_languages: cForm.discussion_languages,
           auth: cForm.auth,
         });
 
@@ -368,6 +388,10 @@ export class CommunityForm extends Component<
     this.setState(s => ((s.communityForm.banner = Some("")), s));
   }
 
+  handleDiscussionLanguageChange(val: number[]) {
+    this.setState(s => ((s.communityForm.discussion_languages = Some(val)), s));
+  }
+
   parseMessage(msg: any) {
     let op = wsUserOp(msg);
     console.log(msg);

src/shared/components/community/community.tsx

@@ -278,6 +278,16 @@ export class Community extends Component<any, State> {
   }
 
   render() {
+    // For some reason, this returns an empty vec if it matches the site langs
+    let communityLangs = this.state.communityRes.map(r => {
+      let langs = r.discussion_languages;
+      if (langs.length == 0) {
+        return this.state.siteRes.all_languages.map(l => l.id);
+      } else {
+        return langs;
+      }
+    });
+
     return (
       <div className="container-lg">
         {this.state.communityLoading ? (
@@ -321,6 +331,12 @@ export class Community extends Component<any, State> {
                             admins={this.state.siteRes.admins}
                             online={res.online}
                             enableNsfw={enableNsfw(this.state.siteRes)}
+                            editable
+                            allLanguages={this.state.siteRes.all_languages}
+                            siteLanguages={
+                              this.state.siteRes.discussion_languages
+                            }
+                            communityLanguages={communityLangs}
                           />
                           {!res.community_view.community.local &&
                             res.site.match({
@@ -352,6 +368,10 @@ export class Community extends Component<any, State> {
                       admins={this.state.siteRes.admins}
                       online={res.online}
                       enableNsfw={enableNsfw(this.state.siteRes)}
+                      editable
+                      allLanguages={this.state.siteRes.all_languages}
+                      siteLanguages={this.state.siteRes.discussion_languages}
+                      communityLanguages={communityLangs}
                     />
                     {!res.community_view.community.local &&
                       res.site.match({
@@ -390,6 +410,7 @@ export class Community extends Component<any, State> {
           enableDownvotes={enableDownvotes(this.state.siteRes)}
           enableNsfw={enableNsfw(this.state.siteRes)}
           allLanguages={this.state.siteRes.all_languages}
+          siteLanguages={this.state.siteRes.discussion_languages}
         />
       )
     ) : this.state.commentsLoading ? (
@@ -407,6 +428,7 @@ export class Community extends Component<any, State> {
         admins={Some(this.state.siteRes.admins)}
         maxCommentsShown={None}
         allLanguages={this.state.siteRes.all_languages}
+        siteLanguages={this.state.siteRes.discussion_languages}
       />
     );
   }
@@ -557,6 +579,7 @@ export class Community extends Component<any, State> {
       op == UserOperation.DeleteCommunity ||
       op == UserOperation.RemoveCommunity
     ) {
+      // TODO this also needs to update the discussion_languages live
       let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
       this.state.communityRes.match({
         some: res => (res.community_view = data.community_view),

src/shared/components/community/create-community.tsx

@@ -1,4 +1,4 @@
-import { None } from "@sniptt/monads";
+import { None, Some } from "@sniptt/monads";
 import { Component } from "inferno";
 import { CommunityView, GetSiteResponse } from "lemmy-js-client";
 import { Subscription } from "rxjs";
@@ -74,6 +74,11 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
                 community_view={None}
                 onCreate={this.handleCommunityCreate}
                 enableNsfw={enableNsfw(this.state.siteRes)}
+                allLanguages={this.state.siteRes.all_languages}
+                siteLanguages={this.state.siteRes.discussion_languages}
+                communityLanguages={Some(
+                  this.state.siteRes.discussion_languages
+                )}
               />
             </div>
           </div>

src/shared/components/community/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   CommunityView,
   DeleteCommunity,
   FollowCommunity,
+  Language,
   PersonViewSafe,
   PurgeCommunity,
   RemoveCommunity,
@@ -36,9 +37,13 @@ interface SidebarProps {
   community_view: CommunityView;
   moderators: CommunityModeratorView[];
   admins: PersonViewSafe[];
+  allLanguages: Language[];
+  siteLanguages: number[];
+  communityLanguages: Option<number[]>;
   online: number;
   enableNsfw?: boolean;
   showIcon?: boolean;
+  editable?: boolean;
 }
 
 interface SidebarState {
@@ -79,6 +84,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         ) : (
           <CommunityForm
             community_view={Some(this.props.community_view)}
+            allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
+            communityLanguages={this.props.communityLanguages}
             onEdit={this.handleEditCommunity}
             onCancel={this.handleEditCancel}
             enableNsfw={this.props.enableNsfw}
@@ -94,7 +102,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         <div className="card border-secondary mb-3">
           <div className="card-body">
             {this.communityTitle()}
-            {this.adminButtons()}
+            {this.props.editable && this.adminButtons()}
             {this.subscribe()}
             {this.canPost && this.createPost()}
             {this.blockCommunity()}

src/shared/components/home/home.tsx

@@ -140,7 +140,7 @@ export class Home extends Component<any, HomeState> {
     dataType: getDataTypeFromProps(this.props),
     sort: getSortTypeFromProps(this.props),
     page: getPageFromProps(this.props),
-    tagline: None
+    tagline: None,
   };
 
   constructor(props: any, context: any) {
@@ -179,7 +179,7 @@ export class Home extends Component<any, HomeState> {
         ...this.state,
         trendingCommunities: trendingRes.communities,
         loading: false,
-        tagline: taglines.map(tls => getRandomFromList(tls).content)
+        tagline: taglines.map(tls => getRandomFromList(tls).content),
       };
     } else {
       this.fetchTrendingCommunities();
@@ -336,7 +336,12 @@ export class Home extends Component<any, HomeState> {
           <div className="row">
             <main role="main" className="col-12 col-md-8">
               {this.state.tagline.match({
-                some: tagline => <div id="tagline" dangerouslySetInnerHTML={mdToHtml(tagline)}></div>,
+                some: tagline => (
+                  <div
+                    id="tagline"
+                    dangerouslySetInnerHTML={mdToHtml(tagline)}
+                  ></div>
+                ),
                 none: <></>,
               })}
               <div className="d-block d-md-none">{this.mobileView()}</div>
@@ -584,6 +589,7 @@ export class Home extends Component<any, HomeState> {
         enableDownvotes={enableDownvotes(this.state.siteRes)}
         enableNsfw={enableNsfw(this.state.siteRes)}
         allLanguages={this.state.siteRes.all_languages}
+        siteLanguages={this.state.siteRes.discussion_languages}
       />
     ) : (
       <CommentNodes
@@ -597,6 +603,7 @@ export class Home extends Component<any, HomeState> {
         showContext
         enableDownvotes={enableDownvotes(this.state.siteRes)}
         allLanguages={this.state.siteRes.all_languages}
+        siteLanguages={this.state.siteRes.discussion_languages}
       />
     );
   }

src/shared/components/home/signup.tsx

@@ -297,6 +297,7 @@ export class Signup extends Component<any, State> {
                   onContentChange={this.handleAnswerChange}
                   hideNavigationWarnings
                   allLanguages={[]}
+                  siteLanguages={[]}
                 />
               </div>
             </div>

src/shared/components/home/site-form.tsx

@@ -272,6 +272,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 onContentChange={this.handleSiteSidebarChange}
                 hideNavigationWarnings
                 allLanguages={[]}
+                siteLanguages={[]}
               />
             </div>
           </div>
@@ -289,6 +290,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 onContentChange={this.handleSiteLegalInfoChange}
                 hideNavigationWarnings
                 allLanguages={[]}
+                siteLanguages={[]}
               />
             </div>
           </div>
@@ -307,6 +309,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   onContentChange={this.handleSiteApplicationQuestionChange}
                   hideNavigationWarnings
                   allLanguages={[]}
+                  siteLanguages={[]}
                 />
               </div>
             </div>
@@ -568,9 +571,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
           <LanguageSelect
             allLanguages={this.props.siteRes.all_languages}
+            siteLanguages={this.props.siteRes.discussion_languages}
             selectedLanguageIds={this.state.siteForm.discussion_languages}
             multiple={true}
             onChange={this.handleDiscussionLanguageChange}
+            showAll
           />
           <div className="form-group row">
             <label
@@ -981,62 +986,60 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               />
             </div>
           </div>
-          {siteSetup && (
+          <div className="form-group row">
-            <div className="form-group row">
+            <h5 className="col-12">{i18n.t("taglines")}</h5>
-              <h5 className="col-12">{i18n.t("taglines")}</h5>
+            <div className="table-responsive col-12">
-              <div className="table-responsive col-12">
+              <table id="taglines_table" className="table table-sm table-hover">
-                <table
+                <thead className="pointer"></thead>
-                  id="taglines_table"
+                <tbody>
-                  className="table table-sm table-hover"
+                  {this.state.siteForm.taglines
-                >
+                    .unwrapOr([])
-                  <thead className="pointer"></thead>
+                    .map((cv, index) => (
-                  <tbody>
+                      <tr key={index}>
-                    {this.state.siteForm.taglines
+                        <td>
-                      .unwrapOr([])
+                          <MarkdownTextArea
-                      .map((cv, index) => (
+                            initialContent={Some(cv)}
-                        <tr key={index}>
+                            initialLanguageId={None}
-                          <td>
+                            placeholder={None}
-                            <MarkdownTextArea
+                            buttonTitle={None}
-                              initialContent={Some(cv)}
+                            maxLength={None}
-                              initialLanguageId={None}
+                            onContentChange={s =>
-                              placeholder={None}
+                              this.handleTaglineChange(this, index, s)
-                              buttonTitle={None}
+                            }
-                              maxLength={None}
+                            hideNavigationWarnings
-                              onContentChange={s =>
+                            allLanguages={this.props.siteRes.all_languages}
-                                this.handleTaglineChange(this, index, s)
+                            siteLanguages={
-                              }
+                              this.props.siteRes.discussion_languages
-                              hideNavigationWarnings
+                            }
-                              allLanguages={this.props.siteRes.all_languages}
+                          />
+                        </td>
+                        <td className="text-right">
+                          <button
+                            className="btn btn-link btn-animate text-muted"
+                            onClick={e =>
+                              this.handleDeleteTaglineClick(this, index, e)
+                            }
+                            data-tippy-content={i18n.t("delete")}
+                            aria-label={i18n.t("delete")}
+                          >
+                            <Icon
+                              icon="trash"
+                              classes={`icon-inline text-danger`}
                             />
-                          </td>
+                          </button>
-                          <td className="text-right">
+                        </td>
-                            <button
+                      </tr>
-                              className="btn btn-link btn-animate text-muted"
+                    ))}
-                              onClick={e =>
+                </tbody>
-                                this.handleDeleteTaglineClick(this, index, e)
+              </table>
-                              }
+              <button
-                              data-tippy-content={i18n.t("delete")}
+                className="btn btn-sm btn-secondary mr-2"
-                              aria-label={i18n.t("delete")}
+                onClick={e => this.handleAddTaglineClick(this, e)}
-                            >
+              >
-                              <Icon
+                {i18n.t("add_tagline")}
-                                icon="trash"
+              </button>
-                                classes={`icon-inline text-danger`}
-                              />
-                            </button>
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-                <button
-                  className="btn btn-sm btn-secondary mr-2"
-                  onClick={e => this.handleAddTaglineClick(this, e)}
-                >
-                  {i18n.t("add_tagline")}
-                </button>
-              </div>
             </div>
-          )}
+          </div>
           <div className="form-group row">
             <div className="col-12">
               <button
@@ -1109,6 +1112,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         allowed_instances: sForm.allowed_instances,
         blocked_instances: sForm.blocked_instances,
         discussion_languages: sForm.discussion_languages,
+        taglines: sForm.taglines,
       });
       WebSocketService.Instance.send(wsClient.createSite(form));
     }

src/shared/components/person/inbox.tsx

@@ -396,6 +396,7 @@ export class Inbox extends Component<any, InboxState> {
             showContext
             enableDownvotes={enableDownvotes(this.state.siteRes)}
             allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
           />
         );
       case ReplyEnum.Mention:
@@ -419,6 +420,7 @@ export class Inbox extends Component<any, InboxState> {
             showContext
             enableDownvotes={enableDownvotes(this.state.siteRes)}
             allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
           />
         );
       case ReplyEnum.Message:
@@ -452,6 +454,7 @@ export class Inbox extends Component<any, InboxState> {
           showContext
           enableDownvotes={enableDownvotes(this.state.siteRes)}
           allLanguages={this.state.siteRes.all_languages}
+          siteLanguages={this.state.siteRes.discussion_languages}
         />
       </div>
     );
@@ -474,6 +477,7 @@ export class Inbox extends Component<any, InboxState> {
             showContext
             enableDownvotes={enableDownvotes(this.state.siteRes)}
             allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
           />
         ))}
       </div>

src/shared/components/person/person-details.tsx

@@ -18,6 +18,7 @@ interface PersonDetailsProps {
   personRes: GetPersonDetailsResponse;
   admins: PersonViewSafe[];
   allLanguages: Language[];
+  siteLanguages: number[];
   page: number;
   limit: number;
   sort: SortType;
@@ -102,6 +103,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
             showContext
             enableDownvotes={this.props.enableDownvotes}
             allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
           />
         );
       }
@@ -118,6 +120,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
             enableDownvotes={this.props.enableDownvotes}
             enableNsfw={this.props.enableNsfw}
             allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
           />
         );
       }
@@ -176,6 +179,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
           showContext
           enableDownvotes={this.props.enableDownvotes}
           allLanguages={this.props.allLanguages}
+          siteLanguages={this.props.siteLanguages}
         />
       </div>
     );
@@ -195,6 +199,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
               enableDownvotes={this.props.enableDownvotes}
               enableNsfw={this.props.enableNsfw}
               allLanguages={this.props.allLanguages}
+              siteLanguages={this.props.siteLanguages}
             />
             <hr className="my-3" />
           </>

src/shared/components/person/profile.tsx

@@ -279,6 +279,7 @@ export class Profile extends Component<any, ProfileState> {
                     view={this.state.view}
                     onPageChange={this.handlePageChange}
                     allLanguages={this.state.siteRes.all_languages}
+                    siteLanguages={this.state.siteRes.discussion_languages}
                   />
                 </div>
 

src/shared/components/person/settings.tsx

@@ -168,7 +168,7 @@ export class Settings extends Component<any, SettingsState> {
           default_sort_type: Some(luv.local_user.default_sort_type),
           default_listing_type: Some(luv.local_user.default_listing_type),
           interface_language: Some(luv.local_user.interface_language),
-          discussion_languages: Some(mui.discussion_languages.map(l => l.id)),
+          discussion_languages: Some(mui.discussion_languages),
           avatar: luv.person.avatar,
           banner: luv.person.banner,
           display_name: luv.person.display_name,
@@ -523,6 +523,7 @@ export class Settings extends Component<any, SettingsState> {
                 buttonTitle={None}
                 hideNavigationWarnings
                 allLanguages={this.state.siteRes.all_languages}
+                siteLanguages={this.state.siteRes.discussion_languages}
               />
             </div>
           </div>
@@ -617,8 +618,10 @@ export class Settings extends Component<any, SettingsState> {
           </div>
           <LanguageSelect
             allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
             selectedLanguageIds={selectedLangs}
             multiple={true}
+            showSite
             onChange={this.handleDiscussionLanguageChange}
           />
           <div className="form-group row">

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

@@ -151,6 +151,7 @@ export class CreatePost extends Component<any, CreatePostState> {
                     enableDownvotes={enableDownvotes(this.state.siteRes)}
                     enableNsfw={enableNsfw(this.state.siteRes)}
                     allLanguages={this.state.siteRes.all_languages}
+                    siteLanguages={this.state.siteRes.discussion_languages}
                   />
                 </div>
               </div>

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

@@ -64,6 +64,7 @@ const MAX_POST_TITLE_LENGTH = 200;
 interface PostFormProps {
   post_view: Option<PostView>; // If a post is given, that means this is an edit
   allLanguages: Language[];
+  siteLanguages: number[];
   communities: Option<CommunityView[]>;
   params: Option<PostFormParams>;
   onCancel?(): any;
@@ -182,7 +183,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
 
   render() {
     let selectedLangs = this.state.postForm.language_id
-      .or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo))
+      .or(
+        myFirstDiscussionLanguageId(
+          this.props.allLanguages,
+          this.props.siteLanguages,
+          UserService.Instance.myUserInfo
+        )
+      )
       .map(Array.of);
 
     return (
@@ -298,6 +305,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                         enableDownvotes={this.props.enableDownvotes}
                         enableNsfw={this.props.enableNsfw}
                         allLanguages={this.props.allLanguages}
+                        siteLanguages={this.props.siteLanguages}
                       />
                     </>
                   ),
@@ -340,6 +348,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                         enableDownvotes={this.props.enableDownvotes}
                         enableNsfw={this.props.enableNsfw}
                         allLanguages={this.props.allLanguages}
+                        siteLanguages={this.props.siteLanguages}
                       />
                     </>
                   ),
@@ -359,6 +368,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 buttonTitle={None}
                 maxLength={None}
                 allLanguages={this.props.allLanguages}
+                siteLanguages={this.props.siteLanguages}
               />
             </div>
           </div>
@@ -411,6 +421,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           )}
           <LanguageSelect
             allLanguages={this.props.allLanguages}
+            siteLanguages={this.props.siteLanguages}
             selectedLanguageIds={selectedLangs}
             multiple={false}
             onChange={this.handleLanguageChange}

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

@@ -91,6 +91,7 @@ interface PostListingProps {
   moderators: Option<CommunityModeratorView[]>;
   admins: Option<PersonViewSafe[]>;
   allLanguages: Language[];
+  siteLanguages: number[];
   showCommunity?: boolean;
   showBody?: boolean;
   hideImage?: boolean;
@@ -174,6 +175,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               enableNsfw={this.props.enableNsfw}
               enableDownvotes={this.props.enableDownvotes}
               allLanguages={this.props.allLanguages}
+              siteLanguages={this.props.siteLanguages}
             />
           </div>
         )}

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

@@ -9,6 +9,7 @@ import { PostListing } from "./post-listing";
 interface PostListingsProps {
   posts: PostView[];
   allLanguages: Language[];
+  siteLanguages: number[];
   showCommunity?: boolean;
   removeDuplicates?: boolean;
   enableDownvotes: boolean;
@@ -43,6 +44,7 @@ export class PostListings extends Component<PostListingsProps, any> {
                 enableDownvotes={this.props.enableDownvotes}
                 enableNsfw={this.props.enableNsfw}
                 allLanguages={this.props.allLanguages}
+                siteLanguages={this.props.siteLanguages}
               />
               <hr className="my-3" />
             </>

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

@@ -60,6 +60,7 @@ export class PostReport extends Component<PostReportProps, any> {
           enableNsfw={true}
           viewOnly={true}
           allLanguages={[]}
+          siteLanguages={[]}
           hideImage
         />
         <div>

src/shared/components/post/post.tsx

@@ -367,12 +367,14 @@ export class Post extends Component<any, PostState> {
                     enableDownvotes={enableDownvotes(this.state.siteRes)}
                     enableNsfw={enableNsfw(this.state.siteRes)}
                     allLanguages={this.state.siteRes.all_languages}
+                    siteLanguages={this.state.siteRes.discussion_languages}
                   />
                   <div ref={this.state.commentSectionRef} className="mb-2" />
                   <CommentForm
                     node={Right(res.post_view.post.id)}
                     disabled={res.post_view.post.locked}
                     allLanguages={this.state.siteRes.all_languages}
+                    siteLanguages={this.state.siteRes.discussion_languages}
                   />
                   <div className="d-block d-md-none">
                     <button
@@ -507,6 +509,7 @@ export class Post extends Component<any, PostState> {
                 enableDownvotes={enableDownvotes(this.state.siteRes)}
                 showContext
                 allLanguages={this.state.siteRes.all_languages}
+                siteLanguages={this.state.siteRes.discussion_languages}
               />
             </div>
           ),
@@ -527,6 +530,9 @@ export class Post extends Component<any, PostState> {
             online={res.online}
             enableNsfw={enableNsfw(this.state.siteRes)}
             showIcon
+            allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
+            communityLanguages={None}
           />
         </div>
       ),
@@ -611,6 +617,7 @@ export class Post extends Component<any, PostState> {
             admins={Some(this.state.siteRes.admins)}
             enableDownvotes={enableDownvotes(this.state.siteRes)}
             allLanguages={this.state.siteRes.all_languages}
+            siteLanguages={this.state.siteRes.discussion_languages}
           />
         </div>
       ),

src/shared/components/private_message/private-message-form.tsx

@@ -136,6 +136,7 @@ export class PrivateMessageForm extends Component<
                 maxLength={None}
                 onContentChange={this.handleContentChange}
                 allLanguages={[]}
+                siteLanguages={[]}
               />
             </div>
           </div>

src/shared/components/search.tsx

@@ -595,6 +595,7 @@ export class Search extends Component<any, SearchState> {
                   enableDownvotes={enableDownvotes(this.state.siteRes)}
                   enableNsfw={enableNsfw(this.state.siteRes)}
                   allLanguages={this.state.siteRes.all_languages}
+                  siteLanguages={this.state.siteRes.discussion_languages}
                   viewOnly
                 />
               )}
@@ -617,6 +618,7 @@ export class Search extends Component<any, SearchState> {
                   noIndent
                   enableDownvotes={enableDownvotes(this.state.siteRes)}
                   allLanguages={this.state.siteRes.all_languages}
+                  siteLanguages={this.state.siteRes.discussion_languages}
                 />
               )}
               {i.type_ == "communities" && (
@@ -656,6 +658,7 @@ export class Search extends Component<any, SearchState> {
         maxCommentsShown={None}
         enableDownvotes={enableDownvotes(this.state.siteRes)}
         allLanguages={this.state.siteRes.all_languages}
+        siteLanguages={this.state.siteRes.discussion_languages}
       />
     );
   }
@@ -686,6 +689,7 @@ export class Search extends Component<any, SearchState> {
                 enableDownvotes={enableDownvotes(this.state.siteRes)}
                 enableNsfw={enableNsfw(this.state.siteRes)}
                 allLanguages={this.state.siteRes.all_languages}
+                siteLanguages={this.state.siteRes.discussion_languages}
                 viewOnly
               />
             </div>

src/shared/utils.ts

@@ -14,6 +14,7 @@ import {
   CommunityView,
   GetSiteMetadata,
   GetSiteResponse,
+  Language,
   LemmyHttp,
   LemmyWebsocket,
   ListingType,
@@ -1479,13 +1480,16 @@ export function arrayGet<T>(arr: Array<T>, index: number): Result<T, string> {
 }
 
 export function myFirstDiscussionLanguageId(
+  allLanguages: Language[],
+  siteLanguages: number[],
   myUserInfo = UserService.Instance.myUserInfo
 ): Option<number> {
-  return myUserInfo.andThen(mui =>
+  return arrayGet(
-    arrayGet(mui.discussion_languages, 0)
+    selectableLanguages(allLanguages, siteLanguages, false, false, myUserInfo),
-      .ok()
+    0
-      .map(i => i.id)
+  )
-  );
+    .map(l => l.id)
+    .ok();
 }
 
 export function canCreateCommunity(
@@ -1526,6 +1530,40 @@ export function nsfwCheck(
   );
 }
 
-export function getRandomFromList<T>(list : T[]) : T{
+export function getRandomFromList<T>(list: T[]): T {
   return list[Math.floor(Math.random() * list.length)];
 }
+
+/**
+ * This shows what language you can select
+ *
+ * Use showAll for the site form
+ * Use showSite for the profile and community forms
+ * Use false for both those to filter on your profile and site ones
+ */
+export function selectableLanguages(
+  allLanguages: Language[],
+  siteLanguages: number[],
+  showAll: boolean,
+  showSite: boolean,
+  myUserInfo = UserService.Instance.myUserInfo
+): Language[] {
+  let allLangIds = allLanguages.map(l => l.id);
+  let myLangs = myUserInfo
+    .map(mui => mui.discussion_languages)
+    .unwrapOr(allLangIds);
+  myLangs = myLangs.length == 0 ? allLangIds : myLangs;
+  let siteLangs = siteLanguages.length == 0 ? allLangIds : siteLanguages;
+
+  if (showAll) {
+    return allLanguages;
+  } else {
+    if (showSite) {
+      return allLanguages.filter(x => siteLangs.includes(x.id));
+    } else {
+      return allLanguages
+        .filter(x => siteLangs.includes(x.id))
+        .filter(x => myLangs.includes(x.id));
+    }
+  }
+}

yarn.lock

@@ -4909,10 +4909,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.17.0-rc.54:
+lemmy-js-client@0.17.0-rc.55:
-  version "0.17.0-rc.54"
+  version "0.17.0-rc.55"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.0-rc.54.tgz#cda3aae8149699f944da354b76710b148cf441dc"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.0-rc.55.tgz#7e0ab84838e7b09010285169b6be2ca4d23e18fa"
-  integrity sha512-7EhwjfAoq1jmwj6CAFOBNiNQOMOZk/yAsW4kwVRsNGD3pZexW3NrjEoAQx3kFC7mDEUuVbkkRMkl3ND8vUY+Uw==
+  integrity sha512-UAhOq8Jtgu+Rzk7ow1Kx/afQzkWxxjxFjZANDxWN9ozxpBJ0qR+VtKaDY+sEyBF3hU1XPcgTqjq6xPFA9CUr4A==
 
 levn@^0.4.1:
   version "0.4.1"