1 files changed, 309 insertions, 152 deletions

diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index 925b8a8..a0d7eb7 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import { useNavigate } from 'react-router-dom';
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import { useNavigate } from "react-router-dom";
 
-import { MapSummary } from '@customTypes/Map';
-import { ModMenuContent } from '@customTypes/Content';
-import { API } from '@api/Api';
-import "@css/ModMenu.css"
-import useConfirm from '@hooks/UseConfirm';
+import { MapSummary } from "@customTypes/Map";
+import { ModMenuContent } from "@customTypes/Content";
+import { API } from "@api/Api";
+import useConfirm from "@hooks/UseConfirm";
 
 interface ModMenuProps {
   token?: string;
@@ -15,8 +14,12 @@ interface ModMenuProps {
   mapID: string;
 }
 
-const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) => {
-
+const ModMenu: React.FC<ModMenuProps> = ({
+  token,
+  data,
+  selectedRun,
+  mapID,
+}) => {
   const { confirm, ConfirmDialogComponent } = useConfirm();
 
   const [menu, setMenu] = React.useState<number>(0);
@@ -55,74 +58,99 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
               width *= 320 / height;
               height = 320;
             }
-            const canvas = document.createElement('canvas');
+            const canvas = document.createElement("canvas");
             canvas.width = width;
             canvas.height = height;
-            canvas.getContext('2d')!.drawImage(img, 0, 0, width, height);
+            canvas.getContext("2d")!.drawImage(img, 0, 0, width, height);
             resolve(canvas.toDataURL(file.type, 0.6));
           };
         }
       };
     });
-  };
+  }
 
   const _edit_map_summary_image = async () => {
-    if (await confirm("Edit Map Summary Image", "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) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
   };
 
   const _edit_map_summary_route = async () => {
-    if (await confirm("Edit Map Summary Route", "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);
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
   };
 
   const _create_map_summary_route = async () => {
-    if (await confirm("Create Map Summary Route", "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);
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
   };
 
   const _delete_map_summary_route = async () => {
-    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 (
+      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);
+        const success = await API.delete_map_summary(
+          token,
+          mapID,
+          data.summary.routes[selectedRun].route_id
+        );
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
         }
       }
     }
   };
 
   React.useEffect(() => {
-    if (menu === 3) { // add route
+    if (menu === 3) {
+      // add route
       setRouteContent({
         id: 0,
         name: "",
@@ -134,7 +162,8 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
       });
       setMd("No description available.");
     }
-    if (menu === 2) { // edit route
+    if (menu === 2) {
+      // edit route
       setRouteContent({
         id: data.summary.routes[selectedRun].route_id,
         name: data.summary.routes[selectedRun].history.runner_name,
@@ -146,207 +175,335 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
       });
       setMd(data.summary.routes[selectedRun].description);
     }
-  }, [menu]);
+  }, [menu, data.summary.routes, selectedRun]);
 
   React.useEffect(() => {
-    const modview = document.querySelector("div#modview") as HTMLElement
+    const modview = document.querySelector("div#modview") as HTMLElement;
     if (modview) {
-      showButton ? modview.style.transform = "translateY(-68%)"
-        : modview.style.transform = "translateY(0%)"
+      showButton
+        ? (modview.style.transform = "translateY(-68%)")
+        : (modview.style.transform = "translateY(0%)");
     }
 
-    const modview_block = document.querySelector("#modview_block") as HTMLElement
+    const modview_block = document.querySelector(
+      "#modview_block"
+    ) as HTMLElement;
     if (modview_block) {
-      showButton ? modview_block.style.display = "none" : modview_block.style.display = "block"
+      showButton
+        ? (modview_block.style.display = "none")
+        : (modview_block.style.display = "block");
     }
-  }, [showButton])
+  }, [showButton]);
 
   return (
     <>
       {ConfirmDialogComponent}
       <div id="modview_block" />
-      <div id='modview'>
+      <div id="modview">
         <div>
           <button onClick={() => setMenu(1)}>Edit Image</button>
           <button onClick={() => setMenu(2)}>Edit Selected Route</button>
           <button onClick={() => setMenu(3)}>Add New Route</button>
-          <button onClick={() => _delete_map_summary_route()}>Delete Selected Route</button>
+          <button onClick={() => _delete_map_summary_route()}>
+            Delete Selected Route
+          </button>
         </div>
         <div>
           {showButton ? (
             <button onClick={() => setShowButton(false)}>Show</button>
           ) : (
-            <button onClick={() => { setShowButton(true); setMenu(0); }}>Hide</button>
+            <button
+              onClick={() => {
+                setShowButton(true);
+                setMenu(0);
+              }}
+            >
+              Hide
+            </button>
           )}
         </div>
-      </div><div id='modview-menu'>
-        {// Edit Image
+      </div>
+      <div id="modview-menu">
+        {
+          // Edit Image
           menu === 1 && (
-            <div id='modview-menu-image'>
+            <div id="modview-menu-image">
               <div>
                 <span>Current Image:</span>
                 <img src={data.map.image} alt="missing" />
               </div>
 
               <div>
-                <span>New Image:
-                  <input type="file" accept='image/*' onChange={e => {
-                    if (e.target.files) {
-                      compressImage(e.target.files[0])
-                        .then(d => setImage(d));
-                    }
-                  }} /></span>
-                {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>}
-                <img src={image} alt="" id='modview-menu-image-file' />
-
+                <span>
+                  New Image:
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={e => {
+                      if (e.target.files) {
+                        compressImage(e.target.files[0]).then(d => setImage(d));
+                      }
+                    }}
+                  />
+                </span>
+                {image ? (
+                  <button onClick={() => _edit_map_summary_image()}>
+                    upload
+                  </button>
+                ) : (
+                  <span></span>
+                )}
+                <img src={image} alt="" id="modview-menu-image-file" />
               </div>
             </div>
-          )}
+          )
+        }
 
-        {// Edit Route
+        {
+          // Edit Route
           menu === 2 && (
-            <div id='modview-menu-edit'>
-              <div id='modview-route-id'>
+            <div id="modview-menu-edit">
+              <div id="modview-route-id">
                 <span>Route ID:</span>
                 <input type="number" value={routeContent.id} disabled />
               </div>
-              <div id='modview-route-name'>
+              <div id="modview-route-name">
                 <span>Runner Name:</span>
-                <input type="text" value={routeContent.name} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    name: e.target.value,
-                  });
-                }} />
+                <input
+                  type="text"
+                  value={routeContent.name}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      name: e.target.value,
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-score'>
+              <div id="modview-route-score">
                 <span>Score:</span>
