1 import { Component, linkEvent } from 'inferno';
2 import { Prompt } from 'inferno-router';
3 import { Subscription } from 'rxjs';
4 import { retryWhen, delay, take } from 'rxjs/operators';
6 CommunityForm as CommunityFormI,
10 WebSocketJsonResponse,
12 } from 'lemmy-js-client';
13 import { WebSocketService } from '../services';
14 import { wsJsonToRes, capitalizeFirstLetter, toast, randomStr } from '../utils';
15 import { i18n } from '../i18next';
17 import { MarkdownTextArea } from './markdown-textarea';
18 import { ImageUploadForm } from './image-upload-form';
20 interface CommunityFormProps {
21 community?: Community; // If a community is given, that means this is an edit
22 categories: Category[];
24 onCreate?(community: Community): any;
25 onEdit?(community: Community): any;
29 interface CommunityFormState {
30 communityForm: CommunityFormI;
34 export class CommunityForm extends Component<
38 private id = `community-form-${randomStr()}`;
39 private subscription: Subscription;
41 private emptyState: CommunityFormState = {
45 category_id: this.props.categories[0].id,
53 constructor(props: any, context: any) {
54 super(props, context);
56 this.state = this.emptyState;
58 this.handleCommunityDescriptionChange = this.handleCommunityDescriptionChange.bind(
62 this.handleIconUpload = this.handleIconUpload.bind(this);
63 this.handleIconRemove = this.handleIconRemove.bind(this);
65 this.handleBannerUpload = this.handleBannerUpload.bind(this);
66 this.handleBannerRemove = this.handleBannerRemove.bind(this);
68 if (this.props.community) {
69 this.state.communityForm = {
70 name: this.props.community.name,
71 title: this.props.community.title,
72 category_id: this.props.community.category_id,
73 description: this.props.community.description,
74 edit_id: this.props.community.id,
75 nsfw: this.props.community.nsfw,
76 icon: this.props.community.icon,
77 banner: this.props.community.banner,
82 this.subscription = WebSocketService.Instance.subject
83 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
85 msg => this.parseMessage(msg),
86 err => console.error(err),
87 () => console.log('complete')
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);