1 import { Component, linkEvent } from 'inferno';
2 import { Prompt } from 'inferno-router';
3 import { Subscription } from 'rxjs';
5 CommunityForm as CommunityFormI,
11 } from 'lemmy-js-client';
12 import { WebSocketService } from '../services';
15 capitalizeFirstLetter,
20 import { i18n } from '../i18next';
22 import { MarkdownTextArea } from './markdown-textarea';
23 import { ImageUploadForm } from './image-upload-form';
25 interface CommunityFormProps {
26 community?: Community; // If a community is given, that means this is an edit
27 categories: Category[];
29 onCreate?(community: Community): any;
30 onEdit?(community: Community): any;
34 interface CommunityFormState {
35 communityForm: CommunityFormI;
39 export class CommunityForm extends Component<
43 private id = `community-form-${randomStr()}`;
44 private subscription: Subscription;
46 private emptyState: CommunityFormState = {
50 category_id: this.props.categories[0].id,
58 constructor(props: any, context: any) {
59 super(props, context);
61 this.state = this.emptyState;
63 this.handleCommunityDescriptionChange = this.handleCommunityDescriptionChange.bind(
67 this.handleIconUpload = this.handleIconUpload.bind(this);
68 this.handleIconRemove = this.handleIconRemove.bind(this);
70 this.handleBannerUpload = this.handleBannerUpload.bind(this);
71 this.handleBannerRemove = this.handleBannerRemove.bind(this);
73 if (this.props.community) {
74 this.state.communityForm = {
75 name: this.props.community.name,
76 title: this.props.community.title,
77 category_id: this.props.community.category_id,
78 description: this.props.community.description,
79 edit_id: this.props.community.id,
80 nsfw: this.props.community.nsfw,
81 icon: this.props.community.icon,
82 banner: this.props.community.banner,
87 this.parseMessage = this.parseMessage.bind(this);
88 this.subscription = wsSubscribe(this.parseMessage);
91 componentDidUpdate() {
93 !this.state.loading &&
94 (this.state.communityForm.name ||
95 this.state.communityForm.title ||
96 this.state.communityForm.description)
98 window.onbeforeunload = () => true;
100 window.onbeforeunload = undefined;
104 componentWillUnmount() {
105 this.subscription.unsubscribe();
106 window.onbeforeunload = null;
114 !this.state.loading &&
115 (this.state.communityForm.name ||
116 this.state.communityForm.title ||
117 this.state.communityForm.description)
119 message={i18n.t('block_leaving')}
121 <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
122 {!this.props.community && (
123 <div class="form-group row">
124 <label class="col-12 col-form-label" htmlFor="community-name">
127 class="pointer unselectable ml-2 text-muted"
128 data-tippy-content={i18n.t('name_explain')}
130 <svg class="icon icon-inline">
131 <use xlinkHref="#icon-help-circle"></use>
140 value={this.state.communityForm.name}
141 onInput={linkEvent(this, this.handleCommunityNameChange)}
146 title={i18n.t('community_reqs')}
151 <div class="form-group row">
152 <label class="col-12 col-form-label" htmlFor="community-title">
153 {i18n.t('display_name')}
155 class="pointer unselectable ml-2 text-muted"
156 data-tippy-content={i18n.t('display_name_explain')}
158 <svg class="icon icon-inline">
159 <use xlinkHref="#icon-help-circle"></use>
167 value={this.state.communityForm.title}
168 onInput={linkEvent(this, this.handleCommunityTitleChange)}
176 <div class="form-group">
177 <label>{i18n.t('icon')}</label>
179 uploadTitle={i18n.t('upload_icon')}
180 imageSrc={this.state.communityForm.icon}
181 onUpload={this.handleIconUpload}
182 onRemove={this.handleIconRemove}
186 <div class="form-group">
187 <label>{i18n.t('banner')}</label>
189 uploadTitle={i18n.t('upload_banner')}
190 imageSrc={this.state.communityForm.banner}
191 onUpload={this.handleBannerUpload}
192 onRemove={this.handleBannerRemove}
195 <div class="form-group row">
196 <label class="col-12 col-form-label" htmlFor={this.id}>
201 initialContent={this.state.communityForm.description}
202 onContentChange={this.handleCommunityDescriptionChange}
206 <div class="form-group row">
207 <label class="col-12 col-form-label" htmlFor="community-category">
213 id="community-category"
214 value={this.state.communityForm.category_id}
215 onInput={linkEvent(this, this.handleCommunityCategoryChange)}
217 {this.props.categories.map(category => (
218 <option value={category.id}>{category.name}</option>
224 {this.props.enableNsfw && (
225 <div class="form-group row">
227 <div class="form-check">
229 class="form-check-input"
232 checked={this.state.communityForm.nsfw}
233 onChange={linkEvent(this, this.handleCommunityNsfwChange)}
235 <label class="form-check-label" htmlFor="community-nsfw">
242 <div class="form-group row">
246 class="btn btn-secondary mr-2"
247 disabled={this.state.loading}
249 {this.state.loading ? (
250 <svg class="icon icon-spinner spin">
251 <use xlinkHref="#icon-spinner"></use>
253 ) : this.props.community ? (
254 capitalizeFirstLetter(i18n.t('save'))
256 capitalizeFirstLetter(i18n.t('create'))
259 {this.props.community && (
262 class="btn btn-secondary"
263 onClick={linkEvent(this, this.handleCancel)}
275 handleCreateCommunitySubmit(i: CommunityForm, event: any) {
276 event.preventDefault();
277 i.state.loading = true;
278 if (i.props.community) {
279 WebSocketService.Instance.editCommunity(i.state.communityForm);
281 WebSocketService.Instance.createCommunity(i.state.communityForm);
286 handleCommunityNameChange(i: CommunityForm, event: any) {
287 i.state.communityForm.name = event.target.value;
291 handleCommunityTitleChange(i: CommunityForm, event: any) {
292 i.state.communityForm.title = event.target.value;
296 handleCommunityDescriptionChange(val: string) {
297 this.state.communityForm.description = val;
298 this.setState(this.state);
301 handleCommunityCategoryChange(i: CommunityForm, event: any) {
302 i.state.communityForm.category_id = Number(event.target.value);
306 handleCommunityNsfwChange(i: CommunityForm, event: any) {
307 i.state.communityForm.nsfw = event.target.checked;
311 handleCancel(i: CommunityForm) {
315 handleIconUpload(url: string) {
316 this.state.communityForm.icon = url;
317 this.setState(this.state);
321 this.state.communityForm.icon = '';
322 this.setState(this.state);
325 handleBannerUpload(url: string) {
326 this.state.communityForm.banner = url;
327 this.setState(this.state);
330 handleBannerRemove() {
331 this.state.communityForm.banner = '';
332 this.setState(this.state);
335 parseMessage(msg: WebSocketJsonResponse) {
336 let res = wsJsonToRes(msg);
339 toast(i18n.t(msg.error), 'danger');
340 this.state.loading = false;
341 this.setState(this.state);
343 } else if (res.op == UserOperation.CreateCommunity) {
344 let data = res.data as CommunityResponse;
345 this.state.loading = false;
346 this.props.onCreate(data.community);
347 } else if (res.op == UserOperation.EditCommunity) {
348 let data = res.data as CommunityResponse;
349 this.state.loading = false;
350 this.props.onEdit(data.community);