From 82d2c69e1105bafc7e3cabe66bc391c03810c270 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Sat, 22 Jun 2024 16:53:51 +0300
Subject: [PATCH] chore: add validation and debounce to forms

---
 src/components/CommentForm.astro       |  3 +-
 src/components/EmojiReactionForm.astro | 39 +++++++++++++-------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/CommentForm.astro b/src/components/CommentForm.astro
index 3c37657..900a14e 100644
--- a/src/components/CommentForm.astro
+++ b/src/components/CommentForm.astro
@@ -32,7 +32,8 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
       class="textarea py-2 px-3 w-full box-border"
       rows="5"
       placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"
-      name="commentBody"></textarea>
+      name="commentBody"
+      required></textarea>
     <input
       type="text"
       class="w-full py-2 px-3 box-border"
diff --git a/src/components/EmojiReactionForm.astro b/src/components/EmojiReactionForm.astro
index 994a6b6..256f9a4 100644
--- a/src/components/EmojiReactionForm.astro
+++ b/src/components/EmojiReactionForm.astro
@@ -16,7 +16,8 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 
 <form
   hx-post=`${backendHost}/api/blog/forms/emoji`
-  hx-target="#reaction-buttons">
+  hx-target="#reaction-buttons"
+  hx-trigger="submit delay:0.5s">
   <input type="hidden" name="postId" value=`${entryId}` />
   <div
     id="reaction-buttons"
@@ -24,24 +25,24 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
     hx-trigger="load"
     hx-swap="innerHTML">
     <div class="emoji-buttons-container">
-      <button name="emojiInput" value="👍" type="submit" class="emoji-button"
-        >&nbsp;👍&nbsp;</button
-      >
-      <button name="emojiInput" value="👎" type="submit" class="emoji-button"
-        >&nbsp;👎&nbsp;</button
-      >
-      <button name="emojiInput" value="😀" type="submit" class="emoji-button"
-        >&nbsp;😀&nbsp;</button
-      >
-      <button name="emojiInput" value="😑" type="submit" class="emoji-button"
-        >&nbsp;😑&nbsp;</button
-      >
-      <button name="emojiInput" value="🤢" type="submit" class="emoji-button"
-        >&nbsp;🤢&nbsp;</button
-      >
-      <button name="emojiInput" value="👀" type="submit" class="emoji-button"
-        >&nbsp;👀&nbsp;</button
-      >
+      <button name="emojiInput" value="👍" type="submit" class="emoji-button">
+        &nbsp;👍&nbsp;
+      </button>
+      <button name="emojiInput" value="👎" type="submit" class="emoji-button">
+        &nbsp;👎&nbsp;
+      </button>
+      <button name="emojiInput" value="😀" type="submit" class="emoji-button">
+        &nbsp;😀&nbsp;
+      </button>
+      <button name="emojiInput" value="😑" type="submit" class="emoji-button">
+        &nbsp;😑&nbsp;
+      </button>
+      <button name="emojiInput" value="🤢" type="submit" class="emoji-button">
+        &nbsp;🤢&nbsp;
+      </button>
+      <button name="emojiInput" value="👀" type="submit" class="emoji-button">
+        &nbsp;👀&nbsp;
+      </button>
     </div>
   </div>
 </form>