ui/src/components/post-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { PostListings } from './post-listings';
   3 import { Subscription } from 'rxjs';
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import {
   6   PostForm as PostFormI,
   7   PostFormParams,
   8   Post,
   9   PostResponse,
  10   UserOperation,
  11   Community,
  12   ListCommunitiesResponse,
  13   ListCommunitiesForm,
  14   SortType,
  15   SearchForm,
  16   SearchType,
  17   SearchResponse,
  18 } from '../interfaces';
  19 import { WebSocketService, UserService } from '../services';
  20 import {
  21   msgOp,
  22   getPageTitle,
  23   debounce,
  24   validURL,
  25   capitalizeFirstLetter,
  26   markdownHelpUrl,
  27   archiveUrl,
  28   mdToHtml,
  29 } from '../utils';
  30 import * as autosize from 'autosize';
  31 import { i18n } from '../i18next';
  32 import { T } from 'inferno-i18next';
  33
  34 interface PostFormProps {
  35   post?: Post; // If a post is given, that means this is an edit
  36   params?: PostFormParams;
  37   onCancel?(): any;
  38   onCreate?(id: number): any;
  39   onEdit?(post: Post): any;
  40 }
  41
  42 interface PostFormState {
  43   postForm: PostFormI;
  44   communities: Array<Community>;
  45   loading: boolean;
  46   imageLoading: boolean;
  47   previewMode: boolean;
  48   suggestedTitle: string;
  49   suggestedPosts: Array<Post>;
  50   crossPosts: Array<Post>;
  51 }
  52
  53 export class PostForm extends Component<PostFormProps, PostFormState> {
  54   private subscription: Subscription;
  55   private emptyState: PostFormState = {
  56     postForm: {
  57       name: null,
  58       nsfw: false,
  59       auth: null,
  60       community_id: null,
  61       creator_id: UserService.Instance.user
  62         ? UserService.Instance.user.id
  63         : null,
  64     },
  65     communities: [],
  66     loading: false,
  67     imageLoading: false,
  68     previewMode: false,
  69     suggestedTitle: undefined,
  70     suggestedPosts: [],
  71     crossPosts: [],
  72   };
  73
  74   constructor(props: any, context: any) {
  75     super(props, context);
  76
  77     this.state = this.emptyState;
  78
  79     if (this.props.post) {
  80       this.state.postForm = {
  81         body: this.props.post.body,
  82         name: this.props.post.name,
  83         community_id: this.props.post.community_id,
  84         edit_id: this.props.post.id,
  85         creator_id: this.props.post.creator_id,
  86         url: this.props.post.url,
  87         nsfw: this.props.post.nsfw,
  88         auth: null,
  89       };
  90     }
  91
  92     if (this.props.params) {
  93       this.state.postForm.name = this.props.params.name;
  94       if (this.props.params.url) {
  95         this.state.postForm.url = this.props.params.url;
  96       }
  97       if (this.props.params.body) {
  98         this.state.postForm.body = this.props.params.body;
  99       }
 100     }
 101
 102     this.subscription = WebSocketService.Instance.subject
 103       .pipe(
 104         retryWhen(errors =>
 105           errors.pipe(
 106             delay(3000),
 107             take(10)
 108           )
 109         )
 110       )
 111       .subscribe(
 112         msg => this.parseMessage(msg),
 113         err => console.error(err),
 114         () => console.log('complete')
 115       );
 116
 117     let listCommunitiesForm: ListCommunitiesForm = {
 118       sort: SortType[SortType.TopAll],
 119       limit: 9999,
 120     };
 121
 122     WebSocketService.Instance.listCommunities(listCommunitiesForm);
 123   }
 124
 125   componentDidMount() {
 126     autosize(document.querySelectorAll('textarea'));
 127   }
 128
 129   componentWillUnmount() {
 130     this.subscription.unsubscribe();
 131   }
 132
 133   render() {
 134     return (
 135       <div>
 136         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
 137           <div class="form-group row">
 138             <label class="col-sm-2 col-form-label">
 139               <T i18nKey="url">#</T>
 140             </label>
 141             <div class="col-sm-10">
 142               <input
 143                 type="url"
 144                 class="form-control"
 145                 value={this.state.postForm.url}
 146                 onInput={linkEvent(this, this.handlePostUrlChange)}
 147               />
 148               {this.state.suggestedTitle && (
 149                 <div
 150                   class="mt-1 text-muted small font-weight-bold pointer"
 151                   onClick={linkEvent(this, this.copySuggestedTitle)}
 152                 >
 153                   <T
 154                     i18nKey="copy_suggested_title"
 155                     interpolation={{ title: this.state.suggestedTitle }}
 156                   >
 157                     #
 158                   </T>
 159                 </div>
 160               )}
 161               <form>
 162                 <label
 163                   htmlFor="file-upload"
 164                   className={`${UserService.Instance.user &&
 165                     'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
 166                 >
 167                   <T i18nKey="upload_image">#</T>
 168                 </label>
 169                 <input
 170                   id="file-upload"
 171                   type="file"
 172                   accept="image/*,video/*"
 173                   name="file"
 174                   class="d-none"
 175                   disabled={!UserService.Instance.user}
 176                   onChange={linkEvent(this, this.handleImageUpload)}
 177                 />
 178               </form>
 179               {validURL(this.state.postForm.url) && (
 180                 <a
 181                   href={`${archiveUrl}/?run=1&url=${encodeURIComponent(
 182                     this.state.postForm.url
 183                   )}`}
 184                   target="_blank"
 185                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
 186                 >
 187                   <T i18nKey="archive_link">#</T>
 188                 </a>
 189               )}
 190               {this.state.imageLoading && (
 191                 <svg class="icon icon-spinner spin">
 192                   <use xlinkHref="#icon-spinner"></use>
 193                 </svg>
 194               )}
 195               {this.state.crossPosts.length > 0 && (
 196                 <>
 197                   <div class="my-1 text-muted small font-weight-bold">
 198                     <T i18nKey="cross_posts">#</T>
 199                   </div>
 200                   <PostListings showCommunity posts={this.state.crossPosts} />
 201                 </>
 202               )}
 203             </div>
 204           </div>
 205           <div class="form-group row">
 206             <label class="col-sm-2 col-form-label">
 207               <T i18nKey="title">#</T>
 208             </label>
 209             <div class="col-sm-10">
 210               <textarea
 211                 value={this.state.postForm.name}
 212                 onInput={linkEvent(this, this.handlePostNameChange)}
 213                 class="form-control"
 214                 required
 215                 rows={2}
 216                 minLength={3}
 217                 maxLength={100}
 218               />
 219               {this.state.suggestedPosts.length > 0 && (
 220                 <>
 221                   <div class="my-1 text-muted small font-weight-bold">
 222                     <T i18nKey="related_posts">#</T>
 223                   </div>
 224                   <PostListings posts={this.state.suggestedPosts} />
 225                 </>
 226               )}
 227             </div>
 228           </div>
 229           <div class="form-group row">
 230             <label class="col-sm-2 col-form-label">
 231               <T i18nKey="body">#</T>
 232             </label>
 233             <div class="col-sm-10">
 234               <textarea
 235                 value={this.state.postForm.body}
 236                 onInput={linkEvent(this, this.handlePostBodyChange)}
 237                 className={`form-control ${this.state.previewMode && 'd-none'}`}
 238                 rows={4}
 239                 maxLength={10000}
 240               />
 241               {this.state.previewMode && (
 242                 <div
 243                   className="md-div"
 244                   dangerouslySetInnerHTML={mdToHtml(this.state.postForm.body)}
 245                 />
 246               )}
 247               {this.state.postForm.body && (
 248                 <button
 249                   className={`mt-1 mr-2 btn btn-sm btn-secondary ${this.state
 250                     .previewMode && 'active'}`}
 251                   onClick={linkEvent(this, this.handlePreviewToggle)}
 252                 >
 253                   <T i18nKey="preview">#</T>
 254                 </button>
 255               )}
 256               <a
 257                 href={markdownHelpUrl}
 258                 target="_blank"
 259                 class="d-inline-block float-right text-muted small font-weight-bold"
 260               >
 261                 <T i18nKey="formatting_help">#</T>
 262               </a>
 263             </div>
 264           </div>
 265           {!this.props.post && (
 266             <div class="form-group row">
 267               <label class="col-sm-2 col-form-label">
 268                 <T i18nKey="community">#</T>
 269               </label>
 270               <div class="col-sm-10">
 271                 <select
 272                   class="form-control"
 273                   value={this.state.postForm.community_id}
 274                   onInput={linkEvent(this, this.handlePostCommunityChange)}
 275                 >
 276                   {this.state.communities.map(community => (
 277                     <option value={community.id}>{community.name}</option>
 278                   ))}
 279                 </select>
 280               </div>
 281             </div>
 282           )}
 283           {WebSocketService.Instance.site.enable_nsfw && (
 284             <div class="form-group row">
 285               <div class="col-sm-10">
 286                 <div class="form-check">
 287                   <input
 288                     class="form-check-input"
 289                     type="checkbox"
 290                     checked={this.state.postForm.nsfw}
 291                     onChange={linkEvent(this, this.handlePostNsfwChange)}
 292                   />
 293                   <label class="form-check-label">
 294                     <T i18nKey="nsfw">#</T>
 295                   </label>
 296                 </div>
 297               </div>
 298             </div>
 299           )}
 300           <div class="form-group row">
 301             <div class="col-sm-10">
 302               <button type="submit" class="btn btn-secondary mr-2">
 303                 {this.state.loading ? (
 304                   <svg class="icon icon-spinner spin">
 305                     <use xlinkHref="#icon-spinner"></use>
 306                   </svg>
 307                 ) : this.props.post ? (
 308                   capitalizeFirstLetter(i18n.t('save'))
 309                 ) : (
 310                   capitalizeFirstLetter(i18n.t('create'))
 311                 )}
 312               </button>
 313               {this.props.post && (
 314                 <button
 315                   type="button"
 316                   class="btn btn-secondary"
 317                   onClick={linkEvent(this, this.handleCancel)}
 318                 >
 319                   <T i18nKey="cancel">#</T>
 320                 </button>
 321               )}
 322             </div>
 323           </div>
 324         </form>
 325       </div>
 326     );
 327   }
 328
 329   handlePostSubmit(i: PostForm, event: any) {
 330     event.preventDefault();
 331     if (i.props.post) {
 332       WebSocketService.Instance.editPost(i.state.postForm);
 333     } else {
 334       WebSocketService.Instance.createPost(i.state.postForm);
 335     }
 336     i.state.loading = true;
 337     i.setState(i.state);
 338   }
 339
 340   copySuggestedTitle(i: PostForm) {
 341     i.state.postForm.name = i.state.suggestedTitle;
 342     i.state.suggestedTitle = undefined;
 343     i.setState(i.state);
 344   }
 345
 346   handlePostUrlChange = debounce((i: PostForm, event: any) => {
 347     i.state.postForm.url = event.target.value;
 348     if (validURL(i.state.postForm.url)) {
 349       let form: SearchForm = {
 350         q: i.state.postForm.url,
 351         type_: SearchType[SearchType.Url],
 352         sort: SortType[SortType.TopAll],
 353         page: 1,
 354         limit: 6,
 355       };
 356
 357       WebSocketService.Instance.search(form);
 358
 359       // Fetch the page title
 360       getPageTitle(i.state.postForm.url).then(d => {
 361         i.state.suggestedTitle = d;
 362         i.setState(i.state);
 363       });
 364     } else {
 365       i.state.suggestedTitle = undefined;
 366       i.state.crossPosts = [];
 367     }
 368
 369     i.setState(i.state);
 370   });
 371
 372   handlePostNameChange = debounce((i: PostForm, event: any) => {
 373     i.state.postForm.name = event.target.value;
 374     let form: SearchForm = {
 375       q: i.state.postForm.name,
 376       type_: SearchType[SearchType.Posts],
 377       sort: SortType[SortType.TopAll],
 378       community_id: i.state.postForm.community_id,
 379       page: 1,
 380       limit: 6,
 381     };
 382
 383     if (i.state.postForm.name !== '') {
 384       WebSocketService.Instance.search(form);
 385     } else {
 386       i.state.suggestedPosts = [];
 387     }
 388
 389     i.setState(i.state);
 390   });
 391
 392   handlePostBodyChange(i: PostForm, event: any) {
 393     i.state.postForm.body = event.target.value;
 394     i.setState(i.state);
 395   }
 396
 397   handlePostCommunityChange(i: PostForm, event: any) {
 398     i.state.postForm.community_id = Number(event.target.value);
 399     i.setState(i.state);
 400   }
 401
 402   handlePostNsfwChange(i: PostForm, event: any) {
 403     i.state.postForm.nsfw = event.target.checked;
 404     i.setState(i.state);
 405   }
 406
 407   handleCancel(i: PostForm) {
 408     i.props.onCancel();
 409   }
 410
 411   handlePreviewToggle(i: PostForm, event: any) {
 412     event.preventDefault();
 413     i.state.previewMode = !i.state.previewMode;
 414     i.setState(i.state);
 415   }
 416
 417   handleImageUpload(i: PostForm, event: any) {
 418     event.preventDefault();
 419     let file = event.target.files[0];
 420     const imageUploadUrl = `/pictshare/api/upload.php`;
 421     const formData = new FormData();
 422     formData.append('file', file);
 423
 424     i.state.imageLoading = true;
 425     i.setState(i.state);
 426
 427     fetch(imageUploadUrl, {
 428       method: 'POST',
 429       body: formData,
 430     })
 431       .then(res => res.json())
 432       .then(res => {
 433         let url = `${window.location.origin}/pictshare/${res.url}`;
 434         if (res.filetype == 'mp4') {
 435           url += '/raw';
 436         }
 437         i.state.postForm.url = url;
 438         i.state.imageLoading = false;
 439         i.setState(i.state);
 440       })
 441       .catch(error => {
 442         i.state.imageLoading = false;
 443         i.setState(i.state);
 444         alert(error);
 445       });
 446   }
 447
 448   parseMessage(msg: any) {
 449     let op: UserOperation = msgOp(msg);
 450     if (msg.error) {
 451       alert(i18n.t(msg.error));
 452       this.state.loading = false;
 453       this.setState(this.state);
 454       return;
 455     } else if (op == UserOperation.ListCommunities) {
 456       let res: ListCommunitiesResponse = msg;
 457       this.state.communities = res.communities;
 458       if (this.props.post) {
 459         this.state.postForm.community_id = this.props.post.community_id;
 460       } else if (this.props.params && this.props.params.community) {
 461         let foundCommunityId = res.communities.find(
 462           r => r.name == this.props.params.community
 463         ).id;
 464         this.state.postForm.community_id = foundCommunityId;
 465       } else {
 466         this.state.postForm.community_id = res.communities[0].id;
 467       }
 468       this.setState(this.state);
 469     } else if (op == UserOperation.CreatePost) {
 470       this.state.loading = false;
 471       let res: PostResponse = msg;
 472       this.props.onCreate(res.post.id);
 473     } else if (op == UserOperation.EditPost) {
 474       this.state.loading = false;
 475       let res: PostResponse = msg;
 476       this.props.onEdit(res.post);
 477     } else if (op == UserOperation.Search) {
 478       let res: SearchResponse = msg;
 479
 480       if (res.type_ == SearchType[SearchType.Posts]) {
 481         this.state.suggestedPosts = res.posts;
 482       } else if (res.type_ == SearchType[SearchType.Url]) {
 483         this.state.crossPosts = res.posts;
 484       }
 485       this.setState(this.state);
 486     }
 487   }
 488 }