feat: querySelector -> useRef

This commit is contained in:
julius 2025-03-13 15:01:22 +01:00
parent 630986d49c
commit 9afa4a88a8
Signed by: julius
GPG Key ID: C80A63E6A5FD7092

View File

@ -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" },