+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
className="community-form"
onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
>
- <NavigationPrompt
+ <Prompt
+ message={I18NextService.i18n.t("block_leaving")}
when={
!this.props.loading &&
!!(
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 ms-2 text-muted"
- data-tippy-content={i18n.t("name_explain")}
+ 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>
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 ms-2 text-muted"
- data-tippy-content={i18n.t("display_name_explain")}
+ data-tippy-content={I18NextService.i18n.t("display_name_explain")}
>
<Icon icon="help-circle" classes="icon-inline" />
</span>
</div>
<div className="mb-3 row">
<label className="col-12 col-sm-2 col-form-label">
- {i18n.t("icon")}
+ {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 className="mb-3 row">
<label className="col-12 col-sm-2 col-form-label">
- {i18n.t("banner")}
+ {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 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={[]}
{this.props.enableNsfw && (
<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 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>
{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),
);
}