From 1c51ea2e373dcdd458d8cdc1d3b2225c316f346d Mon Sep 17 00:00:00 2001 From: Wolfboy248 <105884620+Wolfboy248@users.noreply.github.com> Date: Sun, 20 Oct 2024 16:51:43 +0200 Subject: refactor: touch ups --- frontend/src/components/UploadRunDialog.tsx | 32 +++++++++++++++++-------- frontend/src/components/UseConfirm.tsx | 36 ----------------------------- frontend/src/components/UseMessage.tsx | 27 ---------------------- 3 files changed, 22 insertions(+), 73 deletions(-) delete mode 100644 frontend/src/components/UseConfirm.tsx delete mode 100644 frontend/src/components/UseMessage.tsx (limited to 'frontend/src/components') diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index b26bbe6..f3258e8 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx @@ -7,6 +7,8 @@ import { Game } from '../types/Game'; import { Map } from '../types/Map'; import { API } from '../api/Api'; import { useNavigate } from 'react-router-dom'; +import useMessage from '../hooks/UseMessage'; +import useConfirm from '../hooks/UseConfirm'; interface UploadRunDialogProps { token?: string; @@ -16,6 +18,8 @@ interface UploadRunDialogProps { } const UploadRunDialog: React.FC = ({ token, open, onClose, games }) => { + const { message, MessageDialogComponent } = useMessage(); + const { confirm, ConfirmDialogComponent } = useConfirm("Upload demo?", "Are you sure you want to upload this demo?"); const navigate = useNavigate(); @@ -89,18 +93,18 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, if (token) { if (games[selectedGameID].is_coop) { if (uploadRunContent.host_demo === null) { - alert("You must select a host demo to upload.") + message("Error", "You must select a host demo to upload.") return } else if (uploadRunContent.partner_demo === null) { - alert("You must select a partner demo to upload.") + message("Error", "You must select a partner demo to upload.") return } else if (uploadRunContent.partner_id === undefined) { - alert("You must specify your partner.") + message("Error", "You must specify your partner.") return } } else { if (uploadRunContent.host_demo === null) { - alert("You must select a demo to upload.") + message("Error", "You must select a demo to upload.") return } } @@ -112,17 +116,22 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, }) if (!scoreboard) { - alert("Error while processing demo: Unable to get scoreboard result. Is this not a CM demo?") + message("Error", "Error while processing demo: Unable to get scoreboard result. Is this not a CM demo?") return } const { portalScore, timeScore } = scoreboard.userMessage?.as() ?? {}; console.log(`Portal count: ${portalScore}. Ticks: ${timeScore}.`); - if (window.confirm("Are you sure you want to submit this run to LPHUB?")) { - const message = await API.post_record(token, uploadRunContent); - alert(message); - navigate(0); - onClose(); + + const userConfirmed = await confirm(); + + if (!userConfirmed) { + return; } + + const response = await API.post_record(token, uploadRunContent); + message("Message", response); + // navigate(0); + onClose(); } }; @@ -136,6 +145,9 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, return ( <>
+ {MessageDialogComponent} + {ConfirmDialogComponent} +
diff --git a/frontend/src/components/UseConfirm.tsx b/frontend/src/components/UseConfirm.tsx deleted file mode 100644 index 2fe0e12..0000000 --- a/frontend/src/components/UseConfirm.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useState } from 'react'; -import ConfirmDialog from './ConfirmDialog'; - -const useConfirm = ( title: string, subtitle: string ) => { - const [isOpen, setIsOpen] = useState(false); - const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null); - - const confirm = () => { - setIsOpen(true); - return new Promise((resolve) => { - setResolvePromise(() => resolve); - }); - }; - - const handleConfirm = () => { - setIsOpen(false); - if (resolvePromise) { - resolvePromise(true); - } - } - - const handleCancel = () => { - setIsOpen(false); - if (resolvePromise) { - resolvePromise(false); - } - } - - const ConfirmDialogComponent = isOpen && ( - - ); - - return { confirm, ConfirmDialogComponent }; -} - -export default useConfirm; diff --git a/frontend/src/components/UseMessage.tsx b/frontend/src/components/UseMessage.tsx deleted file mode 100644 index fbd3c82..0000000 --- a/frontend/src/components/UseMessage.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState } from 'react'; -import MessageDialog from "./MessageDialog"; - -const useMessage = () => { - const [isOpen, setIsOpen] = useState(false); - - const [title, setTitle] = useState(""); - const [subtitle, setSubtitle] = useState(""); - - const message = (title: string, subtitle: string) => { - setIsOpen(true); - setTitle(title); - setSubtitle(subtitle); - }; - - const handleClose = () => { - setIsOpen(false); - }; - - const MessageDialogComponent = isOpen && ( - - ); - - return { message, MessageDialogComponent }; -} - -export default useMessage; -- cgit v1.2.3