ui/src/components/site-form.tsx

   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';
   5
   6 interface SiteFormProps {
   7   site?: Site; // If a site is given, that means this is an edit
   8   onCancel?(): any;
   9 }
  10
  11 interface SiteFormState {
  12   siteForm: SiteFormI;
  13   loading: boolean;
  14 }
  15
  16 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
  17   private emptyState: SiteFormState ={
  18     siteForm: {
  19       name: null
  20     },
  21     loading: false
  22   }
  23
  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,
  31       }
  32     }
  33   }
  34
  35   componentDidMount() {
  36     autosize(document.querySelectorAll('textarea'));
  37   }
  38
  39   render() {
  40     return (
  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>
  45           <div class="col-12">
  46             <input type="text" class="form-control" value={this.state.siteForm.name} onInput={linkEvent(this, this.handleSiteNameChange)} required minLength={3} maxLength={20} />
  47           </div>
  48         </div>
  49         <div class="form-group row">
  50           <label class="col-12 col-form-label">Sidebar</label>
  51           <div class="col-12">
  52             <textarea value={this.state.siteForm.description} onInput={linkEvent(this, this.handleSiteDescriptionChange)} class="form-control" rows={3} maxLength={10000} />
  53           </div>
  54         </div>
  55         <div class="form-group row">
  56           <div class="col-12">
  57             <button type="submit" class="btn btn-secondary mr-2">
  58               {this.state.loading ?
  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>}
  62           </div>
  63         </div>
  64       </form>
  65     );
  66   }
  67
  68   handleCreateSiteSubmit(i: SiteForm, event: any) {
  69     event.preventDefault();
  70     i.state.loading = true;
  71     if (i.props.site) {
  72       WebSocketService.Instance.editSite(i.state.siteForm);
  73     } else {
  74       WebSocketService.Instance.createSite(i.state.siteForm);
  75     }
  76     i.setState(i.state);
  77   }
  78
  79   handleSiteNameChange(i: SiteForm, event: any) {
  80     i.state.siteForm.name = event.target.value;
  81     i.setState(i.state);
  82   }
  83
  84   handleSiteDescriptionChange(i: SiteForm, event: any) {
  85     i.state.siteForm.description = event.target.value;
  86     i.setState(i.state);
  87   }
  88
  89   handleCancel(i: SiteForm) {
  90     i.props.onCancel();
  91   }
  92 }