From 7923c4e760b6a5a376a818ed6596529e4a1f81b3 Mon Sep 17 00:00:00 2001
From: Miguel Prada <mapra99@gmail.com>
Date: Sun, 30 Jul 2023 17:12:34 -0500
Subject: [PATCH] fix(issues list): Prevent race condition when adding a
 commnet or replying to an issue

---
 web/src/components/new-comment-form/new-comment-form.tsx | 6 ++++--
 web/src/components/new-reply-form/new-reply-form.tsx     | 6 ++++--
 web/src/components/upvote-button/upvote-button.tsx       | 8 ++++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/src/components/new-comment-form/new-comment-form.tsx b/web/src/components/new-comment-form/new-comment-form.tsx
index 99ab145..f9d749d 100644
--- a/web/src/components/new-comment-form/new-comment-form.tsx
+++ b/web/src/components/new-comment-form/new-comment-form.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { TextAreaField } from "../text-field"
 import { Button } from "@/components/button"
 
-import type { ChangeEvent } from 'react'
+import type { ChangeEvent, FormEvent } from 'react'
 import type { NewCommentFormProps } from './types'
 
 const MAX_CHARACTERS_COUNT = 250
@@ -16,7 +16,9 @@ export default function NewCommentForm({ onSubmit }: NewCommentFormProps) {
     setContent(event.target.value)
   }
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
     if (content.length > MAX_CHARACTERS_COUNT) return
     await onSubmit(content)
   }
diff --git a/web/src/components/new-reply-form/new-reply-form.tsx b/web/src/components/new-reply-form/new-reply-form.tsx
index 8fb0d72..ed4ab12 100644
--- a/web/src/components/new-reply-form/new-reply-form.tsx
+++ b/web/src/components/new-reply-form/new-reply-form.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { TextAreaField } from "../text-field"
 import { Button } from "@/components/button"
 
-import type { ChangeEvent } from 'react'
+import type { ChangeEvent, FormEvent } from 'react'
 import type { NewReplyFormProps } from './types'
 
 const MAX_CHARACTERS_COUNT = 250
@@ -16,7 +16,9 @@ export default function NewReplyForm({ onSubmit }: NewReplyFormProps) {
     setContent(event.target.value)
   }
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
     if (content.length > MAX_CHARACTERS_COUNT) return
     await onSubmit(content)
   }
diff --git a/web/src/components/upvote-button/upvote-button.tsx b/web/src/components/upvote-button/upvote-button.tsx
index 2368e72..8c40c0e 100644
--- a/web/src/components/upvote-button/upvote-button.tsx
+++ b/web/src/components/upvote-button/upvote-button.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, type MouseEvent } from 'react'
 import { ChevronIconUp } from "@/icons"
 
 import type { UpvoteButtonProps } from './types'
@@ -9,7 +9,10 @@ export default function UpvoteButton({ issueUuid, upvotes, initialActive = false
   const [upvotesCount, setUpvotesCount] = useState<number>(upvotes)
   const [selected, setSelected] = useState<boolean>(initialActive)
 
-  const handleClick = () => {
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+
     const newSelected = !selected
     setSelected(newSelected)
 
@@ -37,6 +40,7 @@ export default function UpvoteButton({ issueUuid, upvotes, initialActive = false
         ${selected ? 'bg-savoy-blue text-white hover:opacity-80' : 'text-marian-blue bg-ghost-white hover:bg-periwinkle'}
       `}
       onClick={handleClick}
+      type="button"
     >
       <div className={`w-3 ${selected ? 'text-white' : 'text-savoy-blue'}`}>
         <ChevronIconUp />