frontend: convert all native confirm and alerts to custom hooks

3 files changed, 20 insertions, 12 deletions

diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index c22de79..0522910 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -6,6 +6,7 @@ import { time_ago } from '../utils/Time';
 import { API } from '../api/Api';
 import "../css/Maps.css"
 import { Link } from 'react-router-dom';
+import useConfirm from '../hooks/UseConfirm';
 
 interface DiscussionsProps {
   token?: string
@@ -17,6 +18,8 @@ interface DiscussionsProps {
 
 const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, mapID, onRefresh }) => {
 
+  const { confirm, ConfirmDialogComponent } = useConfirm();
+
   const [discussionThread, setDiscussionThread] = React.useState<MapDiscussion | undefined>(undefined);
   const [discussionSearch, setDiscussionSearch] = React.useState<string>("");
 
@@ -48,7 +51,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, map
   };
 
   const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => {
-    if (window.confirm(`Are you sure you want to remove post: ${discussion.title}?`)) {
+    if (await confirm("Delete Map Discussion", `Are you sure you want to remove post: ${discussion.title}?`)) {
       if (token) {
         await API.delete_map_discussion(token, mapID, discussion.id);
         onRefresh();
@@ -58,6 +61,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, map
 
   return (
     <section id='section7' className='summary3'>
+      {ConfirmDialogComponent}
       <div id='discussion-search'>
         <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={(e) => setDiscussionSearch(e.target.value)} />
         <div><button onClick={() => setCreateDiscussion(true)}>New Post</button></div>
@@ -119,9 +123,9 @@ const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, map
                   }
                 </div>
                 <div id='discussion-send'>
-                  <input type="text" value={createDiscussionCommentContent} placeholder={"Message"} 
-                  onKeyDown={(e) => e.key === "Enter" && _create_map_discussion_comment(discussionThread.discussion.id)} 
-                  onChange={(e) => setCreateDiscussionCommentContent(e.target.value)} />
+                  <input type="text" value={createDiscussionCommentContent} placeholder={"Message"}
+                    onKeyDown={(e) => e.key === "Enter" && _create_map_discussion_comment(discussionThread.discussion.id)}
+                    onChange={(e) => setCreateDiscussionCommentContent(e.target.value)} />
                   <div><button onClick={() => {
                     if (createDiscussionCommentContent !== "") {
                       _create_map_discussion_comment(discussionThread.discussion.id);
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 4a107ad..aaaee62 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -91,14 +91,14 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
 
             {r.kind === "multiplayer" ? (
               <span>
-                <button onClick={() => { window.alert(`Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                <button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
                 <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button>
                 <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button>
               </span>
             ) : r.kind === "singleplayer" && (
 
               <span>
-                <button onClick={() => { message("Demo information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                <button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
                 <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
               </span>
             )}
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index 5b0d1c8..2fb1737 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import { useNavigate } from 'react-router-dom';
 
 import { MapSummary } from '../types/Map';
 import { ModMenuContent } from '../types/Content';
 import { API } from '../api/Api';
 import "../css/ModMenu.css"
-import { useNavigate } from 'react-router-dom';
+import useConfirm from '../hooks/UseConfirm';
 
 interface ModMenuProps {
   token?: string;
@@ -16,6 +17,8 @@ interface ModMenuProps {
 
 const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) => {
 
+  const { confirm, ConfirmDialogComponent } = useConfirm();
+
   const [menu, setMenu] = React.useState<number>(0);
   const [showButton, setShowButton] = React.useState<boolean>(true);
 
@@ -64,7 +67,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
   };
 
   const _edit_map_summary_image = async () => {
-    if (window.confirm("Are you sure you want to submit this to the database?")) {
+    if (await confirm("Edit Map Summary Image", "Are you sure you want to submit this to the database?")) {
       if (token) {
         const success = await API.put_map_image(token, mapID, image);
         if (success) {
@@ -77,7 +80,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
   };
 
   const _edit_map_summary_route = async () => {
-    if (window.confirm("Are you sure you want to submit this to the database?")) {
+    if (await confirm("Edit Map Summary Route", "Are you sure you want to submit this to the database?")) {
       if (token) {
         routeContent.date += "T00:00:00Z";
         const success = await API.put_map_summary(token, mapID, routeContent);
@@ -91,7 +94,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
   };
 
   const _create_map_summary_route = async () => {
-    if (window.confirm("Are you sure you want to submit this to the database?")) {
+    if (await confirm("Create Map Summary Route", "Are you sure you want to submit this to the database?")) {
       if (token) {
         routeContent.date += "T00:00:00Z";
         const success = await API.post_map_summary(token, mapID, routeContent);
@@ -105,8 +108,8 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
   };
 
   const _delete_map_summary_route = async () => {
-    if (window.confirm(`Are you sure you want to delete this run from the database?
-      ${data.summary.routes[selectedRun].category.name}    ${data.summary.routes[selectedRun].history.score_count} portals    ${data.summary.routes[selectedRun].history.runner_name}`)) {
+    if (await confirm("Delete Map Summary Route", `Are you sure you want to submit this to the database?\n
+      ${data.summary.routes[selectedRun].category.name}\n${data.summary.routes[selectedRun].history.score_count} portals\n${data.summary.routes[selectedRun].history.runner_name}`)) {
       if (token) {
         const success = await API.delete_map_summary(token, mapID, data.summary.routes[selectedRun].route_id);
         if (success) {
@@ -160,6 +163,7 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
 
   return (
     <>
+      {ConfirmDialogComponent}
       <div id="modview_block" />
       <div id='modview'>
         <div>