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       enable_downvotes: true,
  23       open_registration: true,
  24       enable_nsfw: true,
  25       name: null,
  26     },
  27     loading: false,
  28   };
  29
  30   constructor(props: any, context: any) {
  31     super(props, context);
  32     this.state = this.emptyState;
  33     if (this.props.site) {
  34       this.state.siteForm = {
  35         name: this.props.site.name,
  36         description: this.props.site.description,
  37         enable_downvotes: this.props.site.enable_downvotes,
  38         open_registration: this.props.site.open_registration,
  39         enable_nsfw: this.props.site.enable_nsfw,
  40       };
  41     }
  42   }
  43
  44   componentDidMount() {
  45     autosize(document.querySelectorAll('textarea'));
  46   }
  47
  48   render() {
  49     return (
  50       <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
  51         <h5>{`${
  52           this.props.site
  53             ? capitalizeFirstLetter(i18n.t('edit'))
  54             : capitalizeFirstLetter(i18n.t('name'))
  55         } ${i18n.t('your_site')}`}</h5>
  56         <div class="form-group row">
  57           <label class="col-12 col-form-label">
  58             <T i18nKey="name">#</T>
  59           </label>
  60           <div class="col-12">
  61             <input
  62               type="text"
  63               class="form-control"
  64               value={this.state.siteForm.name}
  65               onInput={linkEvent(this, this.handleSiteNameChange)}
  66               required
  67               minLength={3}
  68               maxLength={20}
  69             />
  70           </div>
  71         </div>
  72         <div class="form-group row">
  73           <label class="col-12 col-form-label">
  74             <T i18nKey="sidebar">#</T>
  75           </label>
  76           <div class="col-12">
  77             <textarea
  78               value={this.state.siteForm.description}
  79               onInput={linkEvent(this, this.handleSiteDescriptionChange)}
  80               class="form-control"
  81               rows={3}
  82               maxLength={10000}
  83             />
  84           </div>
  85         </div>
  86         <div class="form-group row">
  87           <div class="col-12">
  88             <div class="form-check">
  89               <input
  90                 class="form-check-input"
  91                 type="checkbox"
  92                 checked={this.state.siteForm.enable_downvotes}
  93                 onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
  94               />
  95               <label class="form-check-label">
  96                 <T i18nKey="enable_downvotes">#</T>
  97               </label>
  98             </div>
  99           </div>
 100         </div>
 101         <div class="form-group row">
 102           <div class="col-12">
 103             <div class="form-check">
 104               <input
 105                 class="form-check-input"
 106                 type="checkbox"
 107                 checked={this.state.siteForm.enable_nsfw}
 108                 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
 109               />
 110               <label class="form-check-label">
 111                 <T i18nKey="enable_nsfw">#</T>
 112               </label>
 113             </div>
 114           </div>
 115         </div>
 116         <div class="form-group row">
 117           <div class="col-12">
 118             <div class="form-check">
 119               <input
 120                 class="form-check-input"
 121                 type="checkbox"
 122                 checked={this.state.siteForm.open_registration}
 123                 onChange={linkEvent(
 124                   this,
 125                   this.handleSiteOpenRegistrationChange
 126                 )}
 127               />
 128               <label class="form-check-label">
 129                 <T i18nKey="open_registration">#</T>
 130               </label>
 131             </div>
 132           </div>
 133         </div>
 134         <div class="form-group row">
 135           <div class="col-12">
 136             <button type="submit" class="btn btn-secondary mr-2">
 137               {this.state.loading ? (
 138                 <svg class="icon icon-spinner spin">
 139                   <use xlinkHref="#icon-spinner"></use>
 140                 </svg>
 141               ) : this.props.site ? (
 142                 capitalizeFirstLetter(i18n.t('save'))
 143               ) : (
 144                 capitalizeFirstLetter(i18n.t('create'))
 145               )}
 146             </button>
 147             {this.props.site && (
 148               <button
 149                 type="button"
 150                 class="btn btn-secondary"
 151                 onClick={linkEvent(this, this.handleCancel)}
 152               >
 153                 <T i18nKey="cancel">#</T>
 154               </button>
 155             )}
 156           </div>
 157         </div>
 158       </form>
 159     );
 160   }
 161
 162   handleCreateSiteSubmit(i: SiteForm, event: any) {
 163     event.preventDefault();
 164     i.state.loading = true;
 165     if (i.props.site) {
 166       WebSocketService.Instance.editSite(i.state.siteForm);
 167     } else {
 168       WebSocketService.Instance.createSite(i.state.siteForm);
 169     }
 170     i.setState(i.state);
 171   }
 172
 173   handleSiteNameChange(i: SiteForm, event: any) {
 174     i.state.siteForm.name = event.target.value;
 175     i.setState(i.state);
 176   }
 177
 178   handleSiteDescriptionChange(i: SiteForm, event: any) {
 179     i.state.siteForm.description = event.target.value;
 180     i.setState(i.state);
 181   }
 182
 183   handleSiteEnableNsfwChange(i: SiteForm, event: any) {
 184     i.state.siteForm.enable_nsfw = event.target.checked;
 185     i.setState(i.state);
 186   }
 187
 188   handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
 189     i.state.siteForm.open_registration = event.target.checked;
 190     i.setState(i.state);
 191   }
 192
 193   handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
 194     i.state.siteForm.enable_downvotes = event.target.checked;
 195     i.setState(i.state);
 196   }
 197
 198   handleCancel(i: SiteForm) {
 199     i.props.onCancel();
 200   }
 201 }