feat: add error messages to forms

src/components/CommentForm.astro

@@ -26,7 +26,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
   hx-post=`${backendHost}/api/blog/comments`
   hx-target="#comments-container"
   hx-swap="afterbegin"
-  hx-on::after-request="document.getElementById('no-comments-text')?.remove();this.reset()">
+  hx-on:htmx:after-request="document.getElementById('no-comments-text')?.remove();this.reset()">
   <div class="p-1 flex flex-col flex-end items-end gap-3">
     <textarea
       class="textarea py-2 px-3 w-full box-border"
@@ -46,8 +46,45 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
       >Yorum Yap</button
     >
   </div>
+  <div id="comment-form-error-container" class="mt-4">
+    <p id="comment-form-error-text" class="text-red-600"></p>
+  </div>
 </form>
 
 <script>
-  function clearNoCommentText() {}
+  function showError(errorString: string) {
+    const errorTextElement = document.getElementById("comment-form-error-text");
+
+    if (errorTextElement) {
+      errorTextElement.innerText = errorString;
+    }
+
+    setTimeout(() => {
+      if (errorTextElement) {
+        errorTextElement.innerText = "";
+      }
+    }, 5000);
+  }
+
+  const formElement = document.getElementById("comment-form");
+
+  if (formElement) {
+    formElement.addEventListener(
+      "htmx:sendError" as keyof HTMLElementEventMap,
+      () => {
+        showError(
+          "Sunucuya ulaşılamadığı için yorumunuz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
+        );
+      },
+    );
+
+    formElement.addEventListener(
+      "htmx:responseError" as keyof HTMLElementEventMap,
+      () => {
+        showError(
+          "Suncudan kaynaklı bir hatadan dolayı yorumunuz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
+        );
+      },
+    );
+  }
 </script>

src/components/EmojiReactionForm.astro

@@ -15,6 +15,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 </style>
 
 <form
+  id="emoji-reaction-form"
   hx-post=`${backendHost}/api/blog/forms/emoji`
   hx-target="#reaction-buttons"
   hx-trigger="submit delay:0.5s">
@@ -45,4 +46,48 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
       </button>
     </div>
   </div>
+  <div id="emoji-form-error-container" class="mt-4">
+    <p id="emoji-form-error-text" class="text-red-600"></p>
+  </div>
 </form>
+
+<script>
+  function showError(errorString: string) {
+    const errorTextElement = document.getElementById("emoji-form-error-text");
+
+    if (errorTextElement) {
+      errorTextElement.innerText = errorString;
+    }
+
+    setTimeout(() => {
+      if (errorTextElement) {
+        errorTextElement.innerText = "";
+      }
+    }, 5000);
+  }
+
+  const formElement = document.getElementById("emoji-reaction-form");
+
+  if (formElement) {
+    formElement.addEventListener(
+      "htmx:sendError" as keyof HTMLElementEventMap,
+      (event) => {
+        // @ts-ignore detail attribute is added by htmx
+        if (event.detail.elt.id != "reaction-buttons") {
+          showError(
+            "Sunucuya ulaşılamadığı için tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
+          );
+        }
+      },
+    );
+
+    formElement.addEventListener(
+      "htmx:responseError" as keyof HTMLElementEventMap,
+      () => {
+        showError(
+          "Sunucudan kaynaklanan bir hatadan dolayı tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
+        );
+      },
+    );
+  }
+</script>