refactor: uploadrundialog

5 files changed, 86 insertions, 10 deletions

diff --git a/frontend/src/api/Api.tsx b/frontend/src/api/Api.tsx
index ddc7ac6..053e920 100644
--- a/frontend/src/api/Api.tsx
+++ b/frontend/src/api/Api.tsx
@@ -49,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 = "https://lp.portal2.sr/api/v1/"
+const BASE_API_URL: string = "/api/v1/"
 
 export function url(path: string): string {
   return BASE_API_URL + path;
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index 77236ce..a8c5503 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -17,8 +17,7 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
   const navigate = useNavigate();
 
   const _login = () => {
-        setToken("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzExNjU1NTgsIm1vZCI6dHJ1ZSwic3ViIjoiNzY1NjExOTgxMzE2Mjk5ODkifQ.KoENjj6Z41-QQu1VKvgAiACsjLK7IoVWlJgrGdr6s24");
-    // window.location.href = "/api/v1/login";
+    window.location.href = "/api/v1/login";
   };
 
   const _logout = () => {
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index 0476d6f..8081643 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -49,6 +49,35 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
   const [loading, setLoading] = React.useState<boolean>(false);
 
+  const [dragHightlight, setDragHighlight] = React.useState<boolean>(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const _handle_file_click = () => {
+        fileInputRef.current?.click();
+  }
+
+  const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragHighlight(true);
+  }
+
+  const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragHighlight(false);
+  }
+
+  const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragHighlight(true);
+
+        console.log(e.dataTransfer.files);
+
+        _handle_file_change(e.dataTransfer.files, host);
+  }
+
   const _handle_dropdowns = (dropdown: number) => {
     setDropdown1Vis(false);
     setDropdown2Vis(false);
@@ -75,17 +104,18 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     setLoading(false);
   };
 
-  const _handle_file_change = async (e: React.ChangeEvent<HTMLInputElement>, host: boolean) => {
-    if (e.target.files) {
+  const _handle_file_change = async (files: FileList | null, host: boolean) => {
+  console.log(files);
+    if (files) {
       if (host) {
         setUploadRunContent({
           ...uploadRunContent,
-          host_demo: e.target.files[0],
+          host_demo: files[0],
         });
       } else {
         setUploadRunContent({
           ...uploadRunContent,
-          partner_demo: e.target.files[0],
+          partner_demo: files[0],
         });
       }
     }
@@ -130,7 +160,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
       }
 
       const response = await API.post_record(token, uploadRunContent);
-      message("Message", response);
+      await message("Message", response);
       // navigate(0);
       onClose();
     }
@@ -184,13 +214,26 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                         </div>
                       </div>
                       <span>Host Demo</span>
-                      <input type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e, true)} />
+                                          <div onClick={_handle_file_click} onDragOver={(e) => {_handle_drag_over(e)}} onDrop={(e) => {_handle_drop(e, true)}} onDragLeave={(e) => {_handle_drag_leave(e)}} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}>
+                        <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} />
+                                                {!uploadRunContent.host_demo ? 
+                                                <div>
+                                                <span>Drag and drop</span>
+                                                <div>
+                                                        <span>Or click here</span>
+                                                        <button>Upload</button>
+                                                </div>
+                                                </div>
+                                                : null}
+
+                                                <span>{uploadRunContent.host_demo?.name}</span>
+                                          </div>
                       {
                         games[selectedGameID].is_coop &&
                         (
                           <>
                             <span>Partner Demo</span>
-                            <input type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e, false)} />
+                            <input type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />
                           </>
                         )
                       }
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index 6ea9884..b4667da 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -116,3 +116,33 @@ button:hover {
     width: 100%;
 }
 
+#host_demo {
+        background-color: rgba(0, 0, 0, 0);
+        display: none;
+}
+
+.upload-run-drag-area {
+        border: 2px dashed grey;
+        border-radius: 10px;
+        height: 200px;
+        cursor: pointer;
+        width: 300px;
+        transition: all 0.2s ease;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+}
+
+.upload-run-drag-area-highlight {
+        border: 2px dashed white;
+}
+
+.upload-run-drag-area-hidden {
+        height: fit-content;
+        text-align: left;
+        border: none;
+        align-items: flex-start;
+}
+
diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index 249a3bf..ebc4276 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -3,6 +3,7 @@ import MessageDialog from "../components/MessageDialog";
 
 const useMessage = () => {
     const [isOpen, setIsOpen] = useState(false);
+        const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null);
 
     const [title, setTitle] = useState<string>("");
     const [subtitle, setSubtitle] = useState<string>("");
@@ -11,6 +12,9 @@ const useMessage = () => {
         setIsOpen(true);
         setTitle(title);
         setSubtitle(subtitle);
+                return new Promise((resolve) => {
+                        setResolvePromise(() => resolve);
+                });
     };
 
     const handleClose = () => {