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 ={
27 constructor(props: any, context: any) {
28 super(props, context);
29 this.state = this.emptyState;
30 if (this.props.site) {
31 this.state.siteForm = {
32 name: this.props.site.name,
33 description: this.props.site.description,
39 autosize(document.querySelectorAll('textarea'));
44 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
45 <h5>{`${this.props.site ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('name'))} ${i18n.t('your_site')}`}</h5>
46 <div class="form-group row">
47 <label class="col-12 col-form-label"><T i18nKey="name">#</T></label>
49 <input type="text" class="form-control" value={this.state.siteForm.name} onInput={linkEvent(this, this.handleSiteNameChange)} required minLength={3} maxLength={20} />
52 <div class="form-group row">
53 <label class="col-12 col-form-label"><T i18nKey="sidebar">#</T></label>
55 <textarea value={this.state.siteForm.description} onInput={linkEvent(this, this.handleSiteDescriptionChange)} class="form-control" rows={3} maxLength={10000} />
58 <div class="form-group row">
60 <button type="submit" class="btn btn-secondary mr-2">
62 <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
63 this.props.site ? capitalizeFirstLetter(i18n.t('save')) : capitalizeFirstLetter(i18n.t('create'))}</button>
64 {this.props.site && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}><T i18nKey="cancel">#</T></button>}
71 handleCreateSiteSubmit(i: SiteForm, event: any) {
72 event.preventDefault();
73 i.state.loading = true;
75 WebSocketService.Instance.editSite(i.state.siteForm);
77 WebSocketService.Instance.createSite(i.state.siteForm);
82 handleSiteNameChange(i: SiteForm, event: any) {
83 i.state.siteForm.name = event.target.value;
87 handleSiteDescriptionChange(i: SiteForm, event: any) {
88 i.state.siteForm.description = event.target.value;
92 handleCancel(i: SiteForm) {