From c609ab4e0e564ee8bb76ced54a9cc2dfd32e6cdb Mon Sep 17 00:00:00 2001
From: regalijan <r@regalijan.com>
Date: Fri, 20 Oct 2023 12:45:54 -0400
Subject: [PATCH] Use state instead of getElementById

---
 components/GameAppealCard.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/GameAppealCard.tsx b/components/GameAppealCard.tsx
index 2a5f9d2..c2e806c 100644
--- a/components/GameAppealCard.tsx
+++ b/components/GameAppealCard.tsx
@@ -22,19 +22,16 @@ import { useState } from "react";
 
 export default function (props: GameAppealProps) {
   const [loading, setLoading] = useState(false);
+  const [percentage, setPercentage] = useState(0);
 
   async function performAction(action: "accept" | "deny"): Promise<void> {
     setLoading(true);
-    const statsReduction = parseInt(
-      (document.getElementById("reductPercentage") as HTMLInputElement | null)
-        ?.value ?? "0",
-    );
 
     const actionResponse = await fetch(
       `/api/game-appeals/${props.id}/${action}`,
       {
         body: JSON.stringify({
-          statsReduction: isNaN(statsReduction) ? 0 : statsReduction,
+          statsReduction: isNaN(percentage) ? 0 : percentage,
         }),
         headers: {
           "content-type": "application/json",
@@ -112,13 +109,13 @@ export default function (props: GameAppealProps) {
           </ModalHeader>
           <ModalBody>
             <Input
-              id="reductPercentage"
               onBeforeInput={(e) => {
                 const value = (e.target as EventTarget & { value: string })
                   .value;
 
                 return !value.match(/\D/);
               }}
+              onChange={(e) => setPercentage(parseInt(e.target.value))}
               placeholder="Number between 0 and 100"
             />
           </ModalBody>