ui/src/components/community-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from "rxjs";
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { CommunityForm as CommunityFormI, UserOperation, Category, ListCategoriesResponse, CommunityResponse } from '../interfaces';
   5 import { WebSocketService } from '../services';
   6 import { msgOp, capitalizeFirstLetter } from '../utils';
   7 import * as autosize from 'autosize';
   8 import { i18n } from '../i18next';
   9 import { T } from 'inferno-i18next';
  10
  11 import { Community } from '../interfaces';
  12
  13 interface CommunityFormProps {
  14   community?: Community; // If a community is given, that means this is an edit
  15   onCancel?(): any;
  16   onCreate?(community: Community): any;
  17   onEdit?(community: Community): any;
  18 }
  19
  20 interface CommunityFormState {
  21   communityForm: CommunityFormI;
  22   categories: Array<Category>;
  23   loading: boolean;
  24 }
  25
  26 export class CommunityForm extends Component<CommunityFormProps, CommunityFormState> {
  27   private subscription: Subscription;
  28
  29   private emptyState: CommunityFormState = {
  30     communityForm: {
  31       name: null,
  32       title: null,
  33       category_id: null,
  34       nsfw: false,
  35     },
  36     categories: [],
  37     loading: false
  38   }
  39
  40   constructor(props: any, context: any) {
  41     super(props, context);
  42
  43     this.state = this.emptyState;
  44
  45     if (this.props.community) {
  46       this.state.communityForm = {
  47         name: this.props.community.name,
  48         title: this.props.community.title,
  49         category_id: this.props.community.category_id,
  50         description: this.props.community.description,
  51         edit_id: this.props.community.id,
  52         nsfw: this.props.community.nsfw,
  53         auth: null
  54       }
  55     }
  56
  57     this.subscription = WebSocketService.Instance.subject
  58       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  59       .subscribe(
  60         (msg) => this.parseMessage(msg),
  61         (err) => console.error(err),
  62         () => console.log("complete")
  63       );
  64
  65     WebSocketService.Instance.listCategories();
  66   }
  67
  68   componentDidMount() {
  69     autosize(document.querySelectorAll('textarea'));
  70   }
  71
  72   componentWillUnmount() {
  73     this.subscription.unsubscribe();
  74   }
  75
  76
  77   render() {
  78     return (
  79       <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
  80         <div class="form-group row">
  81           <label class="col-12 col-form-label"><T i18nKey="name">#</T></label>
  82           <div class="col-12">
  83             <input type="text" class="form-control" value={this.state.communityForm.name} onInput={linkEvent(this, this.handleCommunityNameChange)} required minLength={3} maxLength={20} pattern="[a-z0-9_]+" title={i18n.t('community_reqs')}/>
  84           </div>
  85         </div>
  86         <div class="form-group row">
  87           <label class="col-12 col-form-label"><T i18nKey="title">#</T></label>
  88           <div class="col-12">
  89             <input type="text" value={this.state.communityForm.title} onInput={linkEvent(this, this.handleCommunityTitleChange)} class="form-control" required minLength={3} maxLength={100} />
  90           </div>
  91         </div>
  92         <div class="form-group row">
  93           <label class="col-12 col-form-label"><T i18nKey="sidebar">#</T></label>
  94           <div class="col-12">
  95             <textarea value={this.state.communityForm.description} onInput={linkEvent(this, this.handleCommunityDescriptionChange)} class="form-control" rows={3} maxLength={10000} />
  96           </div>
  97         </div>
  98         <div class="form-group row">
  99           <label class="col-12 col-form-label"><T i18nKey="category">#</T></label>
 100           <div class="col-12">
 101             <select class="form-control" value={this.state.communityForm.category_id} onInput={linkEvent(this, this.handleCommunityCategoryChange)}>
 102               {this.state.categories.map(category =>
 103                 <option value={category.id}>{category.name}</option>
 104               )}
 105             </select>
 106           </div>
 107         </div>
 108         <div class="form-group row">
 109           <div class="col-12">
 110             <div class="form-check">
 111               <input class="form-check-input" type="checkbox" checked={this.state.communityForm.nsfw} onChange={linkEvent(this, this.handleCommunityNsfwChange)}/>
 112               <label class="form-check-label"><T i18nKey="nsfw">#</T></label>
 113             </div>
 114           </div>
 115         </div>
 116         <div class="form-group row">
 117           <div class="col-12">
 118             <button type="submit" class="btn btn-secondary mr-2">
 119               {this.state.loading ?
 120               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
 121               this.props.community ? capitalizeFirstLetter(i18n.t('save')) : capitalizeFirstLetter(i18n.t('create'))}</button>
 122               {this.props.community && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}><T i18nKey="cancel">#</T></button>}
 123           </div>
 124         </div>
 125       </form>
 126     );
 127   }
 128
 129   handleCreateCommunitySubmit(i: CommunityForm, event: any) {
 130     event.preventDefault();
 131     i.state.loading = true;
 132     if (i.props.community) {
 133       WebSocketService.Instance.editCommunity(i.state.communityForm);
 134     } else {
 135       WebSocketService.Instance.createCommunity(i.state.communityForm);
 136     }
 137     i.setState(i.state);
 138   }
 139
 140   handleCommunityNameChange(i: CommunityForm, event: any) {
 141     i.state.communityForm.name = event.target.value;
 142     i.setState(i.state);
 143   }
 144
 145   handleCommunityTitleChange(i: CommunityForm, event: any) {
 146     i.state.communityForm.title = event.target.value;
 147     i.setState(i.state);
 148   }
 149
 150   handleCommunityDescriptionChange(i: CommunityForm, event: any) {
 151     i.state.communityForm.description = event.target.value;
 152     i.setState(i.state);
 153   }
 154
 155   handleCommunityCategoryChange(i: CommunityForm, event: any) {
 156     i.state.communityForm.category_id = Number(event.target.value);
 157     i.setState(i.state);
 158   }
 159
 160   handleCommunityNsfwChange(i: CommunityForm, event: any) {
 161     i.state.communityForm.nsfw = event.target.checked;
 162     i.setState(i.state);
 163   }
 164
 165   handleCancel(i: CommunityForm) {
 166     i.props.onCancel();
 167   }
 168
 169   parseMessage(msg: any) {
 170     let op: UserOperation = msgOp(msg);
 171     console.log(msg);
 172     if (msg.error) {
 173       alert(i18n.t(msg.error));
 174       this.state.loading = false;
 175       this.setState(this.state);
 176       return;
 177     } else if (op == UserOperation.ListCategories){
 178       let res: ListCategoriesResponse = msg;
 179       this.state.categories = res.categories;
 180       if (!this.props.community) {
 181         this.state.communityForm.category_id = res.categories[0].id;
 182       }
 183       this.setState(this.state);
 184     } else if (op == UserOperation.CreateCommunity) {
 185       let res: CommunityResponse = msg;
 186       this.state.loading = false;
 187       this.props.onCreate(res.community);
 188     }
 189     // TODO is ths necessary
 190     else if (op == UserOperation.EditCommunity) {
 191       let res: CommunityResponse = msg;
 192       this.state.loading = false;
 193       this.props.onEdit(res.community);
 194     }
 195   }
 196
 197 }