From 838f722881981902b6ea3a06edc27b16da820bae Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 Date: Tue, 20 Jun 2023 21:06:41 -0400 Subject: [PATCH] Fix issue where fields would reset when creating post --- src/shared/components/post/post-form.tsx | 313 +++++++++++------------ 1 file changed, 153 insertions(+), 160 deletions(-) diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx index 7c64c9fe..6afe70ca 100644 --- a/src/shared/components/post/post-form.tsx +++ b/src/shared/components/post/post-form.tsx @@ -79,6 +79,148 @@ 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 handlePreviewToggle(i: PostForm, event: any) { + event.preventDefault(); + i.setState({ previewMode: !i.state.previewMode }); +} + +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" }, @@ -188,15 +330,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 +372,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 +411,7 @@ export class PostForm extends Component { {this.state.imageDeleteUrl && (