1 import { Component, linkEvent } from 'inferno';
2 import { Site, SiteForm as SiteFormI } from '../interfaces';
3 import { WebSocketService } from '../services';
4 import { capitalizeFirstLetter } from '../utils';
5 import * as autosize from 'autosize';
6 import { i18n } from '../i18next';
7 import { T } from 'inferno-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 emptyState: SiteFormState = {
22 enable_downvotes: true,
23 open_registration: true,
30 constructor(props: any, context: any) {
31 super(props, context);
32 this.state = this.emptyState;
33 if (this.props.site) {
34 this.state.siteForm = {
35 name: this.props.site.name,
36 description: this.props.site.description,
37 enable_downvotes: this.props.site.enable_downvotes,
38 open_registration: this.props.site.open_registration,
39 enable_nsfw: this.props.site.enable_nsfw,
45 autosize(document.querySelectorAll('textarea'));
50 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
53 ? capitalizeFirstLetter(i18n.t('edit'))
54 : capitalizeFirstLetter(i18n.t('name'))
55 } ${i18n.t('your_site')}`}</h5>
56 <div class="form-group row">
57 <label class="col-12 col-form-label">
58 <T i18nKey="name">#</T>
64 value={this.state.siteForm.name}
65 onInput={linkEvent(this, this.handleSiteNameChange)}
72 <div class="form-group row">
73 <label class="col-12 col-form-label">
74 <T i18nKey="sidebar">#</T>
78 value={this.state.siteForm.description}
79 onInput={linkEvent(this, this.handleSiteDescriptionChange)}
86 <div class="form-group row">
88 <div class="form-check">
90 class="form-check-input"
92 checked={this.state.siteForm.enable_downvotes}
93 onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
95 <label class="form-check-label">
96 <T i18nKey="enable_downvotes">#</T>
101 <div class="form-group row">
103 <div class="form-check">
105 class="form-check-input"
107 checked={this.state.siteForm.enable_nsfw}
108 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
110 <label class="form-check-label">
111 <T i18nKey="enable_nsfw">#</T>
116 <div class="form-group row">
118 <div class="form-check">
120 class="form-check-input"
122 checked={this.state.siteForm.open_registration}
125 this.handleSiteOpenRegistrationChange
128 <label class="form-check-label">
129 <T i18nKey="open_registration">#</T>
134 <div class="form-group row">
136 <button type="submit" class="btn btn-secondary mr-2">
137 {this.state.loading ? (
138 <svg class="icon icon-spinner spin">
139 <use xlinkHref="#icon-spinner"></use>
141 ) : this.props.site ? (
142 capitalizeFirstLetter(i18n.t('save'))
144 capitalizeFirstLetter(i18n.t('create'))
147 {this.props.site && (
150 class="btn btn-secondary"
151 onClick={linkEvent(this, this.handleCancel)}
153 <T i18nKey="cancel">#</T>
162 handleCreateSiteSubmit(i: SiteForm, event: any) {
163 event.preventDefault();
164 i.state.loading = true;
166 WebSocketService.Instance.editSite(i.state.siteForm);
168 WebSocketService.Instance.createSite(i.state.siteForm);
173 handleSiteNameChange(i: SiteForm, event: any) {
174 i.state.siteForm.name = event.target.value;
178 handleSiteDescriptionChange(i: SiteForm, event: any) {
179 i.state.siteForm.description = event.target.value;
183 handleSiteEnableNsfwChange(i: SiteForm, event: any) {
184 i.state.siteForm.enable_nsfw = event.target.checked;
188 handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
189 i.state.siteForm.open_registration = event.target.checked;
193 handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
194 i.state.siteForm.enable_downvotes = event.target.checked;
198 handleCancel(i: SiteForm) {