+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
onCancel?(): any;
onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
enableNsfw?: boolean;
- isLoading?: boolean;
+ loading?: boolean;
}
interface CommunityFormState {
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.isLoading &&
+ !this.props.loading &&
!!(
this.state.form.name ||
this.state.form.title ||
}
/>
{!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>
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>
/>
</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}
/>
</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={[]}
</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">
</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">
checked={this.state.form.posting_restricted_to_mods}
onChange={linkEvent(
this,
- this.handleCommunityPostingRestrictedToMods
+ this.handleCommunityPostingRestrictedToMods,
)}
/>
</div>
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"
- disabled={this.props.isLoading}
+ className="btn btn-secondary me-2"
+ disabled={this.props.loading}
>
- {this.props.isLoading ? (
+ {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 && (
className="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
- {i18n.t("cancel")}
+ {I18NextService.i18n.t("cancel")}
</button>
)}
</div>
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),
);
}