Adding Community Language fixes. #783 (#868)

* Partially done with language tagging. #783

* A few more updates.

Author: dessalines

.prettierrc.js

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

.prettierrc.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",
@@ -38,16 +38,16 @@
     "express": "~4.18.1",
     "html-to-text": "^8.2.1",
     "i18next": "^21.8.14",
-    "inferno": "^8.0.3",
-    "inferno-create-element": "^8.0.3",
+    "inferno": "^8.0.5",
+    "inferno-create-element": "^8.0.5",
     "inferno-helmet": "^5.2.1",
-    "inferno-hydrate": "^8.0.3",
+    "inferno-hydrate": "^8.0.5",
     "inferno-i18next-dess": "0.0.2",
-    "inferno-router": "^8.0.3",
-    "inferno-server": "^8.0.3",
+    "inferno-router": "^8.0.5",
+    "inferno-server": "^8.0.5",
     "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.17.0-rc.56",
+    "lemmy-js-client": "0.17.0-rc.57",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "markdown-it-footnote": "^3.0.3",

lemmy-translations

@@ -385,4 +385,12 @@ br.big {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
-}
+}
+
+.lang-select-action {
+  width: 100px;
+}
+
+.lang-select-action:focus {
+  width: auto;
+}

package.json

@@ -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/assets/css/main.css

@@ -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-form.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-node.tsx

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

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

@@ -3,14 +3,19 @@ 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;
+  iconVersion?: boolean;
 }
 
 export class LanguageSelect extends Component<LanguageSelectProps, any> {
@@ -42,9 +47,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
   }
 
   render() {
-    let selectedLangs = this.props.selectedLanguageIds;
-
-    return (
+    return this.props.iconVersion ? (
+      this.selectBtn
+    ) : (
       <div className="form-group row">
         <label
           className={classNames("col-form-label", {
@@ -61,23 +66,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
             "col-sm-10": !this.props.multiple,
           })}
         >
-          <select
-            className="form-control custom-select"
-            id={this.id}
-            onChange={linkEvent(this, this.handleLanguageChange)}
-            aria-label="action"
-            multiple={this.props.multiple}
-          >
-            {this.props.allLanguages.map(l => (
-              <option
-                key={l.id}
-                value={l.id}
-                selected={selectedLangs.unwrapOr([]).includes(l.id)}
-              >
-                {l.name}
-              </option>
-            ))}
-          </select>
+          {this.selectBtn}
           {this.props.multiple && (
             <div className="input-group-append">
               <button
@@ -93,6 +82,40 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
     );
   }
 
+  get selectBtn() {
+    let selectedLangs = this.props.selectedLanguageIds;
+    let filteredLangs = selectableLanguages(
+      this.props.allLanguages,
+      this.props.siteLanguages,
+      this.props.showAll,
+      this.props.showSite,
+      UserService.Instance.myUserInfo
+    );
+
+    return (
+      <select
+        className={classNames("lang-select-action", {
+          "form-control custom-select": !this.props.iconVersion,
+          "btn btn-sm text-muted": this.props.iconVersion,
+        })}
+        id={this.id}
+        onChange={linkEvent(this, this.handleLanguageChange)}
+        aria-label="action"
+        multiple={this.props.multiple}
+      >
+        {filteredLangs.map(l => (
+          <option
+            key={l.id}
+            value={l.id}
+            selected={selectedLangs.unwrapOr([]).includes(l.id)}
+          >
+            {l.name}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
   handleLanguageChange(i: LanguageSelect, event: any) {
     let options: HTMLOptionElement[] = Array.from(event.target.options);
     let selected: number[] = options

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

@@ -41,6 +41,7 @@ interface MarkdownTextAreaProps {
     languageId: Option<number>;
   }): any;
   allLanguages: Language[];
+  siteLanguages: number[];
 }
 
 interface MarkdownTextAreaState {
@@ -164,18 +165,6 @@ export class MarkdownTextArea extends Component<
             {i18n.t("body")}
           </label>
         </div>
-        {this.props.showLanguage && (
-          <div className="row justify-content-end">
-            <div className="col-sm-8">
-              <LanguageSelect
-                allLanguages={this.props.allLanguages}
-                selectedLanguageIds={this.state.languageId.map(Array.of)}
-                multiple={false}
-                onChange={this.handleLanguageChange}
-              />
-            </div>
-          </div>
-        )}
         <div className="row">
           <div className="col-sm-12 d-flex flex-wrap">
             {this.props.buttonTitle.match({
@@ -215,6 +204,17 @@ export class MarkdownTextArea extends Component<
             )}
             {/* A flex expander */}
             <div className="flex-grow-1"></div>
+
+            {this.props.showLanguage && (
+              <LanguageSelect
+                iconVersion
+                allLanguages={this.props.allLanguages}
+                selectedLanguageIds={this.state.languageId.map(Array.of)}
+                siteLanguages={this.props.siteLanguages}
+                multiple={false}
+                onChange={this.handleLanguageChange}
+              />
+            )}
             <button
               className="btn btn-sm text-muted"
               data-tippy-content={i18n.t("bold")}

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

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

src/shared/components/common/markdown-textarea.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);