-                <input type="number" value={routeContent.score} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    score: parseInt(e.target.value),
-                  });
-                }} />
+                <input
+                  type="number"
+                  value={routeContent.score}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      score: parseInt(e.target.value),
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-date'>
+              <div id="modview-route-date">
                 <span>Date:</span>
-                <input type="date" value={routeContent.date} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    date: e.target.value,
-                  });
-                }} />
+                <input
+                  type="date"
+                  value={routeContent.date}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      date: e.target.value,
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-showcase'>
+              <div id="modview-route-showcase">
                 <span>Showcase Video:</span>
-                <input type="text" value={routeContent.showcase} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    showcase: e.target.value,
-                  });
-                }} />
+                <input
+                  type="text"
+                  value={routeContent.showcase}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      showcase: e.target.value,
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-description' style={{ height: "180px", gridColumn: "1 / span 5" }}>
+              <div
+                id="modview-route-description"
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
+              >
                 <span>Description:</span>
-                <textarea value={routeContent.description} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    description: e.target.value,
-                  });
-                  setMd(routeContent.description);
-                }} />
+                <textarea
+                  value={routeContent.description}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      description: e.target.value,
+                    });
+                    setMd(routeContent.description);
+                  }}
+                />
               </div>
-              <button style={{ gridColumn: "2 / span 3", height: "40px" }} onClick={_edit_map_summary_route}>Apply</button>
+              <button
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
+                onClick={_edit_map_summary_route}
+              >
+                Apply
+              </button>
 
-              <div id='modview-md'>
+              <div id="modview-md">
                 <span>Markdown Preview</span>
-                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>Documentation</a></span>
-                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>Demo</a></span>
+                <span>
+                  <a
+                    href="https://commonmark.org/help/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Documentation
+                  </a>
+                </span>
+                <span>
+                  <a
+                    href="https://remarkjs.github.io/react-markdown/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Demo
+                  </a>
+                </span>
                 <p>
