Fix issue where fields would reset when creating post

This commit is contained in:
SleeplessOne1917 2023-06-20 21:06:41 -04:00
parent 6c48cf1822
commit 838f722881

View file

@ -79,6 +79,148 @@ interface PostFormState {
submitted: boolean; 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<PostFormProps, PostFormState> { export class PostForm extends Component<PostFormProps, PostFormState> {
state: PostFormState = { state: PostFormState = {
suggestedPostsRes: { state: "empty" }, suggestedPostsRes: { state: "empty" },
@ -188,15 +330,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
const url = this.state.form.url; const url = this.state.form.url;
// TODO
// const promptCheck =
// !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
// <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
return ( return (
<form <form className="post-form" onSubmit={linkEvent(this, handlePostSubmit)}>
className="post-form"
onSubmit={linkEvent(this, this.handlePostSubmit)}
>
<NavigationPrompt <NavigationPrompt
when={ when={
!!( !!(
@ -215,9 +350,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
type="url" type="url"
id="post-url" id="post-url"
className="form-control" className="form-control"
value={this.state.form.url} value={url}
onInput={linkEvent(this, this.handlePostUrlChange)} onInput={linkEvent(this, handlePostUrlChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)} onPaste={linkEvent(this, handleImageUploadPaste)}
/> />
{this.renderSuggestedTitleCopy()} {this.renderSuggestedTitleCopy()}
<form> <form>
@ -237,7 +372,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
name="file" name="file"
className="d-none" className="d-none"
disabled={!UserService.Instance.myUserInfo} disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)} onChange={linkEvent(this, handleImageUpload)}
/> />
</form> </form>
{url && validURL(url) && ( {url && validURL(url) && (
@ -276,7 +411,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.state.imageDeleteUrl && ( {this.state.imageDeleteUrl && (
<button <button
className="btn btn-danger btn-sm mt-2" className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, this.handleImageDelete)} onClick={linkEvent(this, handleImageDelete)}
aria-label={i18n.t("delete")} aria-label={i18n.t("delete")}
data-tippy-content={i18n.t("delete")} data-tippy-content={i18n.t("delete")}
> >
@ -327,7 +462,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<textarea <textarea
value={this.state.form.name} value={this.state.form.name}
id="post-title" id="post-title"
onInput={linkEvent(this, this.handlePostNameChange)} onInput={linkEvent(this, handlePostNameChange)}
className={`form-control ${ className={`form-control ${
!validTitle(this.state.form.name) && "is-invalid" !validTitle(this.state.form.name) && "is-invalid"
}`} }`}
@ -392,7 +527,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
id="post-nsfw" id="post-nsfw"
type="checkbox" type="checkbox"
checked={this.state.form.nsfw} checked={this.state.form.nsfw}
onChange={linkEvent(this, this.handlePostNsfwChange)} onChange={linkEvent(this, handlePostNsfwChange)}
/> />
</div> </div>
</div> </div>
@ -413,7 +548,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
className="form-control honeypot" className="form-control honeypot"
id="register-honey" id="register-honey"
value={this.state.form.honeypot} value={this.state.form.honeypot}
onInput={linkEvent(this, this.handleHoneyPotChange)} onInput={linkEvent(this, handleHoneyPotChange)}
/> />
<div className="mb-3 row"> <div className="mb-3 row">
<div className="col-sm-10"> <div className="col-sm-10">
@ -434,7 +569,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<button <button
type="button" type="button"
className="btn btn-secondary" className="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)} onClick={linkEvent(this, handleCancel)}
> >
{i18n.t("cancel")} {i18n.t("cancel")}
</button> </button>
@ -459,7 +594,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
role="button" role="button"
onClick={linkEvent( onClick={linkEvent(
{ i: this, suggestedTitle }, { i: this, suggestedTitle },
this.copySuggestedTitle copySuggestedTitle
)} )}
> >
{i18n.t("copy_suggested_title", { title: "" })} {suggestedTitle} {i18n.t("copy_suggested_title", { title: "" })} {suggestedTitle}
@ -517,69 +652,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
} }
} }
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,
});
}
}
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);
}
}
handlePostUrlChange(i: PostForm, event: any) {
const url = event.target.value;
i.setState({
form: {
url,
},
imageDeleteUrl: "",
});
i.fetchPageTitle();
}
async fetchPageTitle() { async fetchPageTitle() {
const url = this.state.form.url; const url = this.state.form.url;
if (url && validURL(url)) { if (url && validURL(url)) {
@ -590,11 +662,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
} }
} }
handlePostNameChange(i: PostForm, event: any) {
i.setState(s => ((s.form.name = event.target.value), s));
i.fetchSimilarPosts();
}
async fetchSimilarPosts() { async fetchSimilarPosts() {
const q = this.state.form.name; const q = this.state.form.name;
if (q && q !== "") { if (q && q !== "") {
@ -618,84 +685,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
this.setState(s => ((s.form.body = val), s)); this.setState(s => ((s.form.body = val), s));
} }
handlePostCommunityChange(i: PostForm, event: any) {
i.setState(s => ((s.form.community_id = Number(event.target.value)), s));
}
handlePostNsfwChange(i: PostForm, event: any) {
i.setState(s => ((s.form.nsfw = event.target.checked), s));
}
handleLanguageChange(val: number[]) { handleLanguageChange(val: number[]) {
this.setState(s => ((s.form.language_id = val.at(0)), s)); this.setState(s => ((s.form.language_id = val.at(0)), s));
} }
handleHoneyPotChange(i: PostForm, event: any) {
i.setState(s => ((s.form.honeypot = event.target.value), s));
}
handleCancel(i: PostForm) {
i.props.onCancel?.();
}
handlePreviewToggle(i: PostForm, event: any) {
event.preventDefault();
i.setState({ previewMode: !i.state.previewMode });
}
handleImageUploadPaste(i: PostForm, event: any) {
const image = event.clipboardData.files[0];
if (image) {
i.handleImageUpload(i, image);
}
}
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 });
}
});
}
handleImageDelete(i: PostForm) {
const { imageDeleteUrl } = i.state;
fetch(imageDeleteUrl);
i.setState({
imageDeleteUrl: "",
imageLoading: false,
form: {
url: "",
},
});
}
handleCommunitySearch = debounce(async (text: string) => { handleCommunitySearch = debounce(async (text: string) => {
const { selectedCommunityChoice } = this.props; const { selectedCommunityChoice } = this.props;
this.setState({ communitySearchLoading: true }); this.setState({ communitySearchLoading: true });