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   }
  28
  29   componentDidMount() {
  30     autosize(document.querySelectorAll('textarea'));
  31   }
  32
  33   render() {
  34     return (
  35       <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
  36         <h4>{`${this.props.site ? 'Edit' : 'Name'} your Site`}</h4>
  37         <div class="form-group row">
  38           <label class="col-12 col-form-label">Name</label>
  39           <div class="col-12">
  40             <input type="text" class="form-control" value={this.state.siteForm.name} onInput={linkEvent(this, this.handleSiteNameChange)} required minLength={3} maxLength={20} />
  41           </div>
  42         </div>
  43         <div class="form-group row">
  44           <label class="col-12 col-form-label">Sidebar</label>
  45           <div class="col-12">
  46             <textarea value={this.state.siteForm.description} onInput={linkEvent(this, this.handleSiteDescriptionChange)} class="form-control" rows={3} />
  47           </div>
  48         </div>
  49         <div class="form-group row">
  50           <div class="col-12">
  51             <button type="submit" class="btn btn-secondary mr-2">
  52               {this.state.loading ?
  53               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
  54               this.props.site ? 'Save' : 'Create'}</button>
  55               {this.props.site && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
  56           </div>
  57         </div>
  58       </form>
  59     );
  60   }
  61
  62   handleCreateSiteSubmit(i: SiteForm, event: any) {
  63     event.preventDefault();
  64     i.state.loading = true;
  65     if (i.props.site) {
  66       WebSocketService.Instance.editSite(i.state.siteForm);
  67     } else {
  68       WebSocketService.Instance.createSite(i.state.siteForm);
  69     }
  70     i.setState(i.state);
  71   }
  72
  73   handleSiteNameChange(i: SiteForm, event: any) {
  74     i.state.siteForm.name = event.target.value;
  75     i.setState(i.state);
  76   }
  77
  78   handleSiteDescriptionChange(i: SiteForm, event: any) {
  79     i.state.siteForm.description = event.target.value;
  80     i.setState(i.state);
  81   }
  82
  83   handleCancel(i: SiteForm) {
  84     i.props.onCancel();
  85   }
  86 }