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