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}</span>
  90               }
  91             </div>
  92           </div>
  93           <div class="form-group row">
  94             <label class="col-sm-2 col-form-label">Title</label>
  95             <div class="col-sm-10">
  96               <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows={2} minLength={3} maxLength={100} />
  97             </div>
  98           </div>
  99           <div class="form-group row">
 100             <label class="col-sm-2 col-form-label">Body</label>
 101             <div class="col-sm-10">
 102               <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows={4} maxLength={10000} />
 103             </div>
 104           </div>
 105           {/* Cant change a community from an edit */}
 106           {!this.props.post &&
 107             <div class="form-group row">
 108             <label class="col-sm-2 col-form-label">Community</label>
 109             <div class="col-sm-10">
 110               <select class="form-control" value={this.state.postForm.community_id} onInput={linkEvent(this, this.handlePostCommunityChange)}>
 111                 {this.state.communities.map(community =>
 112                   <option value={community.id}>{community.name}</option>
 113                 )}
 114               </select>
 115             </div>
 116             </div>
 117             }
 118           <div class="form-group row">
 119             <div class="col-sm-10">
 120               <button type="submit" class="btn btn-secondary mr-2">
 121               {this.state.loading ?
 122               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
 123               this.props.post ? 'Save' : 'Create'}</button>
 124               {this.props.post && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
 125             </div>
 126           </div>
 127         </form>
 128       </div>
 129     );
 130   }
 131
 132   handlePostSubmit(i: PostForm, event: any) {
 133     event.preventDefault();
 134     if (i.props.post) {
 135       WebSocketService.Instance.editPost(i.state.postForm);
 136     } else {
 137       WebSocketService.Instance.createPost(i.state.postForm);
 138     }
 139     i.state.loading = true;
 140     i.setState(i.state);
 141   }
 142
 143   copySuggestedTitle(i: PostForm) {
 144     i.state.postForm.name = i.state.suggestedTitle;
 145     i.state.suggestedTitle = undefined;
 146     i.setState(i.state);
 147   }
 148
 149   handlePostUrlChange(i: PostForm, event: any) {
 150     i.state.postForm.url = event.target.value;
 151     getPageTitle(i.state.postForm.url).then(d => {
 152       i.state.suggestedTitle = d;
 153       i.setState(i.state);
 154     });
 155     i.setState(i.state);
 156   }
 157
 158   handlePostNameChange(i: PostForm, event: any) {
 159     i.state.postForm.name = event.target.value;
 160     i.setState(i.state);
 161   }
 162
 163   handlePostBodyChange(i: PostForm, event: any) {
 164     i.state.postForm.body = event.target.value;
 165     i.setState(i.state);
 166   }
 167
 168   handlePostCommunityChange(i: PostForm, event: any) {
 169     i.state.postForm.community_id = Number(event.target.value);
 170     i.setState(i.state);
 171   }
 172
 173   handleCancel(i: PostForm) {
 174     i.props.onCancel();
 175   }
 176
 177   parseMessage(msg: any) {
 178     let op: UserOperation = msgOp(msg);
 179     if (msg.error) {
 180       alert(msg.error);
 181       this.state.loading = false;
 182       this.setState(this.state);
 183       return;
 184     } else if (op == UserOperation.ListCommunities) {
 185       let res: ListCommunitiesResponse = msg;
 186       this.state.communities = res.communities;
 187       if (this.props.post) {
 188         this.state.postForm.community_id = this.props.post.community_id;
 189       } else if (this.props.prevCommunityName) {
 190         let foundCommunityId = res.communities.find(r => r.name == this.props.prevCommunityName).id;
 191         this.state.postForm.community_id = foundCommunityId;
 192       } else {
 193         this.state.postForm.community_id = res.communities[0].id;
 194       }
 195       this.setState(this.state);
 196     } else if (op == UserOperation.CreatePost) {
 197       this.state.loading = false;
 198       let res: PostResponse = msg;
 199       this.props.onCreate(res.post.id);
 200     } else if (op == UserOperation.EditPost) {
 201       this.state.loading = false;
 202       let res: PostResponse = msg;
 203       this.props.onEdit(res.post);
 204     }
 205   }
 206
 207 }
 208
 209