1 import { Component, linkEvent } from 'inferno';
2 import { Site, SiteForm as SiteFormI } from '../interfaces';
3 import { WebSocketService } from '../services';
4 import { capitalizeFirstLetter, randomStr, setupTribute } from '../utils';
5 import autosize from 'autosize';
6 import Tribute from 'tributejs/src/Tribute.js';
7 import { i18n } from '../i18next';
9 interface SiteFormProps {
10 site?: Site; // If a site is given, that means this is an edit
14 interface SiteFormState {
19 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
20 private id = `site-form-${randomStr()}`;
21 private tribute: Tribute;
22 private emptyState: SiteFormState = {
24 enable_downvotes: true,
25 open_registration: true,
32 constructor(props: any, context: any) {
33 super(props, context);
35 this.tribute = setupTribute();
36 this.state = this.emptyState;
38 if (this.props.site) {
39 this.state.siteForm = {
40 name: this.props.site.name,
41 description: this.props.site.description,
42 enable_downvotes: this.props.site.enable_downvotes,
43 open_registration: this.props.site.open_registration,
44 enable_nsfw: this.props.site.enable_nsfw,
50 var textarea: any = document.getElementById(this.id);
52 this.tribute.attach(textarea);
53 textarea.addEventListener('tribute-replaced', () => {
54 this.state.siteForm.description = textarea.value;
55 this.setState(this.state);
56 autosize.update(textarea);
62 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
65 ? capitalizeFirstLetter(i18n.t('edit'))
66 : capitalizeFirstLetter(i18n.t('name'))
67 } ${i18n.t('your_site')}`}</h5>
68 <div class="form-group row">
69 <label class="col-12 col-form-label" htmlFor="create-site-name">
77 value={this.state.siteForm.name}
78 onInput={linkEvent(this, this.handleSiteNameChange)}
85 <div class="form-group row">
86 <label class="col-12 col-form-label" htmlFor={this.id}>
92 value={this.state.siteForm.description}
93 onInput={linkEvent(this, this.handleSiteDescriptionChange)}
100 <div class="form-group row">
102 <div class="form-check">
104 class="form-check-input"
105 id="create-site-downvotes"
107 checked={this.state.siteForm.enable_downvotes}
108 onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
110 <label class="form-check-label" htmlFor="create-site-downvotes">
111 {i18n.t('enable_downvotes')}
116 <div class="form-group row">
118 <div class="form-check">
120 class="form-check-input"
121 id="create-site-enable-nsfw"
123 checked={this.state.siteForm.enable_nsfw}
124 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
126 <label class="form-check-label" htmlFor="create-site-enable-nsfw">
127 {i18n.t('enable_nsfw')}
132 <div class="form-group row">
134 <div class="form-check">
136 class="form-check-input"
137 id="create-site-open-registration"
139 checked={this.state.siteForm.open_registration}
142 this.handleSiteOpenRegistrationChange
146 class="form-check-label"
147 htmlFor="create-site-open-registration"
149 {i18n.t('open_registration')}
154 <div class="form-group row">
156 <button type="submit" class="btn btn-secondary mr-2">
157 {this.state.loading ? (
158 <svg class="icon icon-spinner spin">
159 <use xlinkHref="#icon-spinner"></use>
161 ) : this.props.site ? (
162 capitalizeFirstLetter(i18n.t('save'))
164 capitalizeFirstLetter(i18n.t('create'))
167 {this.props.site && (
170 class="btn btn-secondary"
171 onClick={linkEvent(this, this.handleCancel)}
182 handleCreateSiteSubmit(i: SiteForm, event: any) {
183 event.preventDefault();
184 i.state.loading = true;
186 WebSocketService.Instance.editSite(i.state.siteForm);
188 WebSocketService.Instance.createSite(i.state.siteForm);
193 handleSiteNameChange(i: SiteForm, event: any) {
194 i.state.siteForm.name = event.target.value;
198 handleSiteDescriptionChange(i: SiteForm, event: any) {
199 i.state.siteForm.description = event.target.value;
203 handleSiteEnableNsfwChange(i: SiteForm, event: any) {
204 i.state.siteForm.enable_nsfw = event.target.checked;
208 handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
209 i.state.siteForm.open_registration = event.target.checked;
213 handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
214 i.state.siteForm.enable_downvotes = event.target.checked;
218 handleCancel(i: SiteForm) {