From 92447e02e5fc3977c9cfbca7a8de4132cbb4f13b Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Wed, 16 Oct 2024 21:13:54 +0300
Subject: refactor: upload run logic improvement

---
 frontend/src/App.tsx                        |  2 +-
 frontend/src/api/Api.tsx                    |  4 +-
 frontend/src/api/Maps.tsx                   | 26 ++++++++++-
 frontend/src/components/UploadRunDialog.tsx | 70 +++++++++++++++++++++++++----
 frontend/src/types/Content.tsx              |  1 -
 5 files changed, 90 insertions(+), 13 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3a7fa18..c34cbcf 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -75,7 +75,7 @@ const App: React.FC = () => {
 
   return (
     <>
-      <UploadRunDialog open={uploadRunDialog} onClose={() => setUploadRunDialog(false)} mapID={uploadRunDialogMapID} games={games} />
+      <UploadRunDialog token={token} open={uploadRunDialog} onClose={() => setUploadRunDialog(false)} games={games} />
       <Sidebar setToken={setToken} profile={profile} setProfile={setProfile} onUploadRun={() => setUploadRunDialog(true)} />
       <Routes>
         <Route path="/" element={<Homepage />} />
diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx
index 6731cb3..0f0c4d3 100644
--- a/frontend/src/api/Api.tsx
+++ b/frontend/src/api/Api.tsx
@@ -3,8 +3,9 @@ import { delete_token, get_token } from './Auth';
 import { get_user, get_profile, post_profile } from './User';
 import { get_games, get_chapters, get_games_chapters, get_game_maps, get_search } from './Games';
 import { get_official_rankings, get_unofficial_rankings } from './Rankings';
-import { get_map_summary, get_map_leaderboard, get_map_discussions, get_map_discussion, post_map_discussion, post_map_discussion_comment, delete_map_discussion } from './Maps';
+import { get_map_summary, get_map_leaderboard, get_map_discussions, get_map_discussion, post_map_discussion, post_map_discussion_comment, delete_map_discussion, post_record } from './Maps';
 import { delete_map_summary, post_map_summary, put_map_image, put_map_summary } from './Mod';
+import { UploadRunContent } from '../types/Content';
 
 // add new api call function entries here
 // example usage: API.get_games();
@@ -34,6 +35,7 @@ export const API = {
 
   post_map_discussion: (token: string, map_id: string, content: MapDiscussionContent) => post_map_discussion(token, map_id, content),
   post_map_discussion_comment: (token: string, map_id: string, discussion_id: number, comment: string) => post_map_discussion_comment(token, map_id, discussion_id, comment),
+  post_record: (token: string, run: UploadRunContent) => post_record(token, run),
 
   delete_map_discussion: (token: string, map_id: string, discussion_id: number) => delete_map_discussion(token, map_id, discussion_id),
   // Mod
diff --git a/frontend/src/api/Maps.tsx b/frontend/src/api/Maps.tsx
index fbad78c..6bdc3e6 100644
--- a/frontend/src/api/Maps.tsx
+++ b/frontend/src/api/Maps.tsx
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { url } from "./Api";
-import { MapDiscussionContent } from "../types/Content";
+import { MapDiscussionContent, UploadRunContent } from "../types/Content";
 import { MapSummary, MapLeaderboard, MapDiscussions, MapDiscussion } from "../types/Map";
 
 export const get_map_summary = async (map_id: string): Promise<MapSummary> => {
@@ -74,3 +74,27 @@ export const delete_map_discussion = async (token: string, map_id: string, discu
   });
   return response.data.success;
 };
+
+export const post_record = async (token: string, run: UploadRunContent): Promise<[string]> => {
+  if (run.partner_demo && run.partner_id) {
+    const response = await axios.postForm(url(`maps/${run.map_id}/record`), {
+      "host_demo": run.host_demo,
+      "partner_demo": run.partner_demo,
+      "partner_id": run.partner_id,
+    }, {
+      headers: {
+        "Authorization": token,
+      }
+    });
+    return response.data.message;
+  } else {
+    const response = await axios.postForm(url(`maps/${run.map_id}/record`), {
+      "host_demo": run.host_demo,
+    }, {
+      headers: {
+        "Authorization": token,
+      }
+    });
+    return response.data.message;
+  }
+};
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index fb146ba..08d4108 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -3,25 +3,26 @@ import { UploadRunContent } from '../types/Content';
 
 import '../css/UploadRunDialog.css';
 import { Game } from '../types/Game';
-import Games from '../pages/Games';
 import { Map } from '../types/Map';
 import { API } from '../api/Api';
+import { useNavigate } from 'react-router-dom';
 
 interface UploadRunDialogProps {
+  token?: string;
   open: boolean;
   onClose: () => void;
-  mapID?: number;
   games: Game[];
 }
 
-const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID, games }) => {
+const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, games }) => {
+
+  const navigate = useNavigate();
 
   const [uploadRunContent, setUploadRunContent] = React.useState<UploadRunContent>({
     map_id: 0,
     host_demo: null,
     partner_demo: null,
     partner_id: undefined,
-    is_partner_orange: undefined,
   });
 
   const [currentMap, setCurrentMap] = React.useState<string>("");
@@ -56,8 +57,10 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID,
     const gameMaps = await API.get_game_maps(game_id);
     setSelectedGameMaps(gameMaps);
     setUploadRunContent({
-      ...uploadRunContent,
       map_id: gameMaps[0].id,
+      host_demo: null,
+      partner_demo: null,
+      partner_id: undefined,
     });
     _set_current_map(gameMaps[0].name);
     setSelectedGameID(parseInt(game_id) - 1);
@@ -65,6 +68,50 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID,
     setLoading(false);
   };
 
