ui/src/components/post-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from "rxjs";
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType } from '../interfaces';
   5 import { WebSocketService, UserService } from '../services';
   6 import { msgOp, getPageTitle } from '../utils';
   7 import * as autosize from 'autosize';
   8
   9 interface PostFormProps {
  10   post?: Post; // If a post is given, that means this is an edit
  11   prevCommunityName?: string;
  12   onCancel?(): any;
  13   onCreate?(id: number): any;
  14   onEdit?(post: Post): any;
  15 }
  16
  17 interface PostFormState {
  18   postForm: PostFormI;
  19   communities: Array<Community>;
  20   loading: boolean;
  21   suggestedTitle: string;
  22 }
  23
  24 export class PostForm extends Component<PostFormProps, PostFormState> {
  25
  26   private subscription: Subscription;
  27   private emptyState: PostFormState = {
  28     postForm: {
  29       name: null,
  30       auth: null,
  31       community_id: null,
  32       creator_id: (UserService.Instance.user) ? UserService.Instance.user.id : null,
  33     },
  34     communities: [],
  35     loading: false,
  36     suggestedTitle: undefined,
  37   }
  38
  39   constructor(props: any, context: any) {
  40     super(props, context);
  41
  42     this.state = this.emptyState;
  43
  44     if (this.props.post) {
  45       this.state.postForm = {
  46         body: this.props.post.body,
  47         name: this.props.post.name,
  48         community_id: this.props.post.community_id,
  49         edit_id: this.props.post.id,
  50         creator_id: this.props.post.creator_id,
  51         url: this.props.post.url,
  52         auth: null
  53       }
  54     }
  55
  56     this.subscription = WebSocketService.Instance.subject
  57       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  58       .subscribe(
  59         (msg) => this.parseMessage(msg),
  60         (err) => console.error(err),
  61         () => console.log('complete')
  62       );
  63
  64       let listCommunitiesForm: ListCommunitiesForm = {
  65         sort: SortType[SortType.TopAll],
  66         limit: 9999,
  67       }
  68
  69       WebSocketService.Instance.listCommunities(listCommunitiesForm);
  70   }
  71
  72   componentDidMount() {
  73     autosize(document.querySelectorAll('textarea'));
  74   }
  75
  76   componentWillUnmount() {
  77     this.subscription.unsubscribe();
  78   }
  79
  80   render() {
  81     return (
  82       <div>
  83         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
  84           <div class="form-group row">
  85             <label class="col-sm-2 col-form-label">URL</label>
  86             <div class="col-sm-10">
  87               <input type="url" class="form-control" value={this.state.postForm.url} onInput={linkEvent(this, this.handlePostUrlChange)} />
  88               {this.state.suggestedTitle &&
  89                 <span class="text-muted small font-weight-bold pointer" onClick={linkEvent(this, this.copySuggestedTitle}>copy suggested title: {this.state.suggestedTitle}
  90                                                          </span>
  91               }
  92             </div>
  93           </div>
  94           <div class="form-group row">
  95             <label class="col-sm-2 col-form-label">Title</label>
  96             <div class="col-sm-10">
  97               <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows={2} minLength={3} maxLength={100} />
  98             </div>
  99           </div>
 100           <div class="form-group row">
 101             <label class="col-sm-2 col-form-label">Body</label>
 102             <div class="col-sm-10">
 103               <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows={4} maxLength={10000} />
 104             </div>
 105           </div>
 106           {/* Cant change a community from an edit */}
 107           {!this.props.post &&
 108             <div class="form-group row">
 109             <label class="col-sm-2 col-form-label">Community</label>
 110             <div class="col-sm-10">
 111               <select class="form-control" value={this.state.postForm.community_id} onInput={linkEvent(this, this.handlePostCommunityChange)}>
 112                 {this.state.communities.map(community =>
 113                   <option value={community.id}>{community.name}</option>
 114                 )}
 115               </select>
 116             </div>
 117             </div>
 118             }
 119           <div class="form-group row">
 120             <div class="col-sm-10">
 121               <button type="submit" class="btn btn-secondary mr-2">
 122               {this.state.loading ?
 123               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
 124               this.props.post ? 'Save' : 'Create'}</button>
 125               {this.props.post && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
 126             </div>
 127           </div>
 128         </form>
 129       </div>
 130     );
 131   }
 132
 133   handlePostSubmit(i: PostForm, event: any) {
 134     event.preventDefault();
 135     if (i.props.post) {
 136       WebSocketService.Instance.editPost(i.state.postForm);
 137     } else {
 138       WebSocketService.Instance.createPost(i.state.postForm);
 139     }
 140     i.state.loading = true;
 141     i.setState(i.state);
 142   }
 143
 144   copySuggestedTitle(i: PostForm) {
 145     i.state.postForm.name = i.state.suggestedTitle;
 146     i.state.suggestedTitle = undefined;
 147     i.setState(i.state);
 148   }
 149
 150   handlePostUrlChange(i: PostForm, event: any) {
 151     i.state.postForm.url = event.target.value;
 152     getPageTitle(i.state.postForm.url).then(d => {
 153       i.state.suggestedTitle = d;
 154       i.setState(i.state);
 155     });
 156     i.setState(i.state);
 157   }
 158
 159   handlePostNameChange(i: PostForm, event: any) {
 160     i.state.postForm.name = event.target.value;
 161     i.setState(i.state);
 162   }
 163
 164   handlePostBodyChange(i: PostForm, event: any) {
 165     i.state.postForm.body = event.target.value;
 166     i.setState(i.state);
 167   }
 168
 169   handlePostCommunityChange(i: PostForm, event: any) {
 170     i.state.postForm.community_id = Number(event.target.value);
 171     i.setState(i.state);
 172   }
 173
 174   handleCancel(i: PostForm) {
 175     i.props.onCancel();
 176   }
 177
 178   parseMessage(msg: any) {
 179     let op: UserOperation = msgOp(msg);
 180     if (msg.error) {
 181       alert(msg.error);
 182       this.state.loading = false;
 183       this.setState(this.state);
 184       return;
 185     } else if (op == UserOperation.ListCommunities) {
 186       let res: ListCommunitiesResponse = msg;
 187       this.state.communities = res.communities;
 188       if (this.props.post) {
 189         this.state.postForm.community_id = this.props.post.community_id;
 190       } else if (this.props.prevCommunityName) {
 191         let foundCommunityId = res.communities.find(r => r.name == this.props.prevCommunityName).id;
 192         this.state.postForm.community_id = foundCommunityId;
 193       } else {
 194         this.state.postForm.community_id = res.communities[0].id;
 195       }
 196       this.setState(this.state);
 197     } else if (op == UserOperation.CreatePost) {
 198       this.state.loading = false;
 199       let res: PostResponse = msg;
 200       this.props.onCreate(res.post.id);
 201     } else if (op == UserOperation.EditPost) {
 202       this.state.loading = false;
 203       let res: PostResponse = msg;
 204       this.props.onEdit(res.post);
 205     }
 206   }
 207
 208 }
 209
 210