Upgrading deps, running prettier. (#1987)

[lemmy-ui.git] / src / shared / components / community / community-form.tsx

diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 4eed4645d461c358f5bb2a84cc4e6f26d87a9aa9..e44675c91c608256aad56729ef91fb0de0f118cf 100644 (file)
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -1,17 +1,18 @@
+import { myAuthRequired } from "@utils/app";
+import { capitalizeFirstLetter, randomStr } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
+import { Prompt } from "inferno-router";
 import {
   CommunityView,
   CreateCommunity,
   EditCommunity,
   Language,
 } from "lemmy-js-client";
-import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, myAuthRequired, randomStr } from "../../utils";
+import { I18NextService } from "../../services";
 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";
-import NavigationPrompt from "../common/navigation-prompt";
 
 interface CommunityFormProps {
   community_view?: CommunityView; // If a community is given, that means this is an edit
@@ -85,8 +86,12 @@ export class CommunityForm extends Component<
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
-        <NavigationPrompt
+      <form
+        className="community-form"
+        onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
+      >
+        <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
           when={
             !this.props.loading &&
             !!(
@@ -98,15 +103,15 @@ export class CommunityForm extends Component<
           }
         />
         {!this.props.community_view && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label
               className="col-12 col-sm-2 col-form-label"
               htmlFor="community-name"
             >
-              {i18n.t("name")}
+              {I18NextService.i18n.t("name")}
               <span
-                className="position-absolute pointer unselectable ml-2 text-muted"
-                data-tippy-content={i18n.t("name_explain")}
+                className="position-absolute pointer unselectable ms-2 text-muted"
+                data-tippy-content={I18NextService.i18n.t("name_explain")}
               >
                 <Icon icon="help-circle" classes="icon-inline" />
               </span>
@@ -121,20 +126,20 @@ export class CommunityForm extends Component<
                 required
                 minLength={3}
                 pattern="[a-z0-9_]+"
-                title={i18n.t("community_reqs")}
+                title={I18NextService.i18n.t("community_reqs")}
               />
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-12 col-sm-2 col-form-label"
             htmlFor="community-title"
           >
-            {i18n.t("display_name")}
+            {I18NextService.i18n.t("display_name")}
             <span
-              className="position-absolute pointer unselectable ml-2 text-muted"
-              data-tippy-content={i18n.t("display_name_explain")}
+              className="position-absolute pointer unselectable ms-2 text-muted"
+              data-tippy-content={I18NextService.i18n.t("display_name_explain")}
             >
               <Icon icon="help-circle" classes="icon-inline" />
             </span>
@@ -152,11 +157,13 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
-          <label className="col-12 col-sm-2">{i18n.t("icon")}</label>
+        <div className="mb-3 row">
+          <label className="col-12 col-sm-2 col-form-label">
+            {I18NextService.i18n.t("icon")}
+          </label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
-              uploadTitle={i18n.t("upload_icon")}
+              uploadTitle={I18NextService.i18n.t("upload_icon")}
               imageSrc={this.state.form.icon}
               onUpload={this.handleIconUpload}
               onRemove={this.handleIconRemove}
@@ -164,25 +171,27 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
-          <label className="col-12 col-sm-2">{i18n.t("banner")}</label>
+        <div className="mb-3 row">
+          <label className="col-12 col-sm-2 col-form-label">
+            {I18NextService.i18n.t("banner")}
+          </label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
-              uploadTitle={i18n.t("upload_banner")}
+              uploadTitle={I18NextService.i18n.t("upload_banner")}
               imageSrc={this.state.form.banner}
               onUpload={this.handleBannerUpload}
               onRemove={this.handleBannerRemove}
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
-            {i18n.t("sidebar")}
+            {I18NextService.i18n.t("sidebar")}
           </label>
           <div className="col-12 col-sm-10">
             <MarkdownTextArea
               initialContent={this.state.form.description}
-              placeholder={i18n.t("description")}
+              placeholder={I18NextService.i18n.t("description") ?? undefined}
               onContentChange={this.handleCommunityDescriptionChange}
               hideNavigationWarnings
               allLanguages={[]}
@@ -192,9 +201,9 @@ export class CommunityForm extends Component<
         </div>
 
         {this.props.enableNsfw && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <legend className="col-form-label col-sm-2 pt-0">
-              {i18n.t("nsfw")}
+              {I18NextService.i18n.t("nsfw")}
             </legend>
             <div className="col-10">
               <div className="form-check">
@@ -209,9 +218,9 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <legend className="col-form-label col-6 pt-0">
-            {i18n.t("only_mods_can_post_in_community")}
+            {I18NextService.i18n.t("only_mods_can_post_in_community")}
           </legend>
           <div className="col-6">
             <div className="form-check">
@@ -222,7 +231,7 @@ export class CommunityForm extends Component<
                 checked={this.state.form.posting_restricted_to_mods}
                 onChange={linkEvent(
                   this,
-                  this.handleCommunityPostingRestrictedToMods
+                  this.handleCommunityPostingRestrictedToMods,
                 )}
               />
             </div>
@@ -236,19 +245,19 @@ export class CommunityForm extends Component<
           multiple={true}
           onChange={this.handleDiscussionLanguageChange}
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <button
               type="submit"
-              className="btn btn-secondary mr-2"
+              className="btn btn-secondary me-2"
               disabled={this.props.loading}
             >
               {this.props.loading ? (
                 <Spinner />
               ) : this.props.community_view ? (
-                capitalizeFirstLetter(i18n.t("save"))
+                capitalizeFirstLetter(I18NextService.i18n.t("save"))
               ) : (
-                capitalizeFirstLetter(i18n.t("create"))
+                capitalizeFirstLetter(I18NextService.i18n.t("create"))
               )}
             </button>
             {this.props.community_view && (
@@ -257,7 +266,7 @@ export class CommunityForm extends Component<
                 className="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                {i18n.t("cancel")}
+                {I18NextService.i18n.t("cancel")}
               </button>
             )}
           </div>
@@ -321,7 +330,7 @@ export class CommunityForm extends Component<
 
   handleCommunityPostingRestrictedToMods(i: CommunityForm, event: any) {
     i.setState(
-      s => ((s.form.posting_restricted_to_mods = event.target.checked), s)
+      s => ((s.form.posting_restricted_to_mods = event.target.checked), s),
     );
   }