1 import { Component, linkEvent } from 'inferno';
2 import { Site, SiteForm as SiteFormI } from '../interfaces';
3 import { WebSocketService } from '../services';
4 import * as autosize from 'autosize';
6 interface SiteFormProps {
7 site?: Site; // If a site is given, that means this is an edit
11 interface SiteFormState {
16 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
17 private emptyState: SiteFormState ={
24 constructor(props: any, context: any) {
25 super(props, context);
26 this.state = this.emptyState;
27 if (this.props.site) {
28 this.state.siteForm = {
29 name: this.props.site.name,
30 description: this.props.site.description,
36 autosize(document.querySelectorAll('textarea'));
41 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
42 <h5>{`${this.props.site ? 'Edit' : 'Name'} your Site`}</h5>
43 <div class="form-group row">
44 <label class="col-12 col-form-label">Name</label>
46 <input type="text" class="form-control" value={this.state.siteForm.name} onInput={linkEvent(this, this.handleSiteNameChange)} required minLength={3} maxLength={20} />
49 <div class="form-group row">
50 <label class="col-12 col-form-label">Sidebar</label>
52 <textarea value={this.state.siteForm.description} onInput={linkEvent(this, this.handleSiteDescriptionChange)} class="form-control" rows={3} maxLength={10000} />
55 <div class="form-group row">
57 <button type="submit" class="btn btn-secondary mr-2">
59 <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
60 this.props.site ? 'Save' : 'Create'}</button>
61 {this.props.site && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
68 handleCreateSiteSubmit(i: SiteForm, event: any) {
69 event.preventDefault();
70 i.state.loading = true;
72 WebSocketService.Instance.editSite(i.state.siteForm);
74 WebSocketService.Instance.createSite(i.state.siteForm);
79 handleSiteNameChange(i: SiteForm, event: any) {
80 i.state.siteForm.name = event.target.value;
84 handleSiteDescriptionChange(i: SiteForm, event: any) {
85 i.state.siteForm.description = event.target.value;
89 handleCancel(i: SiteForm) {