Merge branch 'main' into comment-depth

.github/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -9,6 +9,19 @@ body:
         Found a bug? Please fill out the sections below. 👍
         Thanks for taking the time to fill out this bug report!
         For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+  - type: checkboxes
+    attributes:
+      label: Requirements
+      description: Before you create a bug report please do the following.
+      options:
+        - label: Is this a bug report? For questions or discussions use https://lemmy.ml/c/lemmy_support
+          required: true
+        - label: Did you check to see if this issue already exists?
+          required: true
+        - label: Is this only a single bug? Do not put multiple bugs in one issue.
+          required: true
+        - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
+          required: true
   - type: textarea
     id: summary
     attributes:
@@ -45,3 +58,9 @@ body:
       placeholder: ex. 0.17.4-rc.4
     validations:
       required: true
+  - type: input
+    id: lemmy-instance
+    attributes:
+      label: Lemmy Instance URL
+      description: Which Lemmy instance do you use? The address
+      placeholder: lemmy.ml, lemmy.world, etc

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml

@@ -7,6 +7,19 @@ body:
       value: |
         Have a suggestion about Lemmy's UI?
         For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+  - type: checkboxes
+    attributes:
+      label: Requirements
+      description: Before you create a bug report please do the following.
+      options:
+        - label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
+          required: true
+        - label: Did you check to see if this issue already exists?
+          required: true
+        - label: Is this only a feature request? Do not put multiple feature requests in one issue.
+          required: true
+        - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
+          required: true
   - type: textarea
     id: problem
     attributes:

src/shared/components/post/post-form.tsx

@@ -25,7 +25,6 @@ import {
   isImage,
   myAuth,
   myAuthRequired,
-  pictrsDeleteToast,
   relTags,
   setupTippy,
   toast,
@@ -73,6 +72,7 @@ interface PostFormState {
   suggestedPostsRes: RequestState<SearchResponse>;
   metadataRes: RequestState<GetSiteMetadataResponse>;
   imageLoading: boolean;
+  imageDeleteUrl: string;
   communitySearchLoading: boolean;
   communitySearchOptions: Choice[];
   previewMode: boolean;
@@ -86,6 +86,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     form: {},
     loading: false,
     imageLoading: false,
+    imageDeleteUrl: "",
     communitySearchLoading: false,
     previewMode: false,
     communitySearchOptions: [],
@@ -269,6 +270,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             {url && isImage(url) && (
               <img src={url} className="img-fluid" alt="" />
             )}
+            {this.state.imageDeleteUrl && (
+              <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">
@@ -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: "",
+    });
+
     i.fetchPageTitle();
   }
 
@@ -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 });
       }
     });
   }
 
+  handleImageDelete(i: PostForm) {
+    const { imageDeleteUrl } = i.state;
+
+    fetch(imageDeleteUrl);
+
+    i.setState({
+      imageDeleteUrl: "",
+      imageLoading: false,
+      form: {
+        url: "",
+      },
+    });
+  }
+
   handleCommunitySearch = debounce(async (text: string) => {
     const { selectedCommunityChoice } = this.props;
     this.setState({ communitySearchLoading: true });