1 import { Component, linkEvent } from 'inferno';
2 import { Prompt } from 'inferno-router';
3 import { PostListings } from './post-listings';
4 import { Subscription } from 'rxjs';
5 import { retryWhen, delay, take } from 'rxjs/operators';
13 ListCommunitiesResponse,
20 WebSocketJsonResponse,
21 } from '../interfaces';
22 import { WebSocketService, UserService } from '../services';
27 capitalizeFirstLetter,
39 import autosize from 'autosize';
40 import Tribute from 'tributejs/src/Tribute.js';
41 import emojiShortName from 'emoji-short-name';
42 import Selectr from 'mobius1-selectr';
43 import { i18n } from '../i18next';
45 const MAX_POST_TITLE_LENGTH = 200;
47 interface PostFormProps {
48 post?: Post; // If a post is given, that means this is an edit
49 params?: PostFormParams;
51 onCreate?(id: number): any;
52 onEdit?(post: Post): any;
55 interface PostFormState {
57 communities: Array<Community>;
59 imageLoading: boolean;
61 suggestedTitle: string;
62 suggestedPosts: Array<Post>;
63 crossPosts: Array<Post>;
67 export class PostForm extends Component<PostFormProps, PostFormState> {
68 private id = `post-form-${randomStr()}`;
69 private tribute: Tribute;
70 private subscription: Subscription;
71 private emptyState: PostFormState = {
77 creator_id: UserService.Instance.user
78 ? UserService.Instance.user.id
85 suggestedTitle: undefined,
88 enable_nsfw: undefined,
91 constructor(props: any, context: any) {
92 super(props, context);
93 this.fetchSimilarPosts = debounce(this.fetchSimilarPosts).bind(this);
94 this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this);
96 this.tribute = setupTribute();
97 this.setupEmojiPicker();
99 this.state = this.emptyState;
101 if (this.props.post) {
102 this.state.postForm = {
103 body: this.props.post.body,
104 // NOTE: debouncing breaks both these for some reason, unless you use defaultValue
105 name: this.props.post.name,
106 community_id: this.props.post.community_id,
107 edit_id: this.props.post.id,
108 creator_id: this.props.post.creator_id,
109 url: this.props.post.url,
110 nsfw: this.props.post.nsfw,
115 if (this.props.params) {
116 this.state.postForm.name = this.props.params.name;
117 if (this.props.params.url) {
118 this.state.postForm.url = this.props.params.url;
120 if (this.props.params.body) {
121 this.state.postForm.body = this.props.params.body;
125 this.subscription = WebSocketService.Instance.subject
126 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
128 msg => this.parseMessage(msg),
129 err => console.error(err),
130 () => console.log('complete')
133 let listCommunitiesForm: ListCommunitiesForm = {
134 sort: SortType[SortType.TopAll],
138 WebSocketService.Instance.listCommunities(listCommunitiesForm);
139 WebSocketService.Instance.getSite();
142 componentDidMount() {
143 var textarea: any = document.getElementById(this.id);
145 this.tribute.attach(textarea);
146 textarea.addEventListener('tribute-replaced', () => {
147 this.state.postForm.body = textarea.value;
148 this.setState(this.state);
149 autosize.update(textarea);
154 componentWillUnmount() {
155 this.subscription.unsubscribe();
163 !this.state.loading &&
164 (this.state.postForm.name ||
165 this.state.postForm.url ||
166 this.state.postForm.body)
168 message={i18n.t('block_leaving')}
170 <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
171 <div class="form-group row">
172 <label class="col-sm-2 col-form-label" htmlFor="post-url">
175 <div class="col-sm-10">
180 value={this.state.postForm.url}
181 onInput={linkEvent(this, this.handlePostUrlChange)}
182 onPaste={linkEvent(this, this.handleImageUploadPaste)}
184 {this.state.suggestedTitle && (
186 class="mt-1 text-muted small font-weight-bold pointer"
187 onClick={linkEvent(this, this.copySuggestedTitle)}
189 {i18n.t('copy_suggested_title', {
190 title: this.state.suggestedTitle,
196 htmlFor="file-upload"
197 className={`${UserService.Instance.user &&
198 'pointer'} d-inline-block float-right text-muted font-weight-bold`}
199 data-tippy-content={i18n.t('upload_image')}
201 <svg class="icon icon-inline">
202 <use xlinkHref="#icon-image"></use>
208 accept="image/*,video/*"
211 disabled={!UserService.Instance.user}
212 onChange={linkEvent(this, this.handleImageUpload)}
215 {validURL(this.state.postForm.url) && (
217 href={`${archiveUrl}/?run=1&url=${encodeURIComponent(
218 this.state.postForm.url
221 class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
223 {i18n.t('archive_link')}
226 {this.state.imageLoading && (
227 <svg class="icon icon-spinner spin">
228 <use xlinkHref="#icon-spinner"></use>
231 {isImage(this.state.postForm.url) && (
232 <img src={this.state.postForm.url} class="img-fluid" />
234 {this.state.crossPosts.length > 0 && (
236 <div class="my-1 text-muted small font-weight-bold">
237 {i18n.t('cross_posts')}
239 <PostListings showCommunity posts={this.state.crossPosts} />
244 <div class="form-group row">
245 <label class="col-sm-2 col-form-label" htmlFor="post-title">
248 <div class="col-sm-10">
250 value={this.state.postForm.name}
252 onInput={linkEvent(this, this.handlePostNameChange)}
257 maxLength={MAX_POST_TITLE_LENGTH}
259 {this.state.suggestedPosts.length > 0 && (
261 <div class="my-1 text-muted small font-weight-bold">
262 {i18n.t('related_posts')}
264 <PostListings posts={this.state.suggestedPosts} />
270 <div class="form-group row">
271 <label class="col-sm-2 col-form-label" htmlFor={this.id}>
274 <div class="col-sm-10">
277 value={this.state.postForm.body}
278 onInput={linkEvent(this, this.handlePostBodyChange)}
279 className={`form-control ${this.state.previewMode && 'd-none'}`}
283 {this.state.previewMode && (
286 dangerouslySetInnerHTML={mdToHtml(this.state.postForm.body)}
289 {this.state.postForm.body && (
291 className={`mt-1 mr-2 btn btn-sm btn-secondary ${this.state
292 .previewMode && 'active'}`}
293 onClick={linkEvent(this, this.handlePreviewToggle)}
299 href={markdownHelpUrl}
301 class="d-inline-block float-right text-muted font-weight-bold"
302 title={i18n.t('formatting_help')}
304 <svg class="icon icon-inline">
305 <use xlinkHref="#icon-help-circle"></use>
309 onClick={linkEvent(this, this.handleEmojiPickerClick)}
310 class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold"
311 data-tippy-content={i18n.t('emoji_picker')}
313 <svg class="icon icon-inline">
314 <use xlinkHref="#icon-smile"></use>
319 {!this.props.post && (
320 <div class="form-group row">
321 <label class="col-sm-2 col-form-label" htmlFor="post-community">
322 {i18n.t('community')}
324 <div class="col-sm-10">
328 value={this.state.postForm.community_id}
329 onInput={linkEvent(this, this.handlePostCommunityChange)}
331 {this.state.communities.map(community => (
332 <option value={community.id}>{community.name}</option>
338 {this.state.enable_nsfw && (
339 <div class="form-group row">
340 <div class="col-sm-10">
341 <div class="form-check">
343 class="form-check-input"
346 checked={this.state.postForm.nsfw}
347 onChange={linkEvent(this, this.handlePostNsfwChange)}
349 <label class="form-check-label" htmlFor="post-nsfw">
356 <div class="form-group row">
357 <div class="col-sm-10">
358 <button type="submit" class="btn btn-secondary mr-2">
359 {this.state.loading ? (
360 <svg class="icon icon-spinner spin">
361 <use xlinkHref="#icon-spinner"></use>
363 ) : this.props.post ? (
364 capitalizeFirstLetter(i18n.t('save'))
366 capitalizeFirstLetter(i18n.t('create'))
369 {this.props.post && (
372 class="btn btn-secondary"
373 onClick={linkEvent(this, this.handleCancel)}
386 emojiPicker.on('emoji', twemojiHtmlStr => {
387 if (this.state.postForm.body == null) {
388 this.state.postForm.body = '';
390 var el = document.createElement('div');
391 el.innerHTML = twemojiHtmlStr;
392 let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
393 let shortName = `:${emojiShortName[nativeUnicode]}:`;
394 this.state.postForm.body += shortName;
395 this.setState(this.state);
399 handlePostSubmit(i: PostForm, event: any) {
400 event.preventDefault();
402 WebSocketService.Instance.editPost(i.state.postForm);
404 WebSocketService.Instance.createPost(i.state.postForm);
406 i.state.loading = true;
410 copySuggestedTitle(i: PostForm) {
411 i.state.postForm.name = i.state.suggestedTitle.substring(
413 MAX_POST_TITLE_LENGTH
415 i.state.suggestedTitle = undefined;
419 handlePostUrlChange(i: PostForm, event: any) {
420 i.state.postForm.url = event.target.value;
426 if (validURL(this.state.postForm.url)) {
427 let form: SearchForm = {
428 q: this.state.postForm.url,
429 type_: SearchType[SearchType.Url],
430 sort: SortType[SortType.TopAll],
435 WebSocketService.Instance.search(form);
437 // Fetch the page title
438 getPageTitle(this.state.postForm.url).then(d => {
439 this.state.suggestedTitle = d;
440 this.setState(this.state);
443 this.state.suggestedTitle = undefined;
444 this.state.crossPosts = [];
448 handlePostNameChange(i: PostForm, event: any) {
449 i.state.postForm.name = event.target.value;
451 i.fetchSimilarPosts();
454 fetchSimilarPosts() {
455 let form: SearchForm = {
456 q: this.state.postForm.name,
457 type_: SearchType[SearchType.Posts],
458 sort: SortType[SortType.TopAll],
459 community_id: this.state.postForm.community_id,
464 if (this.state.postForm.name !== '') {
465 WebSocketService.Instance.search(form);
467 this.state.suggestedPosts = [];
470 this.setState(this.state);
473 handlePostBodyChange(i: PostForm, event: any) {
474 i.state.postForm.body = event.target.value;
478 handlePostCommunityChange(i: PostForm, event: any) {
479 i.state.postForm.community_id = Number(event.target.value);
483 handlePostNsfwChange(i: PostForm, event: any) {
484 i.state.postForm.nsfw = event.target.checked;
488 handleCancel(i: PostForm) {
492 handlePreviewToggle(i: PostForm, event: any) {
493 event.preventDefault();
494 i.state.previewMode = !i.state.previewMode;
498 handleImageUploadPaste(i: PostForm, event: any) {
499 let image = event.clipboardData.files[0];
501 i.handleImageUpload(i, image);
505 handleImageUpload(i: PostForm, event: any) {
508 event.preventDefault();
509 file = event.target.files[0];
514 const imageUploadUrl = `/pictshare/api/upload.php`;
515 const formData = new FormData();
516 formData.append('file', file);
518 i.state.imageLoading = true;
521 fetch(imageUploadUrl, {
525 .then(res => res.json())
527 let url = `${window.location.origin}/pictshare/${encodeURI(res.url)}`;
528 if (res.filetype == 'mp4') {
531 i.state.postForm.url = url;
532 i.state.imageLoading = false;
536 i.state.imageLoading = false;
538 toast(error, 'danger');
542 handleEmojiPickerClick(_i: PostForm, event: any) {
543 emojiPicker.togglePicker(event.target);
546 parseMessage(msg: WebSocketJsonResponse) {
547 let res = wsJsonToRes(msg);
549 toast(i18n.t(msg.error), 'danger');
550 this.state.loading = false;
551 this.setState(this.state);
553 } else if (res.op == UserOperation.ListCommunities) {
554 let data = res.data as ListCommunitiesResponse;
555 this.state.communities = data.communities;
556 if (this.props.post) {
557 this.state.postForm.community_id = this.props.post.community_id;
558 } else if (this.props.params && this.props.params.community) {
559 let foundCommunityId = data.communities.find(
560 r => r.name == this.props.params.community
562 this.state.postForm.community_id = foundCommunityId;
564 this.state.postForm.community_id = data.communities[0].id;
566 this.setState(this.state);
568 // Set up select searching
569 let selectId: any = document.getElementById('post-community');
571 let selector = new Selectr(selectId, { nativeDropdown: false });
572 selector.on('selectr.select', option => {
573 this.state.postForm.community_id = Number(option.value);
576 } else if (res.op == UserOperation.CreatePost) {
577 let data = res.data as PostResponse;
578 if (data.post.creator_id == UserService.Instance.user.id) {
579 this.state.loading = false;
580 this.props.onCreate(data.post.id);
582 } else if (res.op == UserOperation.EditPost) {
583 let data = res.data as PostResponse;
584 if (data.post.creator_id == UserService.Instance.user.id) {
585 this.state.loading = false;
586 this.props.onEdit(data.post);
588 } else if (res.op == UserOperation.Search) {
589 let data = res.data as SearchResponse;
591 if (data.type_ == SearchType[SearchType.Posts]) {
592 this.state.suggestedPosts = data.posts;
593 } else if (data.type_ == SearchType[SearchType.Url]) {
594 this.state.crossPosts = data.posts;
596 this.setState(this.state);
597 } else if (res.op == UserOperation.GetSite) {
598 let data = res.data as GetSiteResponse;
599 this.state.enable_nsfw = data.site.enable_nsfw;
600 this.setState(this.state);