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 { capitalizeFirstLetter } from '../utils';
   5 import * as autosize from 'autosize';
   6 import { i18n } from '../i18next';
   7 import { T } from 'inferno-i18next';
   8
   9 interface SiteFormProps {
  10   site?: Site; // If a site is given, that means this is an edit
  11   onCancel?(): any;
  12 }
  13
  14 interface SiteFormState {
  15   siteForm: SiteFormI;
  16   loading: boolean;
  17 }
  18
  19 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
  20   private emptyState: SiteFormState = {
  21     siteForm: {
  22       name: null,
  23     },
  24     loading: false,
  25   };
  26
  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,
  34       };
  35     }
  36   }
  37
  38   componentDidMount() {
  39     autosize(document.querySelectorAll('textarea'));
  40   }
  41
  42   render() {
  43     return (
  44       <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
  45         <h5>{`${
  46           this.props.site
  47             ? capitalizeFirstLetter(i18n.t('edit'))
  48             : capitalizeFirstLetter(i18n.t('name'))
  49         } ${i18n.t('your_site')}`}</h5>
  50         <div class="form-group row">
  51           <label class="col-12 col-form-label">
  52             <T i18nKey="name">#</T>
  53           </label>
  54           <div class="col-12">
  55             <input
  56               type="text"
  57               class="form-control"
  58               value={this.state.siteForm.name}
  59               onInput={linkEvent(this, this.handleSiteNameChange)}
  60               required
  61               minLength={3}
  62               maxLength={20}
  63             />
  64           </div>
  65         </div>
  66         <div class="form-group row">
  67           <label class="col-12 col-form-label">
  68             <T i18nKey="sidebar">#</T>
  69           </label>
  70           <div class="col-12">
  71             <textarea
  72               value={this.state.siteForm.description}
  73               onInput={linkEvent(this, this.handleSiteDescriptionChange)}
  74               class="form-control"
  75               rows={3}
  76               maxLength={10000}
  77             />
  78           </div>
  79         </div>
  80         <div class="form-group row">
  81           <div class="col-12">
  82             <button type="submit" class="btn btn-secondary mr-2">
  83               {this.state.loading ? (
  84                 <svg class="icon icon-spinner spin">
  85                   <use xlinkHref="#icon-spinner"></use>
  86                 </svg>
  87               ) : this.props.site ? (
  88                 capitalizeFirstLetter(i18n.t('save'))
  89               ) : (
  90                 capitalizeFirstLetter(i18n.t('create'))
  91               )}
  92             </button>
  93             {this.props.site && (
  94               <button
  95                 type="button"
  96                 class="btn btn-secondary"
  97                 onClick={linkEvent(this, this.handleCancel)}
  98               >
  99                 <T i18nKey="cancel">#</T>
 100               </button>
 101             )}
 102           </div>
 103         </div>
 104       </form>
 105     );
 106   }
 107
 108   handleCreateSiteSubmit(i: SiteForm, event: any) {
 109     event.preventDefault();
 110     i.state.loading = true;
 111     if (i.props.site) {
 112       WebSocketService.Instance.editSite(i.state.siteForm);
 113     } else {
 114       WebSocketService.Instance.createSite(i.state.siteForm);
 115     }
 116     i.setState(i.state);
 117   }
 118
 119   handleSiteNameChange(i: SiteForm, event: any) {
 120     i.state.siteForm.name = event.target.value;
 121     i.setState(i.state);
 122   }
 123
 124   handleSiteDescriptionChange(i: SiteForm, event: any) {
 125     i.state.siteForm.description = event.target.value;
 126     i.setState(i.state);
 127   }
 128
 129   handleCancel(i: SiteForm) {
 130     i.props.onCancel();
 131   }
 132 }