refactor: delete run on profile

8 files changed, 48 insertions, 8 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c34cbcf..a0725f3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -11,6 +11,7 @@ import Maps from './pages/Maps';
 import User from './pages/User';
 import Homepage from './pages/Homepage';
 import UploadRunDialog from './components/UploadRunDialog';
+import MapDeleteConfirmDialog from './components/MapDeleteConfirmDialog';
 import Rules from './pages/Rules';
 import About from './pages/About';
 import { Game } from './types/Game';
@@ -18,6 +19,7 @@ import { API } from './api/Api';
 import Maplist from './pages/Maplist';
 import Rankings from './pages/Rankings';
 import { get_user_id_from_token, get_user_mod_from_token } from './utils/Jwt';
+import { MapDeleteEndpoint } from './types/Map';
 
 const App: React.FC = () => {
   const [token, setToken] = React.useState<string | undefined>(undefined);
@@ -29,6 +31,9 @@ const App: React.FC = () => {
   const [uploadRunDialog, setUploadRunDialog] = React.useState<boolean>(false);
   const [uploadRunDialogMapID, setUploadRunDialogMapID] = React.useState<number | undefined>(undefined);
 
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState<boolean>(false);
+  const [currDeleteMapInfo, setCurrDeleteMapInfo] = React.useState<MapDeleteEndpoint>();
+
   const _fetch_token = async () => {
     const token = await API.get_token();
     setToken(token);
@@ -79,7 +84,7 @@ const App: React.FC = () => {
       <Sidebar setToken={setToken} profile={profile} setProfile={setProfile} onUploadRun={() => setUploadRunDialog(true)} />
       <Routes>
         <Route path="/" element={<Homepage />} />
-        <Route path="/profile" element={<Profile profile={profile} token={token} gameData={games} />} />
+        <Route path="/profile" element={<Profile profile={profile} token={token} gameData={games} onDeleteRecord={() => setConfirmDialogOpen(true)} />} />
         <Route path="/users/*" element={<User profile={profile} token={token} gameData={games} />} />
         <Route path="/games" element={<Games games={games} />} />
         <Route path='/games/:id' element={<Maplist />}></Route>
diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx
index 0f0c4d3..d03d0ec 100644
--- a/frontend/src/api/Api.tsx
+++ b/frontend/src/api/Api.tsx
@@ -3,7 +3,7 @@ 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, post_record } 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, delete_map_record } from './Maps';
 import { delete_map_summary, post_map_summary, put_map_image, put_map_summary } from './Mod';
 import { UploadRunContent } from '../types/Content';
 
@@ -38,6 +38,8 @@ export const API = {
   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),
+
+  delete_map_record: (token: string, map_id: number, record_id: number) => delete_map_record(token, map_id, record_id),
   // Mod
   post_map_summary: (token: string, map_id: string, content: ModMenuContent) => post_map_summary(token, map_id, content),
   
@@ -47,7 +49,7 @@ export const API = {
   delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id),
 };
 
-const BASE_API_URL: string = "/api/v1/"
+const BASE_API_URL: string = "https://lp.ardapektezol.com/api/v1/"
 
 export function url(path: string): string {
   return BASE_API_URL + path;
diff --git a/frontend/src/api/Maps.tsx b/frontend/src/api/Maps.tsx
index 6bdc3e6..8295cf2 100644
--- a/frontend/src/api/Maps.tsx
+++ b/frontend/src/api/Maps.tsx
@@ -97,4 +97,13 @@ export const post_record = async (token: string, run: UploadRunContent): Promise
     });
     return response.data.message;
   }