-                  <ReactMarkdown>{md}
-                  </ReactMarkdown>
+                  <ReactMarkdown>{md}</ReactMarkdown>
                 </p>
               </div>
             </div>
-          )}
+          )
+        }
 
-        {// Add Route
+        {
+          // Add Route
           menu === 3 && (
-            <div id='modview-menu-add'>
-              <div id='modview-route-category'>
+            <div id="modview-menu-add">
+              <div id="modview-route-category">
                 <span>Category:</span>
-                <select onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    category_id: parseInt(e.target.value),
-                  });
-                }}>
-                  <option value="1" key="1">CM</option>
-                  <option value="2" key="2">No SLA</option>
-                  {data.map.game_name === "Portal 2 - Cooperative" ? "" : (
-                    <option value="3" key="3">Inbounds SLA</option>)}
-                  <option value="4" key="4">Any%</option>
+                <select
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      category_id: parseInt(e.target.value),
+                    });
+                  }}
+                >
+                  <option value="1" key="1">
+                    CM
+                  </option>
+                  <option value="2" key="2">
+                    No SLA
+                  </option>
+                  {data.map.game_name === "Portal 2 - Cooperative" ? (
+                    ""
+                  ) : (
+                    <option value="3" key="3">
+                      Inbounds SLA
+                    </option>
+                  )}
+                  <option value="4" key="4">
+                    Any%
+                  </option>
                 </select>
               </div>
-              <div id='modview-route-name'>
+              <div id="modview-route-name">
                 <span>Runner Name:</span>
-                <input type="text" value={routeContent.name} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    name: e.target.value,
-                  });
-                }} />
+                <input
+                  type="text"
+                  value={routeContent.name}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      name: e.target.value,
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-score'>
+              <div id="modview-route-score">
                 <span>Score:</span>
-                <input type="number" value={routeContent.score} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    score: parseInt(e.target.value),
-                  });
-                }} />
+                <input
+                  type="number"
+                  value={routeContent.score}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      score: parseInt(e.target.value),
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-date'>
+              <div id="modview-route-date">
                 <span>Date:</span>
-                <input type="date" value={routeContent.date} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    date: e.target.value,
-                  });
-                }} />
+                <input
+                  type="date"
+                  value={routeContent.date}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      date: e.target.value,
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-showcase'>
+              <div id="modview-route-showcase">
                 <span>Showcase Video:</span>
-                <input type="text" value={routeContent.showcase} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    showcase: e.target.value,
-                  });
-                }} />
+                <input
+                  type="text"
+                  value={routeContent.showcase}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      showcase: e.target.value,
+                    });
+                  }}
+                />
               </div>
-              <div id='modview-route-description' style={{ height: "180px", gridColumn: "1 / span 5" }}>
+              <div
+                id="modview-route-description"
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
+              >
                 <span>Description:</span>
-                <textarea value={routeContent.description} onChange={(e) => {
-                  setRouteContent({
-                    ...routeContent,
-                    description: e.target.value,
-                  });
-                  setMd(routeContent.description);
-                }} />
+                <textarea
+                  value={routeContent.description}
+                  onChange={e => {
+                    setRouteContent({
+                      ...routeContent,
+                      description: e.target.value,
+                    });
+                    setMd(routeContent.description);
+                  }}
+                />
               </div>
-              <button style={{ gridColumn: "2 / span 3", height: "40px" }} onClick={_create_map_summary_route}>Apply</button>
+              <button
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
+                onClick={_create_map_summary_route}
+              >
+                Apply
+              </button>
 
-              <div id='modview-md'>
+              <div id="modview-md">
                 <span>Markdown preview</span>
-                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>documentation</a></span>
-                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>demo</a></span>
+                <span>
+                  <a
+                    href="https://commonmark.org/help/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    documentation
+                  </a>
+                </span>
+                <span>
+                  <a
+                    href="https://remarkjs.github.io/react-markdown/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    demo
+                  </a>
+                </span>
                 <p>
-                  <ReactMarkdown>{md}
-                  </ReactMarkdown>
+                  <ReactMarkdown>{md}</ReactMarkdown>
                 </p>
               </div>
             </div>
-          )}
+          )
+        }
       </div>
     </>
   );