1 import { Component, linkEvent } from 'inferno';
2 import { Prompt } from 'inferno-router';
3 import { Site, SiteForm as SiteFormI } from '../interfaces';
4 import { WebSocketService } from '../services';
5 import { capitalizeFirstLetter, randomStr, setupTribute } from '../utils';
6 import autosize from 'autosize';
7 import Tribute from 'tributejs/src/Tribute.js';
8 import { i18n } from '../i18next';
10 interface SiteFormProps {
11 site?: Site; // If a site is given, that means this is an edit
15 interface SiteFormState {
20 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
21 private id = `site-form-${randomStr()}`;
22 private tribute: Tribute;
23 private emptyState: SiteFormState = {
25 enable_downvotes: true,
26 open_registration: true,
33 constructor(props: any, context: any) {
34 super(props, context);
36 this.tribute = setupTribute();
37 this.state = this.emptyState;
39 if (this.props.site) {
40 this.state.siteForm = {
41 name: this.props.site.name,
42 description: this.props.site.description,
43 enable_downvotes: this.props.site.enable_downvotes,
44 open_registration: this.props.site.open_registration,
45 enable_nsfw: this.props.site.enable_nsfw,
51 var textarea: any = document.getElementById(this.id);
53 this.tribute.attach(textarea);
54 textarea.addEventListener('tribute-replaced', () => {
55 this.state.siteForm.description = textarea.value;
56 this.setState(this.state);
57 autosize.update(textarea);
61 // Necessary to stop the loading
62 componentWillReceiveProps() {
63 this.state.loading = false;
64 this.setState(this.state);
67 componentDidUpdate() {
69 !this.state.loading &&
71 (this.state.siteForm.name || this.state.siteForm.description)
73 window.onbeforeunload = () => true;
75 window.onbeforeunload = undefined;
79 componentWillUnmount() {
80 window.onbeforeunload = null;
88 !this.state.loading &&
90 (this.state.siteForm.name || this.state.siteForm.description)
92 message={i18n.t('block_leaving')}
94 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
97 ? capitalizeFirstLetter(i18n.t('save'))
98 : capitalizeFirstLetter(i18n.t('name'))
99 } ${i18n.t('your_site')}`}</h5>
100 <div class="form-group row">
101 <label class="col-12 col-form-label" htmlFor="create-site-name">
107 id="create-site-name"
109 value={this.state.siteForm.name}
110 onInput={linkEvent(this, this.handleSiteNameChange)}
117 <div class="form-group row">
118 <label class="col-12 col-form-label" htmlFor={this.id}>
124 value={this.state.siteForm.description}
125 onInput={linkEvent(this, this.handleSiteDescriptionChange)}
132 <div class="form-group row">
134 <div class="form-check">
136 class="form-check-input"
137 id="create-site-downvotes"
139 checked={this.state.siteForm.enable_downvotes}
142 this.handleSiteEnableDownvotesChange
145 <label class="form-check-label" htmlFor="create-site-downvotes">
146 {i18n.t('enable_downvotes')}
151 <div class="form-group row">
153 <div class="form-check">
155 class="form-check-input"
156 id="create-site-enable-nsfw"
158 checked={this.state.siteForm.enable_nsfw}
159 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
162 class="form-check-label"
163 htmlFor="create-site-enable-nsfw"
165 {i18n.t('enable_nsfw')}
170 <div class="form-group row">
172 <div class="form-check">
174 class="form-check-input"
175 id="create-site-open-registration"
177 checked={this.state.siteForm.open_registration}
180 this.handleSiteOpenRegistrationChange
184 class="form-check-label"
185 htmlFor="create-site-open-registration"
187 {i18n.t('open_registration')}
192 <div class="form-group row">
196 class="btn btn-secondary mr-2"
197 disabled={this.state.loading}
199 {this.state.loading ? (
200 <svg class="icon icon-spinner spin">
201 <use xlinkHref="#icon-spinner"></use>
203 ) : this.props.site ? (
204 capitalizeFirstLetter(i18n.t('save'))
206 capitalizeFirstLetter(i18n.t('create'))
209 {this.props.site && (
212 class="btn btn-secondary"
213 onClick={linkEvent(this, this.handleCancel)}
225 handleCreateSiteSubmit(i: SiteForm, event: any) {
226 event.preventDefault();
227 i.state.loading = true;
229 WebSocketService.Instance.editSite(i.state.siteForm);
231 WebSocketService.Instance.createSite(i.state.siteForm);
236 handleSiteNameChange(i: SiteForm, event: any) {
237 i.state.siteForm.name = event.target.value;
241 handleSiteDescriptionChange(i: SiteForm, event: any) {
242 i.state.siteForm.description = event.target.value;
246 handleSiteEnableNsfwChange(i: SiteForm, event: any) {
247 i.state.siteForm.enable_nsfw = event.target.checked;
251 handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
252 i.state.siteForm.open_registration = event.target.checked;
256 handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
257 i.state.siteForm.enable_downvotes = event.target.checked;
261 handleCancel(i: SiteForm) {