1 import autosize from "autosize";
2 import { Component, linkEvent } from "inferno";
3 import { Prompt } from "inferno-router";
15 } from "lemmy-js-client";
16 import { Subscription } from "rxjs";
17 import { i18n } from "../../i18next";
18 import { PostFormParams } from "../../interfaces";
19 import { UserService, WebSocketService } from "../../services";
23 capitalizeFirstLetter,
44 import { Icon, Spinner } from "../common/icon";
45 import { LanguageSelect } from "../common/language-select";
46 import { MarkdownTextArea } from "../common/markdown-textarea";
47 import { SearchableSelect } from "../common/searchable-select";
48 import { PostListings } from "./post-listings";
50 const MAX_POST_TITLE_LENGTH = 200;
52 interface PostFormProps {
53 post_view?: PostView; // If a post is given, that means this is an edit
54 allLanguages: Language[];
55 siteLanguages: number[];
56 params?: PostFormParams;
58 onCreate?(post: PostView): any;
59 onEdit?(post: PostView): any;
61 enableDownvotes?: boolean;
62 selectedCommunityChoice?: Choice;
63 onSelectCommunity?: (choice: Choice) => void;
66 interface PostFormState {
73 community_id?: number;
76 suggestedTitle?: string;
77 suggestedPosts?: PostView[];
78 crossPosts?: PostView[];
80 imageLoading: boolean;
81 communitySearchLoading: boolean;
82 communitySearchOptions: Choice[];
86 export class PostForm extends Component<PostFormProps, PostFormState> {
87 private subscription?: Subscription;
88 state: PostFormState = {
92 communitySearchLoading: false,
94 communitySearchOptions: [],
97 constructor(props: PostFormProps, context: any) {
98 super(props, context);
99 this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this));
100 this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this));
101 this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
102 this.handleLanguageChange = this.handleLanguageChange.bind(this);
103 this.handleCommunitySelect = this.handleCommunitySelect.bind(this);
105 this.parseMessage = this.parseMessage.bind(this);
106 this.subscription = wsSubscribe(this.parseMessage);
109 const pv = this.props.post_view;
116 community_id: pv.community.id,
119 language_id: pv.post.language_id,
124 const selectedCommunityChoice = this.props.selectedCommunityChoice;
126 if (selectedCommunityChoice) {
131 community_id: getIdFromString(selectedCommunityChoice.value),
133 communitySearchOptions: [selectedCommunityChoice],
137 const params = this.props.params;
149 componentDidMount() {
151 const textarea: any = document.getElementById("post-title");
158 componentDidUpdate() {
160 !this.state.loading &&
161 (this.state.form.name || this.state.form.url || this.state.form.body)
163 window.onbeforeunload = () => true;
165 window.onbeforeunload = null;
169 componentWillUnmount() {
170 this.subscription?.unsubscribe();
171 /* this.choices && this.choices.destroy(); */
172 window.onbeforeunload = null;
175 static getDerivedStateFromProps(
176 { selectedCommunityChoice }: PostFormProps,
177 { form, ...restState }: PostFormState
183 community_id: getIdFromString(selectedCommunityChoice?.value),
189 let firstLang = this.state.form.language_id;
190 let selectedLangs = firstLang ? Array.of(firstLang) : undefined;
192 let url = this.state.form.url;
197 !this.state.loading &&
198 (this.state.form.name ||
199 this.state.form.url ||
200 this.state.form.body)
202 message={i18n.t("block_leaving")}
204 <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
205 <div className="form-group row">
206 <label className="col-sm-2 col-form-label" htmlFor="post-url">
209 <div className="col-sm-10">
213 className="form-control"
214 value={this.state.form.url}
215 onInput={linkEvent(this, this.handlePostUrlChange)}
216 onPaste={linkEvent(this, this.handleImageUploadPaste)}
218 {this.state.suggestedTitle && (
220 className="mt-1 text-muted small font-weight-bold pointer"
222 onClick={linkEvent(this, this.copySuggestedTitle)}
224 {i18n.t("copy_suggested_title", { title: "" })}{" "}
225 {this.state.suggestedTitle}
230 htmlFor="file-upload"
232 UserService.Instance.myUserInfo && "pointer"
233 } d-inline-block float-right text-muted font-weight-bold`}
234 data-tippy-content={i18n.t("upload_image")}
236 <Icon icon="image" classes="icon-inline" />
241 accept="image/*,video/*"
244 disabled={!UserService.Instance.myUserInfo}
245 onChange={linkEvent(this, this.handleImageUpload)}
248 {url && validURL(url) && (
251 href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
252 className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
255 archive.org {i18n.t("archive_link")}
258 href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
261 className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
264 ghostarchive.org {i18n.t("archive_link")}
267 href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
270 className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
273 archive.today {i18n.t("archive_link")}
277 {this.state.imageLoading && <Spinner />}
278 {url && isImage(url) && (
279 <img src={url} className="img-fluid" alt="" />
281 {this.state.crossPosts && this.state.crossPosts.length > 0 && (
283 <div className="my-1 text-muted small font-weight-bold">
284 {i18n.t("cross_posts")}
288 posts={this.state.crossPosts}
289 enableDownvotes={this.props.enableDownvotes}
290 enableNsfw={this.props.enableNsfw}
291 allLanguages={this.props.allLanguages}
292 siteLanguages={this.props.siteLanguages}
298 <div className="form-group row">
299 <label className="col-sm-2 col-form-label" htmlFor="post-title">
302 <div className="col-sm-10">
304 value={this.state.form.name}
306 onInput={linkEvent(this, this.handlePostNameChange)}
307 className={`form-control ${
308 !validTitle(this.state.form.name) && "is-invalid"
313 maxLength={MAX_POST_TITLE_LENGTH}
315 {!validTitle(this.state.form.name) && (
316 <div className="invalid-feedback">
317 {i18n.t("invalid_post_title")}
320 {this.state.suggestedPosts &&
321 this.state.suggestedPosts.length > 0 && (
323 <div className="my-1 text-muted small font-weight-bold">
324 {i18n.t("related_posts")}
328 posts={this.state.suggestedPosts}
329 enableDownvotes={this.props.enableDownvotes}
330 enableNsfw={this.props.enableNsfw}
331 allLanguages={this.props.allLanguages}
332 siteLanguages={this.props.siteLanguages}
339 <div className="form-group row">
340 <label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
341 <div className="col-sm-10">
343 initialContent={this.state.form.body}
344 onContentChange={this.handlePostBodyChange}
345 allLanguages={this.props.allLanguages}
346 siteLanguages={this.props.siteLanguages}
350 {!this.props.post_view && (
351 <div className="form-group row">
353 className="col-sm-2 col-form-label"
354 htmlFor="post-community"
356 {i18n.t("community")}
358 <div className="col-sm-10">
361 value={this.state.form.community_id}
364 label: i18n.t("select_a_community"),
368 ].concat(this.state.communitySearchOptions)}
369 loading={this.state.communitySearchLoading}
370 onChange={this.handleCommunitySelect}
371 onSearch={this.handleCommunitySearch}
376 {this.props.enableNsfw && (
377 <div className="form-group row">
378 <legend className="col-form-label col-sm-2 pt-0">
381 <div className="col-sm-10">
382 <div className="form-check">
384 className="form-check-input position-static"
387 checked={this.state.form.nsfw}
388 onChange={linkEvent(this, this.handlePostNsfwChange)}
395 allLanguages={this.props.allLanguages}
396 siteLanguages={this.props.siteLanguages}
397 selectedLanguageIds={selectedLangs}
399 onChange={this.handleLanguageChange}
406 className="form-control honeypot"
408 value={this.state.form.honeypot}
409 onInput={linkEvent(this, this.handleHoneyPotChange)}
411 <div className="form-group row">
412 <div className="col-sm-10">
414 disabled={!this.state.form.community_id || this.state.loading}
416 className="btn btn-secondary mr-2"
418 {this.state.loading ? (
420 ) : this.props.post_view ? (
421 capitalizeFirstLetter(i18n.t("save"))
423 capitalizeFirstLetter(i18n.t("create"))
426 {this.props.post_view && (
429 className="btn btn-secondary"
430 onClick={linkEvent(this, this.handleCancel)}
442 handlePostSubmit(i: PostForm, event: any) {
443 event.preventDefault();
445 i.setState({ loading: true });
447 // Coerce empty url string to undefined
448 if ((i.state.form.url ?? "blank") === "") {
449 i.setState(s => ((s.form.url = undefined), s));
452 let pForm = i.state.form;
453 let pv = i.props.post_view;
457 let form: EditPost = {
463 language_id: pv.post.language_id,
466 WebSocketService.Instance.send(wsClient.editPost(form));
468 if (pForm.name && pForm.community_id) {
469 let form: CreatePost = {
471 community_id: pForm.community_id,
475 language_id: pForm.language_id,
476 honeypot: pForm.honeypot,
479 WebSocketService.Instance.send(wsClient.createPost(form));
485 copySuggestedTitle(i: PostForm) {
486 let sTitle = i.state.suggestedTitle;
489 s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s)
491 i.setState({ suggestedTitle: undefined });
493 let textarea: any = document.getElementById("post-title");
494 autosize.update(textarea);
499 handlePostUrlChange(i: PostForm, event: any) {
500 i.setState(s => ((s.form.url = event.target.value), s));
505 let url = this.state.form.url;
506 if (url && validURL(url)) {
513 limit: trendingFetchLimit,
517 WebSocketService.Instance.send(wsClient.search(form));
519 // Fetch the page title
520 getSiteMetadata(url).then(d => {
521 this.setState({ suggestedTitle: d.metadata.title });
524 this.setState({ suggestedTitle: undefined, crossPosts: undefined });
528 handlePostNameChange(i: PostForm, event: any) {
529 i.setState(s => ((s.form.name = event.target.value), s));
530 i.fetchSimilarPosts();
533 fetchSimilarPosts() {
534 let q = this.state.form.name;
541 community_id: this.state.form.community_id,
543 limit: trendingFetchLimit,
547 WebSocketService.Instance.send(wsClient.search(form));
549 this.setState({ suggestedPosts: undefined });
553 handlePostBodyChange(val: string) {
554 this.setState(s => ((s.form.body = val), s));
557 handlePostCommunityChange(i: PostForm, event: any) {
558 i.setState(s => ((s.form.community_id = Number(event.target.value)), s));
561 handlePostNsfwChange(i: PostForm, event: any) {
562 i.setState(s => ((s.form.nsfw = event.target.checked), s));
565 handleLanguageChange(val: number[]) {
566 this.setState(s => ((s.form.language_id = val.at(0)), s));
569 handleHoneyPotChange(i: PostForm, event: any) {
570 i.setState(s => ((s.form.honeypot = event.target.value), s));
573 handleCancel(i: PostForm) {
574 i.props.onCancel?.();
577 handlePreviewToggle(i: PostForm, event: any) {
578 event.preventDefault();
579 i.setState({ previewMode: !i.state.previewMode });
582 handleImageUploadPaste(i: PostForm, event: any) {
583 let image = event.clipboardData.files[0];
585 i.handleImageUpload(i, image);
589 handleImageUpload(i: PostForm, event: any) {
592 event.preventDefault();
593 file = event.target.files[0];
598 i.setState({ imageLoading: true });
602 console.log("pictrs upload:");
604 if (res.msg === "ok") {
605 i.state.form.url = res.url;
606 i.setState({ imageLoading: false });
607 pictrsDeleteToast(file.name, res.delete_url as string);
609 i.setState({ imageLoading: false });
610 toast(JSON.stringify(res), "danger");
614 i.setState({ imageLoading: false });
615 console.error(error);
616 toast(error, "danger");
620 handleCommunitySearch = debounce(async (text: string) => {
621 const { selectedCommunityChoice } = this.props;
622 this.setState({ communitySearchLoading: true });
624 const newOptions: Choice[] = [];
626 if (selectedCommunityChoice) {
627 newOptions.push(selectedCommunityChoice);
630 if (text.length > 0) {
632 ...(await fetchCommunities(text)).communities.map(communityToChoice)
636 communitySearchOptions: newOptions,
641 communitySearchLoading: false,
645 handleCommunitySelect(choice: Choice) {
646 if (this.props.onSelectCommunity) {
651 this.props.onSelectCommunity(choice);
653 this.setState({ loading: false });
657 parseMessage(msg: any) {
658 let mui = UserService.Instance.myUserInfo;
659 let op = wsUserOp(msg);
662 // Errors handled by top level pages
663 // toast(i18n.t(msg.error), "danger");
664 this.setState({ loading: false });
666 } else if (op == UserOperation.CreatePost) {
667 let data = wsJsonToRes<PostResponse>(msg);
668 if (data.post_view.creator.id == mui?.local_user_view.person.id) {
669 this.props.onCreate?.(data.post_view);
671 } else if (op == UserOperation.EditPost) {
672 let data = wsJsonToRes<PostResponse>(msg);
673 if (data.post_view.creator.id == mui?.local_user_view.person.id) {
674 this.setState({ loading: false });
675 this.props.onEdit?.(data.post_view);
677 } else if (op == UserOperation.Search) {
678 let data = wsJsonToRes<SearchResponse>(msg);
680 if (data.type_ == "Posts") {
681 this.setState({ suggestedPosts: data.posts });
682 } else if (data.type_ == "Url") {
683 this.setState({ crossPosts: data.posts });