Fix some submit button issues

[matc-pub]

• Disable submit buttons during submission (Regression in lemmy-ui allows the flooding of same post from new post ui #2481)
• Re-enable submit buttons after failure
• Don't throw away user input on failure
• Keep navigation warnings enabled during submission

I used this snippet for testing, which selectively replaces the form with an empty object. It also adds a one second delay before the request is made. (Comment and post examples: submit_buttons.webm)

diff --git a/src/shared/services/HttpService.ts b/src/shared/services/HttpService.ts
index 7ff9121b..01a0cef7 100644
--- a/src/shared/services/HttpService.ts
+++ b/src/shared/services/HttpService.ts
@@ -1,3 +1,4 @@
+import { isBrowser } from "@utils/browser";
 import { getHttpBase } from "@utils/env";
 import { LemmyHttp } from "lemmy-js-client";
 
@@ -56,6 +57,24 @@ class WrappedLemmyHttpClient {
       if (key !== "constructor") {
         this[key] = async (...args) => {
           try {
+            if (isBrowser()) {
+              if (
+                [
+                  "createPost",
+                  "editPost",
+                  "createComment",
+                  "editComment",
+                  "createPrivateMessage",
+                  "editPrivateMessage",
+                ].includes(key)
+              ) {
+                if (!confirm("Cancel to fail")) {
+                  args[0] = {};
+                }
+                await new Promise(r => setTimeout(r, 1000));
+              }
+            }
+
             const res = await this.rawClient[key](...args);
 
             return {

Comment and post examples with the above snippet: submit_buttons.webm

[dessalines]

I tested this out and it works great, thx a ton. So nice to get rid of that finished map, and all those lifecycle events.

I'm not sure why the non-relative import doesn't throw an error, because I've almost always seen that. I'd change it to relative just in case tho.

Lets let @SleeplessOne1917 take a look, then we can merge.

[dessalines]

These need to be relative imports, or it'll fail.

[dessalines]

Good, its nice to get rid of these.

[dessalines]

Thx, these are going to be handy.

[SleeplessOne1917]

Thanks a lot for helping with this. Most of my efforts on making a nice looking UI have been focused on the UI rewrite, so I really appreciate you improving the UX on the current UI while the new one is under development.

[SleeplessOne1917]

Use a relative import for this. For some reason, VS Code auto-imports from shared/* sometimes, but doing so causes the build to fail.

[matc-pub]

The Dockerfile builds and runs fine with absolute import. I added a linter rule to catch these in the future.

[SleeplessOne1917]

I think this would be cleaner as

  async handleCommentSubmit(
    content: string,
    language_id?: number,
  ): Promise<boolean> {
    const { node, onUpsertComment, edit } = this.props;
    let response: RequestState<CommentResponse>;

    if (typeof node === "number") {
      const post_id = node;
      response = await onUpsertComment({
        content,
        post_id,
        language_id,
      });
    } else if (edit) {
        const comment_id = node.comment_view.comment.id;
        response = await onUpsertComment({
          content,
          comment_id,
          language_id,
        });
      } else {
        const post_id = node.comment_view.post.id;
        const parent_id = node.comment_view.comment.id;
        response = await onUpsertComment({
          content,
          parent_id,
          post_id,
          language_id,
        });
      }

   return response.state !== "failed";
  }

Also, if you do use this code, make sure to run prettier on it since Github makes it hard to format code.

[SleeplessOne1917]

Shouldn't onSubmit always return a boolean, making the coalesce for success unnecessary?

[matc-pub]

onSubmit is optional, which makes success of type boolean | undefined.