13 } from "@utils/helpers";
14 import { isImage } from "@utils/media";
15 import { Choice } from "@utils/types";
16 import autosize from "autosize";
17 import { Component, InfernoNode, linkEvent } from "inferno";
18 import { Prompt } from "inferno-router";
23 GetSiteMetadataResponse,
27 } from "lemmy-js-client";
34 } from "../../config";
35 import { PostFormParams } from "../../interfaces";
36 import { I18NextService, UserService } from "../../services";
37 import { HttpService, RequestState } from "../../services/HttpService";
38 import { setupTippy } from "../../tippy";
39 import { toast } from "../../toast";
40 import { Icon, Spinner } from "../common/icon";
41 import { LanguageSelect } from "../common/language-select";
42 import { MarkdownTextArea } from "../common/markdown-textarea";
43 import { SearchableSelect } from "../common/searchable-select";
44 import { PostListings } from "./post-listings";
46 const MAX_POST_TITLE_LENGTH = 200;
48 interface PostFormProps {
49 post_view?: PostView; // If a post is given, that means this is an edit
50 crossPosts?: PostView[];
51 allLanguages: Language[];
52 siteLanguages: number[];
53 params?: PostFormParams;
55 onCreate?(form: CreatePost): void;
56 onEdit?(form: EditPost): void;
58 enableDownvotes?: boolean;
59 selectedCommunityChoice?: Choice;
60 onSelectCommunity?: (choice: Choice) => void;
61 initialCommunities?: CommunityView[];
64 interface PostFormState {
71 community_id?: number;
75 suggestedPostsRes: RequestState<SearchResponse>;
76 metadataRes: RequestState<GetSiteMetadataResponse>;
77 imageLoading: boolean;
78 imageDeleteUrl: string;
79 communitySearchLoading: boolean;
80 communitySearchOptions: Choice[];
85 function handlePostSubmit(i: PostForm, event: any) {
86 event.preventDefault();
87 // Coerce empty url string to undefined
88 if ((i.state.form.url ?? "") === "") {
89 i.setState(s => ((s.form.url = undefined), s));
91 i.setState({ loading: true, submitted: true });
92 const auth = myAuthRequired();
94 const pForm = i.state.form;
95 const pv = i.props.post_view;
104 language_id: pForm.language_id,
107 } else if (pForm.name && pForm.community_id) {
110 community_id: pForm.community_id,
114 language_id: pForm.language_id,
115 honeypot: pForm.honeypot,
121 function copySuggestedTitle(d: { i: PostForm; suggestedTitle?: string }) {
122 const sTitle = d.suggestedTitle;
125 s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s),
127 d.i.setState({ suggestedPostsRes: { state: "empty" } });
129 const textarea: any = document.getElementById("post-title");
130 autosize.update(textarea);
135 function handlePostUrlChange(i: PostForm, event: any) {
136 const url = event.target.value;
138 i.setState(prev => ({
150 function handlePostNsfwChange(i: PostForm, event: any) {
151 i.setState(s => ((s.form.nsfw = event.target.checked), s));
154 function handleHoneyPotChange(i: PostForm, event: any) {
155 i.setState(s => ((s.form.honeypot = event.target.value), s));
158 function handleCancel(i: PostForm) {
159 i.props.onCancel?.();
162 function handleImageUploadPaste(i: PostForm, event: any) {
163 const image = event.clipboardData.files[0];
165 handleImageUpload(i, image);
169 function handleImageUpload(i: PostForm, event: any) {
172 event.preventDefault();
173 file = event.target.files[0];
178 i.setState({ imageLoading: true });
180 HttpService.client.uploadImage({ image: file }).then(res => {
181 console.log("pictrs upload:");
183 if (res.state === "success") {
184 if (res.data.msg === "ok") {
185 i.state.form.url = res.data.url;
188 imageDeleteUrl: res.data.delete_url as string,
190 } else if (res.data.msg === "too_large") {
191 toast(I18NextService.i18n.t("upload_too_large"), "danger");
193 toast(JSON.stringify(res), "danger");
195 } else if (res.state === "failed") {
196 console.error(res.msg);
197 toast(res.msg, "danger");
198 i.setState({ imageLoading: false });
203 function handlePostNameChange(i: PostForm, event: any) {
204 i.setState(s => ((s.form.name = event.target.value), s));
205 i.fetchSimilarPosts();
208 function handleImageDelete(i: PostForm) {
209 const { imageDeleteUrl } = i.state;
211 fetch(imageDeleteUrl);
213 i.setState(prev => ({
224 export class PostForm extends Component<PostFormProps, PostFormState> {
225 state: PostFormState = {
226 suggestedPostsRes: { state: "empty" },
227 metadataRes: { state: "empty" },
232 communitySearchLoading: false,
234 communitySearchOptions: [],
238 constructor(props: PostFormProps, context: any) {
239 super(props, context);
240 this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this));
241 this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this));
242 this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
243 this.handleLanguageChange = this.handleLanguageChange.bind(this);
244 this.handleCommunitySelect = this.handleCommunitySelect.bind(this);
246 const { post_view, selectedCommunityChoice, params } = this.props;
253 body: post_view.post.body,
254 name: post_view.post.name,
255 community_id: post_view.community.id,
256 url: post_view.post.url,
257 nsfw: post_view.post.nsfw,
258 language_id: post_view.post.language_id,
261 } else if (selectedCommunityChoice) {
266 community_id: getIdFromString(selectedCommunityChoice.value),
268 communitySearchOptions: [selectedCommunityChoice].concat(
270 this.props.initialCommunities?.map(
271 ({ community: { id, title } }) => ({
273 value: id.toString(),
276 ).filter(option => option.value !== selectedCommunityChoice.value),
282 communitySearchOptions:
283 this.props.initialCommunities?.map(
284 ({ community: { id, title } }) => ({
286 value: id.toString(),
303 componentDidMount() {
305 const textarea: any = document.getElementById("post-title");
312 componentWillReceiveProps(
313 nextProps: Readonly<{ children?: InfernoNode } & PostFormProps>,
315 if (this.props !== nextProps) {
318 (s.form.community_id = getIdFromString(
319 nextProps.selectedCommunityChoice?.value,
328 const firstLang = this.state.form.language_id;
329 const selectedLangs = firstLang ? Array.of(firstLang) : undefined;
331 const url = this.state.form.url;
334 <form className="post-form" onSubmit={linkEvent(this, handlePostSubmit)}>
336 message={I18NextService.i18n.t("block_leaving")}
339 this.state.form.name ||
340 this.state.form.url ||
342 ) && !this.state.submitted
345 <div className="mb-3 row">
346 <label className="col-sm-2 col-form-label" htmlFor="post-title">
347 {I18NextService.i18n.t("title")}
349 <div className="col-sm-10">
351 value={this.state.form.name}
353 onInput={linkEvent(this, handlePostNameChange)}
354 className={`form-control ${
355 !validTitle(this.state.form.name) && "is-invalid"
360 maxLength={MAX_POST_TITLE_LENGTH}
362 {!validTitle(this.state.form.name) && (
363 <div className="invalid-feedback">
364 {I18NextService.i18n.t("invalid_post_title")}
367 {this.renderSuggestedPosts()}
371 <div className="mb-3 row">
372 <label className="col-sm-2 col-form-label" htmlFor="post-url">
373 {I18NextService.i18n.t("url")}
375 <div className="col-sm-10">
379 className="form-control mb-3"
381 onInput={linkEvent(this, handlePostUrlChange)}
382 onPaste={linkEvent(this, handleImageUploadPaste)}
384 {this.renderSuggestedTitleCopy()}
385 {url && validURL(url) && (
388 href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
389 className="me-2 d-inline-block float-right text-muted small fw-bold"
392 archive.org {I18NextService.i18n.t("archive_link")}
395 href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
398 className="me-2 d-inline-block float-right text-muted small fw-bold"
401 ghostarchive.org {I18NextService.i18n.t("archive_link")}
404 href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
407 className="me-2 d-inline-block float-right text-muted small fw-bold"
410 archive.today {I18NextService.i18n.t("archive_link")}
417 <div className="mb-3 row">
418 <label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
419 {capitalizeFirstLetter(I18NextService.i18n.t("image"))}
420 <Icon icon="image" classes="icon-inline ms-1" />
422 <div className="col-sm-10">
426 accept="image/*,video/*"
428 className="small col-sm-10 form-control"
429 disabled={!UserService.Instance.myUserInfo}
430 onChange={linkEvent(this, handleImageUpload)}
432 {this.state.imageLoading && <Spinner />}
433 {url && isImage(url) && (
434 <img src={url} className="img-fluid mt-2" alt="" />
436 {this.state.imageDeleteUrl && (
438 className="btn btn-danger btn-sm mt-2"
439 onClick={linkEvent(this, handleImageDelete)}
441 <Icon icon="x" classes="icon-inline me-1" />
442 {capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
446 {this.props.crossPosts && this.props.crossPosts.length > 0 && (
448 <div className="my-1 text-muted small fw-bold">
449 {I18NextService.i18n.t("cross_posts")}
453 posts={this.props.crossPosts}
454 enableDownvotes={this.props.enableDownvotes}
455 enableNsfw={this.props.enableNsfw}
456 allLanguages={this.props.allLanguages}
457 siteLanguages={this.props.siteLanguages}
459 // All of these are unused, since its view only
460 onPostEdit={() => {}}
461 onPostVote={() => {}}
462 onPostReport={() => {}}
463 onBlockPerson={() => {}}
464 onLockPost={() => {}}
465 onDeletePost={() => {}}
466 onRemovePost={() => {}}
467 onSavePost={() => {}}
468 onFeaturePost={() => {}}
469 onPurgePerson={() => {}}
470 onPurgePost={() => {}}
471 onBanPersonFromCommunity={() => {}}
472 onBanPerson={() => {}}
473 onAddModToCommunity={() => {}}
474 onAddAdmin={() => {}}
475 onTransferCommunity={() => {}}
476 onMarkPostAsRead={() => {}}
482 <div className="mb-3 row">
483 <label className="col-sm-2 col-form-label">
484 {I18NextService.i18n.t("body")}
486 <div className="col-sm-10">
488 initialContent={this.state.form.body}
489 onContentChange={this.handlePostBodyChange}
490 allLanguages={this.props.allLanguages}
491 siteLanguages={this.props.siteLanguages}
492 hideNavigationWarnings
497 allLanguages={this.props.allLanguages}
498 siteLanguages={this.props.siteLanguages}
499 selectedLanguageIds={selectedLangs}
501 onChange={this.handleLanguageChange}
503 {!this.props.post_view && (
504 <div className="mb-3 row">
505 <label className="col-sm-2 col-form-label" htmlFor="post-community">
506 {I18NextService.i18n.t("community")}
508 <div className="col-sm-10">
511 value={this.state.form.community_id}
514 label: I18NextService.i18n.t("select_a_community"),
518 ].concat(this.state.communitySearchOptions)}
519 loading={this.state.communitySearchLoading}
520 onChange={this.handleCommunitySelect}
521 onSearch={this.handleCommunitySearch}
526 {this.props.enableNsfw && (
527 <div className="form-check mb-3">
529 className="form-check-input"
532 checked={this.state.form.nsfw}
533 onChange={linkEvent(this, handlePostNsfwChange)}
535 <label className="form-check-label" htmlFor="post-nsfw">
536 {I18NextService.i18n.t("nsfw")}
545 className="form-control honeypot"
547 value={this.state.form.honeypot}
548 onInput={linkEvent(this, handleHoneyPotChange)}
550 <div className="mb-3 row">
551 <div className="col-sm-10">
553 disabled={!this.state.form.community_id || this.state.loading}
555 className="btn btn-secondary me-2"
557 {this.state.loading ? (
559 ) : this.props.post_view ? (
560 capitalizeFirstLetter(I18NextService.i18n.t("save"))
562 capitalizeFirstLetter(I18NextService.i18n.t("create"))
565 {this.props.post_view && (
568 className="btn btn-secondary"
569 onClick={linkEvent(this, handleCancel)}
571 {I18NextService.i18n.t("cancel")}
580 renderSuggestedTitleCopy() {
581 switch (this.state.metadataRes.state) {
585 // Clean up the title of any extra whitespace and replace with a space
586 const suggestedTitle = this.state.metadataRes.data.metadata.title
588 .replace(/\s+/g, " ");
593 className="mt-1 small border-0 bg-transparent p-0 d-block text-muted fw-bold pointer"
595 { i: this, suggestedTitle },
599 {I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "}
608 renderSuggestedPosts() {
609 switch (this.state.suggestedPostsRes.state) {
613 const suggestedPosts = this.state.suggestedPostsRes.data.posts;
617 suggestedPosts.length > 0 && (
619 <div className="my-1 text-muted small fw-bold">
620 {I18NextService.i18n.t("related_posts")}
624 posts={suggestedPosts}
625 enableDownvotes={this.props.enableDownvotes}
626 enableNsfw={this.props.enableNsfw}
627 allLanguages={this.props.allLanguages}
628 siteLanguages={this.props.siteLanguages}
630 // All of these are unused, since its view only
631 onPostEdit={() => {}}
632 onPostVote={() => {}}
633 onPostReport={() => {}}
634 onBlockPerson={() => {}}
635 onLockPost={() => {}}
636 onDeletePost={() => {}}
637 onRemovePost={() => {}}
638 onSavePost={() => {}}
639 onFeaturePost={() => {}}
640 onPurgePerson={() => {}}
641 onPurgePost={() => {}}
642 onBanPersonFromCommunity={() => {}}
643 onBanPerson={() => {}}
644 onAddModToCommunity={() => {}}
645 onAddAdmin={() => {}}
646 onTransferCommunity={() => {}}
647 onMarkPostAsRead={() => {}}
656 async fetchPageTitle() {
657 const url = this.state.form.url;
658 if (url && validURL(url)) {
659 this.setState({ metadataRes: { state: "loading" } });
661 metadataRes: await HttpService.client.getSiteMetadata({ url }),
666 async fetchSimilarPosts() {
667 const q = this.state.form.name;
669 this.setState({ suggestedPostsRes: { state: "loading" } });
671 suggestedPostsRes: await HttpService.client.search({
676 community_id: this.state.form.community_id,
678 limit: trendingFetchLimit,
685 handlePostBodyChange(val: string) {
686 this.setState(s => ((s.form.body = val), s));
689 handleLanguageChange(val: number[]) {
690 this.setState(s => ((s.form.language_id = val.at(0)), s));
693 handleCommunitySearch = debounce(async (text: string) => {
694 const { selectedCommunityChoice } = this.props;
695 this.setState({ communitySearchLoading: true });
697 const newOptions: Choice[] = [];
699 if (selectedCommunityChoice) {
700 newOptions.push(selectedCommunityChoice);
703 if (text.length > 0) {
704 newOptions.push(...(await fetchCommunities(text)).map(communityToChoice));
707 communitySearchOptions: newOptions,
712 communitySearchLoading: false,
716 handleCommunitySelect(choice: Choice) {
717 if (this.props.onSelectCommunity) {
718 this.props.onSelectCommunity(choice);