From 9afa4a88a8719052bc7c0ec9781de3208ff63b11 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Thu, 13 Mar 2025 15:01:22 +0100
Subject: [PATCH] feat: querySelector -> useRef

---
 src/Rankings.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Rankings.tsx b/src/Rankings.tsx
index 179e6f9..2dae236 100644
--- a/src/Rankings.tsx
+++ b/src/Rankings.tsx
@@ -1,4 +1,4 @@
-import { createRef, useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import { apiAuth, User } from "./api";
 import { useSession } from "./Session";
@@ -39,10 +39,10 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
   }, [players]);
 
   const [dialog, setDialog] = useState("dialog");
+  const dialogRef = useRef<HTMLDialogElement>(null);
 
   async function handleSubmit() {
-    const dialog = document.querySelector("dialog[id='ChemistryDialog']");
-    (dialog as HTMLDialogElement).showModal();
+    if (dialogRef.current) dialogRef.current.showModal();
     setDialog("sending...");
     let left = playersLeft.map(({ id }) => id);
     let middle = playersMiddle.map(({ id }) => id);
@@ -99,6 +99,7 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
         💾 <span className="submit_text">submit</span>
       </button>
       <dialog
+        ref={dialogRef}
         id="ChemistryDialog"
         onClick={(event) => {
           event.currentTarget.close();
@@ -114,15 +115,15 @@ export function MVP({ user, players }: PlayerInfoProps) {
   const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
   const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
 
-  const [dialog, setDialog] = useState("dialog");
-
   useEffect(() => {
     setAvailablePlayers(players);
   }, [players]);
 
+  const [dialog, setDialog] = useState("dialog");
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
   async function handleSubmit() {
-    const dialog = document.querySelector("dialog[id='MVPDialog']");
-    (dialog as HTMLDialogElement).showModal();
+    if (dialogRef.current) dialogRef.current.showModal();
     setDialog("sending...");
     let mvps = rankedPlayers.map(({ id }) => id);
     const data = { user: user.id, mvps: mvps };
@@ -177,6 +178,7 @@ export function MVP({ user, players }: PlayerInfoProps) {
         💾 <span className="submit_text">submit</span>
       </button>
       <dialog
+        ref={dialogRef}
         id="MVPDialog"
         onClick={(event) => {
           event.currentTarget.close();
@@ -205,6 +207,7 @@ export default function Rankings() {
   useEffect(() => {
     loadPlayers();
   }, []);
+
   const tabs = [
     { id: "Chemistry", label: "🧪 Chemistry" },
     { id: "MVP", label: "🏆 MVP" },