3 files changed, 22 insertions, 73 deletions

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<UploadRunDialogProps> = ({ 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<UploadRunDialogProps> = ({ 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<UploadRunDialogProps> = ({ 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<ScoreboardTempUpdate>() ?? {};
       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<UploadRunDialogProps> = ({ token, open, onClose,
     return (
       <>
         <div id="upload-run-block" />
+        {MessageDialogComponent}
+        {ConfirmDialogComponent}
+        
         <div id='upload-run-menu'>
           <div id='upload-run-menu-add'>
             <div id='upload-run-route-category'>
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 && (
-        <ConfirmDialog title={title} subtitle={subtitle} onConfirm={handleConfirm} onCancel={handleCancel}></ConfirmDialog>
-    );
-
-    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<string>("");
-    const [subtitle, setSubtitle] = useState<string>("");
-
-    const message = (title: string, subtitle: string) => {
-        setIsOpen(true);
-        setTitle(title);
-        setSubtitle(subtitle);
-    };
-
-    const handleClose = () => {
-        setIsOpen(false);
-    };
-
-    const MessageDialogComponent = isOpen && (
-        <MessageDialog title={title} subtitle={subtitle} onClose={handleClose}></MessageDialog>
-    );
-
-    return { message, MessageDialogComponent };
-}
-
-export default useMessage;