1 import { None, Option, Some } from "@sniptt/monads";
2 import autosize from "autosize";
3 import { Component, linkEvent } from "inferno";
4 import { Prompt } from "inferno-router";
21 } from "lemmy-js-client";
22 import { Subscription } from "rxjs";
23 import { pictrsUri } from "../../env";
24 import { i18n } from "../../i18next";
25 import { PostFormParams } from "../../interfaces";
26 import { UserService, WebSocketService } from "../../services";
30 capitalizeFirstLetter,
40 myFirstDiscussionLanguageId,
52 import { Icon, Spinner } from "../common/icon";
53 import { LanguageSelect } from "../common/language-select";
54 import { MarkdownTextArea } from "../common/markdown-textarea";
55 import { PostListings } from "./post-listings";
59 Choices = require("choices.js");
62 const MAX_POST_TITLE_LENGTH = 200;
64 interface PostFormProps {
65 post_view: Option<PostView>; // If a post is given, that means this is an edit
66 allLanguages: Language[];
67 communities: Option<CommunityView[]>;
68 params: Option<PostFormParams>;
70 onCreate?(post: PostView): any;
71 onEdit?(post: PostView): any;
73 enableDownvotes?: boolean;
76 interface PostFormState {
78 suggestedTitle: Option<string>;
79 suggestedPosts: Option<PostView[]>;
80 crossPosts: Option<PostView[]>;
82 imageLoading: boolean;
86 export class PostForm extends Component<PostFormProps, PostFormState> {
87 private subscription: Subscription;
89 private emptyState: PostFormState = {
90 postForm: new CreatePost({
91 community_id: undefined,
103 suggestedTitle: None,
104 suggestedPosts: None,
108 constructor(props: any, context: any) {
109 super(props, context);
110 this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this));
111 this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this));
112 this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
113 this.handleLanguageChange = this.handleLanguageChange.bind(this);
115 this.state = this.emptyState;
117 this.parseMessage = this.parseMessage.bind(this);
118 this.subscription = wsSubscribe(this.parseMessage);
121 if (this.props.post_view.isSome()) {
122 let pv = this.props.post_view.unwrap();
126 postForm: new CreatePost({
129 community_id: pv.community.id,
131 nsfw: Some(pv.post.nsfw),
133 language_id: Some(pv.post.language_id),
134 auth: auth().unwrap(),
139 if (this.props.params.isSome()) {
140 let params = this.props.params.unwrap();
144 ...this.state.postForm,
145 name: toUndefined(params.name),
153 componentDidMount() {
155 this.setupCommunities();
156 let textarea: any = document.getElementById("post-title");
162 componentDidUpdate() {
164 !this.state.loading &&
165 (this.state.postForm.name ||
166 this.state.postForm.url.isSome() ||
167 this.state.postForm.body.isSome())
169 window.onbeforeunload = () => true;
171 window.onbeforeunload = undefined;
175 componentWillUnmount() {
176 this.subscription.unsubscribe();
177 /* this.choices && this.choices.destroy(); */
178 window.onbeforeunload = null;
182 let selectedLangs = this.state.postForm.language_id
183 .or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo))
190 !this.state.loading &&
191 (this.state.postForm.name ||
192 this.state.postForm.url.isSome() ||
193 this.state.postForm.body.isSome())
195 message={i18n.t("block_leaving")}
197 <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
198 <div className="form-group row">
199 <label className="col-sm-2 col-form-label" htmlFor="post-url">
202 <div className="col-sm-10">
206 className="form-control"
207 value={toUndefined(this.state.postForm.url)}
208 onInput={linkEvent(this, this.handlePostUrlChange)}
209 onPaste={linkEvent(this, this.handleImageUploadPaste)}
211 {this.state.suggestedTitle.match({
214 className="mt-1 text-muted small font-weight-bold pointer"
216 onClick={linkEvent(this, this.copySuggestedTitle)}
218 {i18n.t("copy_suggested_title", { title: "" })} {title}
225 htmlFor="file-upload"
227 UserService.Instance.myUserInfo.isSome() && "pointer"
228 } d-inline-block float-right text-muted font-weight-bold`}
229 data-tippy-content={i18n.t("upload_image")}
231 <Icon icon="image" classes="icon-inline" />
236 accept="image/*,video/*"
239 disabled={UserService.Instance.myUserInfo.isNone()}
240 onChange={linkEvent(this, this.handleImageUpload)}
243 {this.state.postForm.url.match({
248 href={`${webArchiveUrl}/save/${encodeURIComponent(
251 className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
254 archive.org {i18n.t("archive_link")}
257 href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
260 className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
263 ghostarchive.org {i18n.t("archive_link")}
266 href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
269 className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
272 archive.today {i18n.t("archive_link")}
278 {this.state.imageLoading && <Spinner />}
279 {this.state.postForm.url.match({
282 <img src={url} className="img-fluid" alt="" />
286 {this.state.crossPosts.match({
288 xPosts.length > 0 && (
290 <div className="my-1 text-muted small font-weight-bold">
291 {i18n.t("cross_posts")}
296 enableDownvotes={this.props.enableDownvotes}
297 enableNsfw={this.props.enableNsfw}
298 allLanguages={this.props.allLanguages}
306 <div className="form-group row">
307 <label className="col-sm-2 col-form-label" htmlFor="post-title">
310 <div className="col-sm-10">
312 value={this.state.postForm.name}
314 onInput={linkEvent(this, this.handlePostNameChange)}
315 className={`form-control ${
316 !validTitle(this.state.postForm.name) && "is-invalid"
321 maxLength={MAX_POST_TITLE_LENGTH}
323 {!validTitle(this.state.postForm.name) && (
324 <div className="invalid-feedback">
325 {i18n.t("invalid_post_title")}
328 {this.state.suggestedPosts.match({
330 sPosts.length > 0 && (
332 <div className="my-1 text-muted small font-weight-bold">
333 {i18n.t("related_posts")}
338 enableDownvotes={this.props.enableDownvotes}
339 enableNsfw={this.props.enableNsfw}
340 allLanguages={this.props.allLanguages}
349 <div className="form-group row">
350 <label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
351 <div className="col-sm-10">
353 initialContent={this.state.postForm.body}
354 initialLanguageId={None}
355 onContentChange={this.handlePostBodyChange}
359 allLanguages={this.props.allLanguages}
363 {this.props.post_view.isNone() && (
364 <div className="form-group row">
366 className="col-sm-2 col-form-label"
367 htmlFor="post-community"
369 {i18n.t("community")}
371 <div className="col-sm-10">
373 className="form-control"
375 value={this.state.postForm.community_id}
376 onInput={linkEvent(this, this.handlePostCommunityChange)}
378 <option>{i18n.t("select_a_community")}</option>
379 {this.props.communities.unwrapOr([]).map(cv => (
380 <option key={cv.community.id} value={cv.community.id}>
381 {communitySelectName(cv)}
388 {this.props.enableNsfw && (
389 <div className="form-group row">
390 <legend className="col-form-label col-sm-2 pt-0">
393 <div className="col-sm-10">
394 <div className="form-check">
396 className="form-check-input position-static"
399 checked={toUndefined(this.state.postForm.nsfw)}
400 onChange={linkEvent(this, this.handlePostNsfwChange)}
407 allLanguages={this.props.allLanguages}
408 selectedLanguageIds={selectedLangs}
410 onChange={this.handleLanguageChange}
417 className="form-control honeypot"
419 value={toUndefined(this.state.postForm.honeypot)}
420 onInput={linkEvent(this, this.handleHoneyPotChange)}
422 <div className="form-group row">
423 <div className="col-sm-10">
426 !this.state.postForm.community_id || this.state.loading
429 className="btn btn-secondary mr-2"
431 {this.state.loading ? (
433 ) : this.props.post_view.isSome() ? (
434 capitalizeFirstLetter(i18n.t("save"))
436 capitalizeFirstLetter(i18n.t("create"))
439 {this.props.post_view.isSome() && (
442 className="btn btn-secondary"
443 onClick={linkEvent(this, this.handleCancel)}
455 handlePostSubmit(i: PostForm, event: any) {
456 event.preventDefault();
458 i.setState({ loading: true });
460 // Coerce empty url string to undefined
462 i.state.postForm.url.isSome() &&
463 i.state.postForm.url.unwrapOr("blank") === ""
465 i.setState(s => ((s.postForm.url = None), s));
468 let pForm = i.state.postForm;
469 i.props.post_view.match({
471 let form = new EditPost({
472 name: Some(pForm.name),
477 language_id: Some(pv.post.language_id),
478 auth: auth().unwrap(),
480 WebSocketService.Instance.send(wsClient.editPost(form));
483 i.setState(s => ((s.postForm.auth = auth().unwrap()), s));
484 let form = new CreatePost({ ...i.state.postForm });
485 WebSocketService.Instance.send(wsClient.createPost(form));
490 copySuggestedTitle(i: PostForm) {
491 i.state.suggestedTitle.match({
495 (s.postForm.name = sTitle.substring(0, MAX_POST_TITLE_LENGTH)), s
498 i.setState({ suggestedTitle: None });
500 let textarea: any = document.getElementById("post-title");
501 autosize.update(textarea);
508 handlePostUrlChange(i: PostForm, event: any) {
509 i.setState(s => ((s.postForm.url = Some(event.target.value)), s));
514 this.state.postForm.url.match({
517 let form = new Search({
520 community_name: None,
522 type_: Some(SearchType.Url),
523 sort: Some(SortType.TopAll),
524 listing_type: Some(ListingType.All),
526 limit: Some(trendingFetchLimit),
527 auth: auth(false).ok(),
530 WebSocketService.Instance.send(wsClient.search(form));
532 // Fetch the page title
533 getSiteMetadata(url).then(d => {
534 this.setState({ suggestedTitle: d.metadata.title });
537 this.setState({ suggestedTitle: None, crossPosts: None });
544 handlePostNameChange(i: PostForm, event: any) {
545 i.setState(s => ((s.postForm.name = event.target.value), s));
546 i.fetchSimilarPosts();
549 fetchSimilarPosts() {
550 let form = new Search({
551 q: this.state.postForm.name,
552 type_: Some(SearchType.Posts),
553 sort: Some(SortType.TopAll),
554 listing_type: Some(ListingType.All),
555 community_id: Some(this.state.postForm.community_id),
556 community_name: None,
559 limit: Some(trendingFetchLimit),
560 auth: auth(false).ok(),
563 if (this.state.postForm.name !== "") {
564 WebSocketService.Instance.send(wsClient.search(form));
566 this.setState({ suggestedPosts: None });
570 handlePostBodyChange(val: string) {
571 this.setState(s => ((s.postForm.body = Some(val)), s));
574 handlePostCommunityChange(i: PostForm, event: any) {
576 s => ((s.postForm.community_id = Number(event.target.value)), s)
580 handlePostNsfwChange(i: PostForm, event: any) {
581 i.setState(s => ((s.postForm.nsfw = Some(event.target.checked)), s));
584 handleLanguageChange(val: number[]) {
585 this.setState(s => ((s.postForm.language_id = Some(val[0])), s));
588 handleHoneyPotChange(i: PostForm, event: any) {
589 i.setState(s => ((s.postForm.honeypot = Some(event.target.value)), s));
592 handleCancel(i: PostForm) {
596 handlePreviewToggle(i: PostForm, event: any) {
597 event.preventDefault();
598 i.setState({ previewMode: !i.state.previewMode });
601 handleImageUploadPaste(i: PostForm, event: any) {
602 let image = event.clipboardData.files[0];
604 i.handleImageUpload(i, image);
608 handleImageUpload(i: PostForm, event: any) {
611 event.preventDefault();
612 file = event.target.files[0];
617 const formData = new FormData();
618 formData.append("images[]", file);
620 i.setState({ imageLoading: true });
626 .then(res => res.json())
628 console.log("pictrs upload:");
630 if (res.msg == "ok") {
631 let hash = res.files[0].file;
632 let url = `${pictrsUri}/${hash}`;
633 let deleteToken = res.files[0].delete_token;
634 let deleteUrl = `${pictrsUri}/delete/${deleteToken}/${hash}`;
635 i.state.postForm.url = Some(url);
636 i.setState({ imageLoading: false });
638 i18n.t("click_to_delete_picture"),
639 i18n.t("picture_deleted"),
643 i.setState({ imageLoading: false });
644 toast(JSON.stringify(res), "danger");
648 i.setState({ imageLoading: false });
649 console.error(error);
650 toast(error, "danger");
655 // Set up select searching
657 let selectId: any = document.getElementById("post-community");
659 this.choices = new Choices(selectId, choicesConfig);
660 this.choices.passedElement.element.addEventListener(
665 (s.postForm.community_id = Number(e.detail.choice.value)), s
671 this.choices.passedElement.element.addEventListener(
673 debounce(async (e: any) => {
675 let communities = (await fetchCommunities(e.detail.value))
677 this.choices.setChoices(
678 communities.map(cv => communityToChoice(cv)),
692 this.props.post_view.match({
694 this.setState(s => ((s.postForm.community_id = pv.community.id), s)),
697 this.props.params.match({
699 params.nameOrId.match({
703 let foundCommunityId = this.props.communities
705 .find(r => r.community.name == name).community.id;
707 s => ((s.postForm.community_id = foundCommunityId), s)
711 this.setState(s => ((s.postForm.community_id = id), s)),
718 if (isBrowser() && this.state.postForm.community_id) {
719 this.choices.setChoiceByValue(
720 this.state.postForm.community_id.toString()
723 this.setState(this.state);
726 parseMessage(msg: any) {
727 let op = wsUserOp(msg);
730 // Errors handled by top level pages
731 // toast(i18n.t(msg.error), "danger");
732 this.setState({ loading: false });
734 } else if (op == UserOperation.CreatePost) {
735 let data = wsJsonToRes<PostResponse>(msg, PostResponse);
736 UserService.Instance.myUserInfo.match({
738 if (data.post_view.creator.id == mui.local_user_view.person.id) {
739 this.props.onCreate(data.post_view);
744 } else if (op == UserOperation.EditPost) {
745 let data = wsJsonToRes<PostResponse>(msg, PostResponse);
746 UserService.Instance.myUserInfo.match({
748 if (data.post_view.creator.id == mui.local_user_view.person.id) {
749 this.setState({ loading: false });
750 this.props.onEdit(data.post_view);
755 } else if (op == UserOperation.Search) {
756 let data = wsJsonToRes<SearchResponse>(msg, SearchResponse);
758 if (data.type_ == SearchType[SearchType.Posts]) {
759 this.setState({ suggestedPosts: Some(data.posts) });
760 } else if (data.type_ == SearchType[SearchType.Url]) {
761 this.setState({ crossPosts: Some(data.posts) });