Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove pictrsDeleteToast usage from PostForm #1284

Merged
merged 5 commits into from
Jun 15, 2023
Merged

Remove pictrsDeleteToast usage from PostForm #1284

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d75e436
remove pictrsDeleteToast usage from PostForm, add delete image button…
alectrocute Jun 14, 2023
12298c3
Merge branch 'main' into AA/remove-pictrsdeletetoast-from-postform
alectrocute Jun 14, 2023
44e45bb
make button a tad smaller
alectrocute Jun 14, 2023
aa48adc
Merge branch 'AA/remove-pictrsdeletetoast-from-postform' of https://g…
alectrocute Jun 14, 2023
f86b9ed
Merge branch 'main' into AA/remove-pictrsdeletetoast-from-postform
SleeplessOne1917 Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 41 additions & 4 deletions src/shared/components/post/post-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
isImage,
myAuth,
myAuthRequired,
pictrsDeleteToast,
relTags,
setupTippy,
toast,
Expand Down Expand Up @@ -73,6 +72,7 @@ interface PostFormState {
suggestedPostsRes: RequestState<SearchResponse>;
metadataRes: RequestState<GetSiteMetadataResponse>;
imageLoading: boolean;
imageDeleteUrl: string;
communitySearchLoading: boolean;
communitySearchOptions: Choice[];
previewMode: boolean;
Expand All @@ -86,6 +86,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
form: {},
loading: false,
imageLoading: false,
imageDeleteUrl: "",
communitySearchLoading: false,
previewMode: false,
communitySearchOptions: [],
Expand Down Expand Up @@ -269,6 +270,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{url && isImage(url) && (
<img src={url} className="img-fluid" alt="" />
)}
{this.state.imageDeleteUrl && (
Copy link
Contributor Author

@alectrocute alectrocute Jun 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using this.state.imageDeleteUrl for visibility of this button ensures it only appears alongside uploaded images. It's cleared upon change of form.url, so should be safe.

<button
className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, this.handleImageDelete)}
aria-label={i18n.t("delete")}
data-tippy-content={i18n.t("delete")}
>
<Icon icon="x" classes="icon-inline mr-1" />
{capitalizeFirstLetter(i18n.t("delete"))}
</button>
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
Expand Down Expand Up @@ -553,7 +565,15 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}

handlePostUrlChange(i: PostForm, event: any) {
i.setState(s => ((s.form.url = event.target.value), s));
const url = event.target.value;

i.setState({
form: {
url,
},
imageDeleteUrl: "",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If form.url is changed, we can assume user wants to abandon image – so imageDeleteUrl should be cleared.

});

i.fetchPageTitle();
}

Expand Down Expand Up @@ -644,18 +664,35 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
if (res.state === "success") {
if (res.data.msg === "ok") {
i.state.form.url = res.data.url;
pictrsDeleteToast(file.name, res.data.delete_url as string);
i.setState({ imageLoading: false });
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 });
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caught an infinite loading bug here, this resolves it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

}
});
}

handleImageDelete(i: PostForm) {
const { imageDeleteUrl } = i.state;

fetch(imageDeleteUrl);

i.setState({
imageDeleteUrl: "",
imageLoading: false,
form: {
url: "",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clearing the form.url is important here to remove the now-deleted image.

},
});
}

handleCommunitySearch = debounce(async (text: string) => {
const { selectedCommunityChoice } = this.props;
this.setState({ communitySearchLoading: true });
Expand Down