From 638ab2c462a81dd9723742f89c27d9b1d9ce5e5a Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 Date: Wed, 21 Jun 2023 11:52:32 +0000 Subject: [PATCH] Com create post (#1431) * Fix create post for community not having community selected by default * Fix issue where fields would reset when creating post * Run prettier and lint --- lemmy-translations | 2 +- src/shared/components/post/create-post.tsx | 2 +- src/shared/components/post/post-form.tsx | 316 ++++++++++----------- tsconfig.json | 2 +- 4 files changed, 155 insertions(+), 167 deletions(-) diff --git a/lemmy-translations b/lemmy-translations index 7fc71d0..a241fe1 160000 --- a/lemmy-translations +++ b/lemmy-translations @@ -1 +1 @@ -Subproject commit 7fc71d0860bbe5c6d620ec27112350ffe5b9229c +Subproject commit a241fe1255a6363c7ae1ec5a09520c066745e6ce diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx index ebdf999..8c74c34 100644 --- a/src/shared/components/post/create-post.tsx +++ b/src/shared/components/post/create-post.tsx @@ -114,7 +114,7 @@ export class CreatePost extends Component< if (res.state === "success") { this.setState({ selectedCommunityChoice: { - label: res.data.community_view.community.name, + label: res.data.community_view.community.title, value: res.data.community_view.community.id.toString(), }, loading: false, diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx index 4b74e07..8224683 100644 --- a/src/shared/components/post/post-form.tsx +++ b/src/shared/components/post/post-form.tsx @@ -79,6 +79,143 @@ interface PostFormState { submitted: boolean; } +function handlePostSubmit(i: PostForm, event: any) { + event.preventDefault(); + // Coerce empty url string to undefined + if ((i.state.form.url ?? "") === "") { + i.setState(s => ((s.form.url = undefined), s)); + } + i.setState({ loading: true, submitted: true }); + const auth = myAuthRequired(); + + const pForm = i.state.form; + const pv = i.props.post_view; + + if (pv) { + i.props.onEdit?.({ + name: pForm.name, + url: pForm.url, + body: pForm.body, + nsfw: pForm.nsfw, + post_id: pv.post.id, + language_id: pForm.language_id, + auth, + }); + } else if (pForm.name && pForm.community_id) { + i.props.onCreate?.({ + name: pForm.name, + community_id: pForm.community_id, + url: pForm.url, + body: pForm.body, + nsfw: pForm.nsfw, + language_id: pForm.language_id, + honeypot: pForm.honeypot, + auth, + }); + } +} + +function copySuggestedTitle(d: { i: PostForm; suggestedTitle?: string }) { + const sTitle = d.suggestedTitle; + if (sTitle) { + d.i.setState( + s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s) + ); + d.i.setState({ suggestedPostsRes: { state: "empty" } }); + setTimeout(() => { + const textarea: any = document.getElementById("post-title"); + autosize.update(textarea); + }, 10); + } +} + +function handlePostUrlChange(i: PostForm, event: any) { + const url = event.target.value; + + i.setState(prev => ({ + ...prev, + form: { + ...prev.form, + url, + }, + imageDeleteUrl: "", + })); + + i.fetchPageTitle(); +} + +function handlePostNsfwChange(i: PostForm, event: any) { + i.setState(s => ((s.form.nsfw = event.target.checked), s)); +} + +function handleHoneyPotChange(i: PostForm, event: any) { + i.setState(s => ((s.form.honeypot = event.target.value), s)); +} + +function handleCancel(i: PostForm) { + i.props.onCancel?.(); +} + +function handleImageUploadPaste(i: PostForm, event: any) { + const image = event.clipboardData.files[0]; + if (image) { + handleImageUpload(i, image); + } +} + +function handleImageUpload(i: PostForm, event: any) { + let file: any; + if (event.target) { + event.preventDefault(); + file = event.target.files[0]; + } else { + file = event; + } + + i.setState({ imageLoading: true }); + + HttpService.client.uploadImage({ image: file }).then(res => { + console.log("pictrs upload:"); + console.log(res); + if (res.state === "success") { + if (res.data.msg === "ok") { + i.state.form.url = res.data.url; + i.setState({ + imageLoading: false, + imageDeleteUrl: res.data.delete_url as string, + }); + } else { + toast(JSON.stringify(res), "danger"); + } + } else if (res.state === "failed") { + console.error(res.msg); + toast(res.msg, "danger"); + i.setState({ imageLoading: false }); + } + }); +} + +function handlePostNameChange(i: PostForm, event: any) { + i.setState(s => ((s.form.name = event.target.value), s)); + i.fetchSimilarPosts(); +} + +function handleImageDelete(i: PostForm) { + const { imageDeleteUrl } = i.state; + + fetch(imageDeleteUrl); + + i.setState(prev => ({ + ...prev, + imageDeleteUrl: "", + imageLoading: false, + form: { + ...prev.form, + url: "", + }, + })); +} + export class PostForm extends Component { state: PostFormState = { suggestedPostsRes: { state: "empty" }, @@ -123,16 +260,16 @@ export class PostForm extends Component { ...this.state.form, community_id: getIdFromString(selectedCommunityChoice.value), }, - communitySearchOptions: [selectedCommunityChoice] - .concat( + communitySearchOptions: [selectedCommunityChoice].concat( + ( this.props.initialCommunities?.map( ({ community: { id, title } }) => ({ label: title, value: id.toString(), }) ) ?? [] - ) - .filter(option => option.value !== selectedCommunityChoice.value), + ).filter(option => option.value !== selectedCommunityChoice.value) + ), }; } else { this.state = { @@ -188,15 +325,8 @@ export class PostForm extends Component { const url = this.state.form.url; - // TODO - // const promptCheck = - // !!this.state.form.name || !!this.state.form.url || !!this.state.form.body; - // return ( -
+ { type="url" id="post-url" className="form-control" - value={this.state.form.url} - onInput={linkEvent(this, this.handlePostUrlChange)} - onPaste={linkEvent(this, this.handleImageUploadPaste)} + value={url} + onInput={linkEvent(this, handlePostUrlChange)} + onPaste={linkEvent(this, handleImageUploadPaste)} /> {this.renderSuggestedTitleCopy()} @@ -237,7 +367,7 @@ export class PostForm extends Component { name="file" className="d-none" disabled={!UserService.Instance.myUserInfo} - onChange={linkEvent(this, this.handleImageUpload)} + onChange={linkEvent(this, handleImageUpload)} /> {url && validURL(url) && ( @@ -276,7 +406,7 @@ export class PostForm extends Component { {this.state.imageDeleteUrl && (