From 4d842995f4067058b21729aab6139cd388c36353 Mon Sep 17 00:00:00 2001 From: Wolfboy248 Date: Tue, 29 Oct 2024 11:45:00 +0100 Subject: refactor: loader dialog, uploadrundialog update, touchups --- frontend/src/components/Leaderboards.tsx | 4 +-- frontend/src/components/MessageDialogLoad.tsx | 29 ++++++++++++++++++++++ frontend/src/components/UploadRunDialog.tsx | 13 +++++++--- frontend/src/css/Dialog.css | 14 +++++++++-- frontend/src/css/UploadRunDialog.css | 6 +++++ frontend/src/hooks/UseMessage.tsx | 6 ++--- frontend/src/hooks/UseMessageLoad.tsx | 35 +++++++++++++++++++++++++++ frontend/src/pages/Profile.tsx | 6 +++++ 8 files changed, 100 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/MessageDialogLoad.tsx create mode 100644 frontend/src/hooks/UseMessageLoad.tsx (limited to 'frontend') diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx index b9e071c..4a107ad 100644 --- a/frontend/src/components/Leaderboards.tsx +++ b/frontend/src/components/Leaderboards.tsx @@ -34,9 +34,7 @@ const Leaderboards: React.FC = ({ data }) => { return (
-
- {MessageDialogComponent} -
+ {MessageDialogComponent}
void; +}; + +const MessageDialogLoad: React.FC = ({ title, onClose }) => { + return ( +
+
+
+ {title} +
+
+
+ +
+
+
+
+
+
+ ) +} + +export default MessageDialogLoad; diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index 212a792..22b895c 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx @@ -9,6 +9,7 @@ import { API } from '../api/Api'; import { useNavigate } from 'react-router-dom'; import useMessage from '../hooks/UseMessage'; import useConfirm from '../hooks/UseConfirm'; +import useMessageLoad from "../hooks/UseMessageLoad"; interface UploadRunDialogProps { token?: string; @@ -21,6 +22,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, const { message, MessageDialogComponent } = useMessage(); const { confirm, ConfirmDialogComponent } = useConfirm(); + const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad(); const navigate = useNavigate(); @@ -164,7 +166,9 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, return; } + messageLoad("Uploading..."); const [ success, response ] = await API.post_record(token, uploadRunContent); + messageLoadClose(); await message("Upload Record", response); onClose(success); navigate("/profile"); @@ -185,6 +189,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, <>
{MessageDialogComponent} + {MessageDialogLoadComponent} {ConfirmDialogComponent}
@@ -234,7 +239,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose,
: null} - {uploadRunContent.host_demo?.name} + {uploadRunContent.host_demo?.name}
{ games[selectedGameID].is_coop && @@ -246,13 +251,13 @@ const UploadRunDialog: React.FC = ({ token, open, onClose,
Drag and drop
- Or click here
- + Or click here
+
: null} - {uploadRunContent.partner_demo?.name} + {uploadRunContent.partner_demo?.name}
) diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css index 47f070b..fc557d2 100644 --- a/frontend/src/css/Dialog.css +++ b/frontend/src/css/Dialog.css @@ -1,11 +1,21 @@ .dimmer { position: fixed; - width: 100%; + /* WHAT A SCHTUPID ACTION */ + width: 200%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 4; } +.dialog-container { + position: absolute; + top: 0px; + left: -350px; + width: 100%; + height: 100%; + z-index: 10000; +} + .dialog { position: fixed; z-index: 4; @@ -82,4 +92,4 @@ transform: translate(-50%, calc(-50%)); opacity: 1; } -} \ No newline at end of file +} diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css index 737409e..f6e910b 100644 --- a/frontend/src/css/UploadRunDialog.css +++ b/frontend/src/css/UploadRunDialog.css @@ -74,6 +74,12 @@ div#upload-run{ display: none; } +.upload-run-demo-name { + text-overflow: ellipsis; + overflow: hidden; + width: 380px; +} + @keyframes dropdown-in { 0% { opacity: 0; diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx index 9bfb713..13d8e4f 100644 --- a/frontend/src/hooks/UseMessage.tsx +++ b/frontend/src/hooks/UseMessage.tsx @@ -26,13 +26,11 @@ const useMessage = () => { }; const MessageDialogComponent = isOpen && ( +
+
); - const getDialogComponent = () => { - return MessageDialogComponent; - }; - return { message, MessageDialogComponent }; } diff --git a/frontend/src/hooks/UseMessageLoad.tsx b/frontend/src/hooks/UseMessageLoad.tsx new file mode 100644 index 0000000..defd2b3 --- /dev/null +++ b/frontend/src/hooks/UseMessageLoad.tsx @@ -0,0 +1,35 @@ +import React, { useState } from 'react'; +import MessageDialogLoad from "../components/MessageDialogLoad"; + +const useMessageLoad = () => { + const [isOpen, setIsOpen] = useState(false); + + const [title, setTitle] = useState(""); + const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null); + + const messageLoad = (title: string) => { + setIsOpen(true); + setTitle(title); + return new Promise((resolve) => { + setResolvePromise(() => resolve); + }); + }; + + const messageLoadClose = () => { + setIsOpen(false); + if (resolvePromise) { + resolvePromise(); + setResolvePromise(null); + } + }; + + const MessageDialogLoadComponent = isOpen && ( +
+ +
+ ); + + return { messageLoad, messageLoadClose, MessageDialogLoadComponent }; +} + +export default useMessageLoad; diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index 3dba3ae..3f26bf8 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -10,6 +10,7 @@ import "../css/Profile.css"; import { API } from '../api/Api'; import useConfirm from '../hooks/UseConfirm'; import useMessage from '../hooks/UseMessage'; +import useMessageLoad from "../hooks/UseMessageLoad"; interface ProfileProps { profile?: UserProfile; @@ -21,6 +22,7 @@ interface ProfileProps { const Profile: React.FC = ({ profile, token, gameData, onDeleteRecord }) => { const { confirm, ConfirmDialogComponent } = useConfirm(); const { message, MessageDialogComponent } = useMessage(); + const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad(); const [navState, setNavState] = React.useState(0); const [pageNumber, setPageNumber] = React.useState(1); const [pageMax, setPageMax] = React.useState(0); @@ -69,7 +71,10 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec return; } + messageLoad("Deleting..."); + const api_success = await API.delete_map_record(token!, map_id, record_id); + messageLoadClose(); if (api_success) { await message("Delete Record", "Successfully deleted record."); onDeleteRecord(); @@ -105,6 +110,7 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec return (
{MessageDialogComponent} + {MessageDialogLoadComponent} {ConfirmDialogComponent}
-- cgit v1.2.3