+  const _handle_file_change = async (e: React.ChangeEvent<HTMLInputElement>, host: boolean) => {
+    if (e.target.files) {
+      if (host) {
+        setUploadRunContent({
+          ...uploadRunContent,
+          host_demo: e.target.files[0],
+        });
+      } else {
+        setUploadRunContent({
+          ...uploadRunContent,
+          partner_demo: e.target.files[0],
+        });
+      }
+    }
+  };
+
+  const _upload_run = async () => {
+    if (token) {
+      if (games[selectedGameID].is_coop) {
+        if (uploadRunContent.host_demo === null) {
+          alert("You must select a host demo to upload.")
+          return
+        } else if (uploadRunContent.partner_demo === null) {
+          alert("You must select a partner demo to upload.")
+          return
+        } else if (uploadRunContent.partner_id === undefined) {
+          alert("You must specify your partner.")
+          return
+        }
+      } else {
+        if (uploadRunContent.host_demo === null) {
+          alert("You must select a demo to upload.")
+          return
+        }
+      }
+      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();
+      }
+    }
+  };
+
   React.useEffect(() => {
     if (open) {
     _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?.
@@ -105,23 +152,28 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID,
                     <div>
                       <div id='dropdown2' className={dropdown2Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
                         {selectedGameMaps && selectedGameMaps.map((gameMap) => (
-                          <div onClick={() => { setUploadRunContent({...uploadRunContent, map_id: parseInt(gameMap.name)}); _set_current_map(gameMap.name); _handle_dropdowns(2); }} key={gameMap.id}>{gameMap.name}</div>
+                          <div onClick={() => { setUploadRunContent({...uploadRunContent, map_id: gameMap.id}); _set_current_map(gameMap.name); _handle_dropdowns(2); }} key={gameMap.id}>{gameMap.name}</div>
                         ))}
                       </div>
                     </div>
                     <span>Host Demo</span>
-                    <input type="file" name="host_demo" id="host_demo" accept=".dem" />
+                    <input type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e, true)} />
                     {
                       games[selectedGameID].is_coop &&
                       (
                         <>
                           <span>Partner Demo</span>
-                          <input type="file" name="partner_demo" id="partner_demo" accept=".dem" />
+                          <input type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e, false)} />
+                          <span>Partner ID</span>
+                          <input type="text" name="partner_id" id="partner_id" onChange={(e) => setUploadRunContent({
+                            ...uploadRunContent,
+                            partner_id: e.target.value,
+                          })} />
                         </>
                       )
                     }
                     <div className='upload-run-buttons-container'>
-                      <button onClick={() => onClose()}>Submit</button>
+                      <button onClick={_upload_run}>Submit</button>
                       <button onClick={() => onClose()}>Cancel</button>
                     </div>
                   </div>
diff --git a/frontend/src/types/Content.tsx b/frontend/src/types/Content.tsx
index 5733f1f..e6e0cb1 100644
--- a/frontend/src/types/Content.tsx
+++ b/frontend/src/types/Content.tsx
@@ -22,5 +22,4 @@ export interface UploadRunContent {
   host_demo: File | null;
   partner_demo: File | null;
   partner_id?: string;
-  is_partner_orange?: boolean;
 };
-- 
cgit v1.2.3