1 import { Component, linkEvent } from "inferno";
2 import { Prompt } from "inferno-router";
3 import { MarkdownTextArea } from "./markdown-textarea";
4 import { Spinner } from "./icon";
5 import { ImageUploadForm } from "./image-upload-form";
6 import { Site, EditSite } from "lemmy-js-client";
7 import { WebSocketService } from "../services";
10 capitalizeFirstLetter,
14 import { i18n } from "../i18next";
16 interface SiteFormProps {
17 site?: Site; // If a site is given, that means this is an edit
21 interface SiteFormState {
26 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
27 private id = `site-form-${randomStr()}`;
28 private emptyState: SiteFormState = {
30 enable_downvotes: true,
31 open_registration: true,
41 constructor(props: any, context: any) {
42 super(props, context);
44 this.state = this.emptyState;
45 this.handleSiteDescriptionChange = this.handleSiteDescriptionChange.bind(
49 this.handleIconUpload = this.handleIconUpload.bind(this);
50 this.handleIconRemove = this.handleIconRemove.bind(this);
52 this.handleBannerUpload = this.handleBannerUpload.bind(this);
53 this.handleBannerRemove = this.handleBannerRemove.bind(this);
55 if (this.props.site) {
56 this.state.siteForm = {
57 name: this.props.site.name,
58 description: this.props.site.description,
59 enable_downvotes: this.props.site.enable_downvotes,
60 open_registration: this.props.site.open_registration,
61 enable_nsfw: this.props.site.enable_nsfw,
62 icon: this.props.site.icon,
63 banner: this.props.site.banner,
69 // Necessary to stop the loading
70 componentWillReceiveProps() {
71 this.state.loading = false;
72 this.setState(this.state);
75 componentDidUpdate() {
77 !this.state.loading &&
79 (this.state.siteForm.name || this.state.siteForm.description)
81 window.onbeforeunload = () => true;
83 window.onbeforeunload = undefined;
87 componentWillUnmount() {
88 window.onbeforeunload = null;
96 !this.state.loading &&
98 (this.state.siteForm.name || this.state.siteForm.description)
100 message={i18n.t("block_leaving")}
102 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
105 ? capitalizeFirstLetter(i18n.t("save"))
106 : capitalizeFirstLetter(i18n.t("name"))
107 } ${i18n.t("your_site")}`}</h5>
108 <div class="form-group row">
109 <label class="col-12 col-form-label" htmlFor="create-site-name">
115 id="create-site-name"
117 value={this.state.siteForm.name}
118 onInput={linkEvent(this, this.handleSiteNameChange)}
125 <div class="form-group">
126 <label>{i18n.t("icon")}</label>
128 uploadTitle={i18n.t("upload_icon")}
129 imageSrc={this.state.siteForm.icon}
130 onUpload={this.handleIconUpload}
131 onRemove={this.handleIconRemove}
135 <div class="form-group">
136 <label>{i18n.t("banner")}</label>
138 uploadTitle={i18n.t("upload_banner")}
139 imageSrc={this.state.siteForm.banner}
140 onUpload={this.handleBannerUpload}
141 onRemove={this.handleBannerRemove}
144 <div class="form-group row">
145 <label class="col-12 col-form-label" htmlFor={this.id}>
150 initialContent={this.state.siteForm.description}
151 onContentChange={this.handleSiteDescriptionChange}
152 hideNavigationWarnings
156 <div class="form-group row">
158 <div class="form-check">
160 class="form-check-input"
161 id="create-site-downvotes"
163 checked={this.state.siteForm.enable_downvotes}
166 this.handleSiteEnableDownvotesChange
169 <label class="form-check-label" htmlFor="create-site-downvotes">
170 {i18n.t("enable_downvotes")}
175 <div class="form-group row">
177 <div class="form-check">
179 class="form-check-input"
180 id="create-site-enable-nsfw"
182 checked={this.state.siteForm.enable_nsfw}
183 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
186 class="form-check-label"
187 htmlFor="create-site-enable-nsfw"
189 {i18n.t("enable_nsfw")}
194 <div class="form-group row">
196 <div class="form-check">
198 class="form-check-input"
199 id="create-site-open-registration"
201 checked={this.state.siteForm.open_registration}
204 this.handleSiteOpenRegistrationChange
208 class="form-check-label"
209 htmlFor="create-site-open-registration"
211 {i18n.t("open_registration")}
216 <div class="form-group row">
220 class="btn btn-secondary mr-2"
221 disabled={this.state.loading}
223 {this.state.loading ? (
225 ) : this.props.site ? (
226 capitalizeFirstLetter(i18n.t("save"))
228 capitalizeFirstLetter(i18n.t("create"))
231 {this.props.site && (
234 class="btn btn-secondary"
235 onClick={linkEvent(this, this.handleCancel)}
247 handleCreateSiteSubmit(i: SiteForm, event: any) {
248 event.preventDefault();
249 i.state.loading = true;
251 WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
253 WebSocketService.Instance.send(wsClient.createSite(i.state.siteForm));
258 handleSiteNameChange(i: SiteForm, event: any) {
259 i.state.siteForm.name = event.target.value;
263 handleSiteDescriptionChange(val: string) {
264 this.state.siteForm.description = val;
265 this.setState(this.state);
268 handleSiteEnableNsfwChange(i: SiteForm, event: any) {
269 i.state.siteForm.enable_nsfw = event.target.checked;
273 handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
274 i.state.siteForm.open_registration = event.target.checked;
278 handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
279 i.state.siteForm.enable_downvotes = event.target.checked;
283 handleCancel(i: SiteForm) {
287 handleIconUpload(url: string) {
288 this.state.siteForm.icon = url;
289 this.setState(this.state);
293 this.state.siteForm.icon = "";
294 this.setState(this.state);
297 handleBannerUpload(url: string) {
298 this.state.siteForm.banner = url;
299 this.setState(this.state);
302 handleBannerRemove() {
303 this.state.siteForm.banner = "";
304 this.setState(this.state);