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,
9 ListCategoriesResponse,
11 WebSocketJsonResponse,
12 } from '../interfaces';
13 import { WebSocketService } from '../services';
14 import { wsJsonToRes, capitalizeFirstLetter, toast, randomStr } from '../utils';
15 import { i18n } from '../i18next';
17 import { Community } from '../interfaces';
18 import { MarkdownTextArea } from './markdown-textarea';
20 interface CommunityFormProps {
21 community?: Community; // If a community is given, that means this is an edit
23 onCreate?(community: Community): any;
24 onEdit?(community: Community): any;
28 interface CommunityFormState {
29 communityForm: CommunityFormI;
30 categories: Array<Category>;
34 export class CommunityForm extends Component<
38 private id = `community-form-${randomStr()}`;
39 private subscription: Subscription;
41 private emptyState: CommunityFormState = {
52 constructor(props: any, context: any) {
53 super(props, context);
55 this.state = this.emptyState;
57 this.handleCommunityDescriptionChange = this.handleCommunityDescriptionChange.bind(
61 if (this.props.community) {
62 this.state.communityForm = {
63 name: this.props.community.name,
64 title: this.props.community.title,
65 category_id: this.props.community.category_id,
66 description: this.props.community.description,
67 edit_id: this.props.community.id,
68 nsfw: this.props.community.nsfw,
73 this.subscription = WebSocketService.Instance.subject
74 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
76 msg => this.parseMessage(msg),
77 err => console.error(err),
78 () => console.log('complete')
81 WebSocketService.Instance.listCategories();
84 componentDidUpdate() {
86 !this.state.loading &&
87 (this.state.communityForm.name ||
88 this.state.communityForm.title ||
89 this.state.communityForm.description)
91 window.onbeforeunload = () => true;
93 window.onbeforeunload = undefined;
97 componentWillUnmount() {
98 this.subscription.unsubscribe();
99 window.onbeforeunload = null;
107 !this.state.loading &&
108 (this.state.communityForm.name ||
109 this.state.communityForm.title ||
110 this.state.communityForm.description)
112 message={i18n.t('block_leaving')}
114 <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
115 {!this.props.community && (
116 <div class="form-group row">
117 <label class="col-12 col-form-label" htmlFor="community-name">
120 class="pointer unselectable ml-2 text-muted"
121 data-tippy-content={i18n.t('name_explain')}
123 <svg class="icon icon-inline">
124 <use xlinkHref="#icon-help-circle"></use>
133 value={this.state.communityForm.name}
134 onInput={linkEvent(this, this.handleCommunityNameChange)}
139 title={i18n.t('community_reqs')}
144 <div class="form-group row">
145 <label class="col-12 col-form-label" htmlFor="community-title">
146 {i18n.t('display_name')}
148 class="pointer unselectable ml-2 text-muted"
149 data-tippy-content={i18n.t('display_name_explain')}
151 <svg class="icon icon-inline">
152 <use xlinkHref="#icon-help-circle"></use>
160 value={this.state.communityForm.title}
161 onInput={linkEvent(this, this.handleCommunityTitleChange)}
169 <div class="form-group row">
170 <label class="col-12 col-form-label" htmlFor={this.id}>
175 initialContent={this.state.communityForm.description}
176 onContentChange={this.handleCommunityDescriptionChange}
180 <div class="form-group row">
181 <label class="col-12 col-form-label" htmlFor="community-category">
187 id="community-category"
188 value={this.state.communityForm.category_id}
189 onInput={linkEvent(this, this.handleCommunityCategoryChange)}
191 {this.state.categories.map(category => (
192 <option value={category.id}>{category.name}</option>
198 {this.props.enableNsfw && (
199 <div class="form-group row">
201 <div class="form-check">
203 class="form-check-input"
206 checked={this.state.communityForm.nsfw}
207 onChange={linkEvent(this, this.handleCommunityNsfwChange)}
209 <label class="form-check-label" htmlFor="community-nsfw">
216 <div class="form-group row">
220 class="btn btn-secondary mr-2"
221 disabled={this.state.loading}
223 {this.state.loading ? (
224 <svg class="icon icon-spinner spin">
225 <use xlinkHref="#icon-spinner"></use>
227 ) : this.props.community ? (
228 capitalizeFirstLetter(i18n.t('save'))
230 capitalizeFirstLetter(i18n.t('create'))
233 {this.props.community && (
236 class="btn btn-secondary"
237 onClick={linkEvent(this, this.handleCancel)}
249 handleCreateCommunitySubmit(i: CommunityForm, event: any) {
250 event.preventDefault();
251 i.state.loading = true;
252 if (i.props.community) {
253 WebSocketService.Instance.editCommunity(i.state.communityForm);
255 WebSocketService.Instance.createCommunity(i.state.communityForm);
260 handleCommunityNameChange(i: CommunityForm, event: any) {
261 i.state.communityForm.name = event.target.value;
265 handleCommunityTitleChange(i: CommunityForm, event: any) {
266 i.state.communityForm.title = event.target.value;
270 handleCommunityDescriptionChange(val: string) {
271 this.state.communityForm.description = val;
272 this.setState(this.state);
275 handleCommunityCategoryChange(i: CommunityForm, event: any) {
276 i.state.communityForm.category_id = Number(event.target.value);
280 handleCommunityNsfwChange(i: CommunityForm, event: any) {
281 i.state.communityForm.nsfw = event.target.checked;
285 handleCancel(i: CommunityForm) {
289 parseMessage(msg: WebSocketJsonResponse) {
290 let res = wsJsonToRes(msg);
293 toast(i18n.t(msg.error), 'danger');
294 this.state.loading = false;
295 this.setState(this.state);
297 } else if (res.op == UserOperation.ListCategories) {
298 let data = res.data as ListCategoriesResponse;
299 this.state.categories = data.categories;
300 if (!this.props.community) {
301 this.state.communityForm.category_id = data.categories[0].id;
303 this.setState(this.state);
304 } else if (res.op == UserOperation.CreateCommunity) {
305 let data = res.data as CommunityResponse;
306 this.state.loading = false;
307 this.props.onCreate(data.community);
309 // TODO is this necessary
310 else if (res.op == UserOperation.EditCommunity) {
311 let data = res.data as CommunityResponse;
312 this.state.loading = false;
313 this.props.onEdit(data.community);