1 import { Component, linkEvent } from 'inferno';
2 import { Prompt } from 'inferno-router';
3 import { PostListings } from './post-listings';
4 import { MarkdownTextArea } from './markdown-textarea';
5 import { Subscription } from 'rxjs';
6 import { retryWhen, delay, take } from 'rxjs/operators';
14 ListCommunitiesResponse,
20 WebSocketJsonResponse,
21 } from '../interfaces';
22 import { WebSocketService, UserService } from '../services';
27 capitalizeFirstLetter,
38 import Choices from 'choices.js';
39 import { i18n } from '../i18next';
41 const MAX_POST_TITLE_LENGTH = 200;
43 interface PostFormProps {
44 post?: Post; // If a post is given, that means this is an edit
45 params?: PostFormParams;
47 onCreate?(id: number): any;
48 onEdit?(post: Post): any;
50 enableDownvotes: boolean;
53 interface PostFormState {
55 communities: Array<Community>;
57 imageLoading: boolean;
59 suggestedTitle: string;
60 suggestedPosts: Array<Post>;
61 crossPosts: Array<Post>;
64 export class PostForm extends Component<PostFormProps, PostFormState> {
65 private id = `post-form-${randomStr()}`;
66 private subscription: Subscription;
67 private choices: Choices;
68 private emptyState: PostFormState = {
79 suggestedTitle: undefined,
84 constructor(props: any, context: any) {
85 super(props, context);
86 this.fetchSimilarPosts = debounce(this.fetchSimilarPosts).bind(this);
87 this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this);
88 this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
90 this.state = this.emptyState;
92 if (this.props.post) {
93 this.state.postForm = {
94 body: this.props.post.body,
95 // NOTE: debouncing breaks both these for some reason, unless you use defaultValue
96 name: this.props.post.name,
97 community_id: this.props.post.community_id,
98 edit_id: this.props.post.id,
99 url: this.props.post.url,
100 nsfw: this.props.post.nsfw,
105 if (this.props.params) {
106 this.state.postForm.name = this.props.params.name;
107 if (this.props.params.url) {
108 this.state.postForm.url = this.props.params.url;
110 if (this.props.params.body) {
111 this.state.postForm.body = this.props.params.body;
115 this.subscription = WebSocketService.Instance.subject
116 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
118 msg => this.parseMessage(msg),
119 err => console.error(err),
120 () => console.log('complete')
123 let listCommunitiesForm: ListCommunitiesForm = {
124 sort: SortType[SortType.TopAll],
128 WebSocketService.Instance.listCommunities(listCommunitiesForm);
131 componentDidMount() {
135 componentDidUpdate() {
137 !this.state.loading &&
138 (this.state.postForm.name ||
139 this.state.postForm.url ||
140 this.state.postForm.body)
142 window.onbeforeunload = () => true;
144 window.onbeforeunload = undefined;
148 componentWillUnmount() {
149 this.subscription.unsubscribe();
150 /* this.choices && this.choices.destroy(); */
151 window.onbeforeunload = null;
159 !this.state.loading &&
160 (this.state.postForm.name ||
161 this.state.postForm.url ||
162 this.state.postForm.body)
164 message={i18n.t('block_leaving')}
166 <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
167 <div class="form-group row">
168 <label class="col-sm-2 col-form-label" htmlFor="post-url">
171 <div class="col-sm-10">
176 value={this.state.postForm.url}
177 onInput={linkEvent(this, this.handlePostUrlChange)}
178 onPaste={linkEvent(this, this.handleImageUploadPaste)}
180 {this.state.suggestedTitle && (
182 class="mt-1 text-muted small font-weight-bold pointer"
183 onClick={linkEvent(this, this.copySuggestedTitle)}
185 {i18n.t('copy_suggested_title', {
186 title: this.state.suggestedTitle,
192 htmlFor="file-upload"
194 UserService.Instance.user && 'pointer'
195 } d-inline-block float-right text-muted font-weight-bold`}
196 data-tippy-content={i18n.t('upload_image')}
198 <svg class="icon icon-inline">
199 <use xlinkHref="#icon-image"></use>
205 accept="image/*,video/*"
208 disabled={!UserService.Instance.user}
209 onChange={linkEvent(this, this.handleImageUpload)}
212 {validURL(this.state.postForm.url) && (
214 href={`${archiveUrl}/?run=1&url=${encodeURIComponent(
215 this.state.postForm.url
218 class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
221 {i18n.t('archive_link')}
224 {this.state.imageLoading && (
225 <svg class="icon icon-spinner spin">
226 <use xlinkHref="#icon-spinner"></use>
229 {isImage(this.state.postForm.url) && (
230 <img src={this.state.postForm.url} class="img-fluid" />
232 {this.state.crossPosts.length > 0 && (
234 <div class="my-1 text-muted small font-weight-bold">
235 {i18n.t('cross_posts')}
239 posts={this.state.crossPosts}
240 enableDownvotes={this.props.enableDownvotes}
241 enableNsfw={this.props.enableNsfw}
247 <div class="form-group row">
248 <label class="col-sm-2 col-form-label" htmlFor="post-title">
251 <div class="col-sm-10">
253 value={this.state.postForm.name}
255 onInput={linkEvent(this, this.handlePostNameChange)}
256 class={`form-control ${
257 !validTitle(this.state.postForm.name) && 'is-invalid'
262 maxLength={MAX_POST_TITLE_LENGTH}
264 {!validTitle(this.state.postForm.name) && (
265 <div class="invalid-feedback">
266 {i18n.t('invalid_post_title')}
269 {this.state.suggestedPosts.length > 0 && (
271 <div class="my-1 text-muted small font-weight-bold">
272 {i18n.t('related_posts')}
275 posts={this.state.suggestedPosts}
276 enableDownvotes={this.props.enableDownvotes}
277 enableNsfw={this.props.enableNsfw}
284 <div class="form-group row">
285 <label class="col-sm-2 col-form-label" htmlFor={this.id}>
288 <div class="col-sm-10">
290 initialContent={this.state.postForm.body}
291 onContentChange={this.handlePostBodyChange}
295 {!this.props.post && (
296 <div class="form-group row">
297 <label class="col-sm-2 col-form-label" htmlFor="post-community">
298 {i18n.t('community')}
300 <div class="col-sm-10">
304 value={this.state.postForm.community_id}
305 onInput={linkEvent(this, this.handlePostCommunityChange)}
307 <option>{i18n.t('select_a_community')}</option>
308 {this.state.communities.map(community => (
309 <option value={community.id}>
312 : `${hostname(community.actor_id)}/${community.name}`}
319 {this.props.enableNsfw && (
320 <div class="form-group row">
321 <div class="col-sm-10">
322 <div class="form-check">
324 class="form-check-input"
327 checked={this.state.postForm.nsfw}
328 onChange={linkEvent(this, this.handlePostNsfwChange)}
330 <label class="form-check-label" htmlFor="post-nsfw">
337 <div class="form-group row">
338 <div class="col-sm-10">
341 !this.state.postForm.community_id || this.state.loading
344 class="btn btn-secondary mr-2"
346 {this.state.loading ? (
347 <svg class="icon icon-spinner spin">
348 <use xlinkHref="#icon-spinner"></use>
350 ) : this.props.post ? (
351 capitalizeFirstLetter(i18n.t('save'))
353 capitalizeFirstLetter(i18n.t('create'))
356 {this.props.post && (
359 class="btn btn-secondary"
360 onClick={linkEvent(this, this.handleCancel)}
372 handlePostSubmit(i: PostForm, event: any) {
373 event.preventDefault();
375 // Coerce empty url string to undefined
376 if (i.state.postForm.url && i.state.postForm.url === '') {
377 i.state.postForm.url = undefined;
381 WebSocketService.Instance.editPost(i.state.postForm);
383 WebSocketService.Instance.createPost(i.state.postForm);
385 i.state.loading = true;
389 copySuggestedTitle(i: PostForm) {
390 i.state.postForm.name = i.state.suggestedTitle.substring(
392 MAX_POST_TITLE_LENGTH
394 i.state.suggestedTitle = undefined;
398 handlePostUrlChange(i: PostForm, event: any) {
399 i.state.postForm.url = event.target.value;
405 if (validURL(this.state.postForm.url)) {
406 let form: SearchForm = {
407 q: this.state.postForm.url,
408 type_: SearchType[SearchType.Url],
409 sort: SortType[SortType.TopAll],
414 WebSocketService.Instance.search(form);
416 // Fetch the page title
417 getPageTitle(this.state.postForm.url).then(d => {
418 this.state.suggestedTitle = d;
419 this.setState(this.state);
422 this.state.suggestedTitle = undefined;
423 this.state.crossPosts = [];
427 handlePostNameChange(i: PostForm, event: any) {
428 i.state.postForm.name = event.target.value;
430 i.fetchSimilarPosts();
433 fetchSimilarPosts() {
434 let form: SearchForm = {
435 q: this.state.postForm.name,
436 type_: SearchType[SearchType.Posts],
437 sort: SortType[SortType.TopAll],
438 community_id: this.state.postForm.community_id,
443 if (this.state.postForm.name !== '') {
444 WebSocketService.Instance.search(form);
446 this.state.suggestedPosts = [];
449 this.setState(this.state);
452 handlePostBodyChange(val: string) {
453 this.state.postForm.body = val;
454 this.setState(this.state);
457 handlePostCommunityChange(i: PostForm, event: any) {
458 i.state.postForm.community_id = Number(event.target.value);
462 handlePostNsfwChange(i: PostForm, event: any) {
463 i.state.postForm.nsfw = event.target.checked;
467 handleCancel(i: PostForm) {
471 handlePreviewToggle(i: PostForm, event: any) {
472 event.preventDefault();
473 i.state.previewMode = !i.state.previewMode;
477 handleImageUploadPaste(i: PostForm, event: any) {
478 let image = event.clipboardData.files[0];
480 i.handleImageUpload(i, image);
484 handleImageUpload(i: PostForm, event: any) {
487 event.preventDefault();
488 file = event.target.files[0];
493 const imageUploadUrl = `/pictrs/image`;
494 const formData = new FormData();
495 formData.append('images[]', file);
497 i.state.imageLoading = true;
500 fetch(imageUploadUrl, {
504 .then(res => res.json())
506 console.log('pictrs upload:');
508 if (res.msg == 'ok') {
509 let hash = res.files[0].file;
510 let url = `${window.location.origin}/pictrs/image/${hash}`;
511 let deleteToken = res.files[0].delete_token;
512 let deleteUrl = `${window.location.origin}/pictrs/image/delete/${deleteToken}/${hash}`;
513 i.state.postForm.url = url;
514 i.state.imageLoading = false;
517 i18n.t('click_to_delete_picture'),
518 i18n.t('picture_deleted'),
522 i.state.imageLoading = false;
524 toast(JSON.stringify(res), 'danger');
528 i.state.imageLoading = false;
530 toast(error, 'danger');
534 parseMessage(msg: WebSocketJsonResponse) {
535 let res = wsJsonToRes(msg);
537 toast(i18n.t(msg.error), 'danger');
538 this.state.loading = false;
539 this.setState(this.state);
541 } else if (res.op == UserOperation.ListCommunities) {
542 let data = res.data as ListCommunitiesResponse;
543 this.state.communities = data.communities;
544 if (this.props.post) {
545 this.state.postForm.community_id = this.props.post.community_id;
546 } else if (this.props.params && this.props.params.community) {
547 let foundCommunityId = data.communities.find(
548 r => r.name == this.props.params.community
550 this.state.postForm.community_id = foundCommunityId;
552 // By default, the null valued 'Select a Community'
554 this.setState(this.state);
556 // Set up select searching
557 let selectId: any = document.getElementById('post-community');
559 this.choices = new Choices(selectId, {
562 containerOuter: 'choices',
563 containerInner: 'choices__inner bg-secondary border-0',
564 input: 'form-control',
565 inputCloned: 'choices__input--cloned',
566 list: 'choices__list',
567 listItems: 'choices__list--multiple',
568 listSingle: 'choices__list--single',
569 listDropdown: 'choices__list--dropdown',
570 item: 'choices__item bg-secondary',
571 itemSelectable: 'choices__item--selectable',
572 itemDisabled: 'choices__item--disabled',
573 itemChoice: 'choices__item--choice',
574 placeholder: 'choices__placeholder',
575 group: 'choices__group',
576 groupHeading: 'choices__heading',
577 button: 'choices__button',
578 activeState: 'is-active',
579 focusState: 'is-focused',
580 openState: 'is-open',
581 disabledState: 'is-disabled',
582 highlightedState: 'text-info',
583 selectedState: 'text-info',
584 flippedState: 'is-flipped',
585 loadingState: 'is-loading',
586 noResults: 'has-no-results',
587 noChoices: 'has-no-choices',
590 this.choices.passedElement.element.addEventListener(
593 this.state.postForm.community_id = Number(e.detail.choice.value);
594 this.setState(this.state);
599 } else if (res.op == UserOperation.CreatePost) {
600 let data = res.data as PostResponse;
601 if (data.post.creator_id == UserService.Instance.user.id) {
602 this.state.loading = false;
603 this.props.onCreate(data.post.id);
605 } else if (res.op == UserOperation.EditPost) {
606 let data = res.data as PostResponse;
607 if (data.post.creator_id == UserService.Instance.user.id) {
608 this.state.loading = false;
609 this.props.onEdit(data.post);
611 } else if (res.op == UserOperation.Search) {
612 let data = res.data as SearchResponse;
614 if (data.type_ == SearchType[SearchType.Posts]) {
615 this.state.suggestedPosts = data.posts;
616 } else if (data.type_ == SearchType[SearchType.Url]) {
617 this.state.crossPosts = data.posts;
619 this.setState(this.state);