+}
+
+export const delete_map_record = async (token: string, map_id: number, record_id: number): Promise<boolean> => {
+  const response = await axios.delete(url(`maps/${map_id}/record/${record_id}`), {
+    headers: {
+      "Authorization": token,
+    }
+  });
+  return response.data.success;
 };
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index a8c5503..f27a63e 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -17,7 +17,8 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
   const navigate = useNavigate();
 
   const _login = () => {
-    window.location.href = "/api/v1/login";
+    setToken("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzExNjU1NTgsIm1vZCI6dHJ1ZSwic3ViIjoiNzY1NjExOTgxMzE2Mjk5ODkifQ.KoENjj6Z41-QQu1VKvgAiACsjLK7IoVWlJgrGdr6s24");
+    // window.location.href = "/api/v1/login";
   };
 
   const _logout = () => {
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index 08d4108..d42ffe7 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -172,6 +172,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                         </>
                       )
                     }
+                    <div className='search-container'>
+                      
+                    </div>
                     <div className='upload-run-buttons-container'>
                       <button onClick={_upload_run}>Submit</button>
                       <button onClick={() => onClose()}>Cancel</button>
diff --git a/frontend/src/images/Images.tsx b/frontend/src/images/Images.tsx
index 89b99c0..198431b 100644
--- a/frontend/src/images/Images.tsx
+++ b/frontend/src/images/Images.tsx
@@ -20,6 +20,7 @@ import img17 from './png/17.png';
 import img18 from './png/18.png';
 import img19 from './png/19.png';
 import img20 from './png/20.png';
+import img21 from "./png/21.png";
 
 export const LogoIcon = logo;
 export const LoginIcon = login;
@@ -43,4 +44,5 @@ export const YouTubeIcon = img16;
 export const SteamIcon = img17;
 export const HistoryIcon = img18;
 export const SortIcon = img19;
-export const UploadIcon = img20;
\ No newline at end of file
+export const UploadIcon = img20;
+export const DeleteIcon = img21;
\ No newline at end of file
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index e20d930..5e39308 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,21 +1,23 @@
 import React from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '../images/Images';
+import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '../images/Images';
 import { UserProfile } from '../types/Profile';
 import { Game, GameChapters } from '../types/Game';
 import { Map } from '../types/Map';
 import { ticks_to_time } from '../utils/Time';
 import "../css/Profile.css";
 import { API } from '../api/Api';
+import MapDeleteConfirmDialog from '../components/MapDeleteConfirmDialog';
 
 interface ProfileProps {
   profile?: UserProfile;
   token?: string;
   gameData: Game[];
+  onDeleteRecord: () => void; 
 }
 
-const Profile: React.FC<ProfileProps> = ({ profile, token, gameData }) => {
+const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRecord }) => {
 
   const [navState, setNavState] = React.useState(0);
   const [pageNumber, setPageNumber] = React.useState(1);
@@ -58,6 +60,16 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData }) => {
     }
   };
 
+  const _delete_submission = async (map_id: number, record_id: number) => {
+    onDeleteRecord();
+    const api_success = await API.delete_map_record(token!, map_id, record_id);
+    if (api_success) {
+      window.alert("Successfully deleted record");
+    } else {
+      window.alert("Error: Could not delete record");
+    }
+  };
+
   React.useEffect(() => {
     if (!profile) {
       navigate("/");
@@ -228,7 +240,8 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData }) => {
                         <span>{e.date.split("T")[0]}</span>
                         <span style={{ flexDirection: "row-reverse" }}>
 
-                          <button onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                          <button style={{marginRight: "10px"}} onClick={() => { window.alert(`Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                          <button onClick={() => { _delete_submission(r.map_id, e.record_id) }}><img src={DeleteIcon}></img></button>
                           <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
                           {i === 0 && r.scores.length > 1 ? <button onClick={() => {
                             (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
diff --git a/frontend/src/types/Map.tsx b/frontend/src/types/Map.tsx
index 4a6b60e..4669e8b 100644
--- a/frontend/src/types/Map.tsx
+++ b/frontend/src/types/Map.tsx
@@ -101,3 +101,8 @@ interface MapSummaryDetailsRouteHistory {
   date: string;
 };
 
+export interface MapDeleteEndpoint {
+  map_id: number;
+  record_id: number;
+}
+