From e40f07211f5f15dcb138e2520a76d13afd3c0cfd Mon Sep 17 00:00:00 2001 From: FifthWit Date: Thu, 30 Jan 2025 10:44:30 -0600 Subject: formatted with prettier --- frontend/src/components/ConfirmDialog.tsx | 49 ++-- frontend/src/components/Discussions.tsx | 70 ++--- frontend/src/components/GameCategory.tsx | 37 +-- frontend/src/components/GameEntry.tsx | 33 ++- frontend/src/components/Leaderboards.tsx | 72 ++--- frontend/src/components/Login.tsx | 103 ++++---- frontend/src/components/MapEntry.tsx | 10 +- frontend/src/components/MessageDialog.tsx | 46 ++-- frontend/src/components/MessageDialogLoad.tsx | 44 ++-- frontend/src/components/ModMenu.tsx | 126 +++++---- frontend/src/components/RankingEntry.tsx | 94 ++++--- frontend/src/components/Sidebar.tsx | 262 +++++++++++------- frontend/src/components/Summary.tsx | 265 ++++++++++++------- frontend/src/components/UploadRunDialog.tsx | 366 ++++++++++++++++++-------- 14 files changed, 963 insertions(+), 614 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx index 44a653b..925118d 100644 --- a/frontend/src/components/ConfirmDialog.tsx +++ b/frontend/src/components/ConfirmDialog.tsx @@ -1,31 +1,36 @@ import React from 'react'; -import "@css/Dialog.css" +import '@css/Dialog.css'; interface ConfirmDialogProps { - title: string; - subtitle: string; - onConfirm: () => void; - onCancel: () => void; -}; + title: string; + subtitle: string; + onConfirm: () => void; + onCancel: () => void; +} -const ConfirmDialog: React.FC = ({ title, subtitle, onConfirm, onCancel }) => { - return ( -
-
-
- {title} -
-
- {subtitle} -
-
- - -
-
+const ConfirmDialog: React.FC = ({ + title, + subtitle, + onConfirm, + onCancel, +}) => { + return ( +
+
+
+ {title} +
+
+ {subtitle} +
+
+ +
- ) +
+
+ ); }; export default ConfirmDialog; diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx index 62a9fc7..994cd8e 100644 --- a/frontend/src/components/Discussions.tsx +++ b/frontend/src/components/Discussions.tsx @@ -1,16 +1,16 @@ -import React from "react"; +import React from 'react'; import { MapDiscussion, MapDiscussions, MapDiscussionsDetail, -} from "@customTypes/Map"; -import { MapDiscussionContent } from "@customTypes/Content"; -import { time_ago } from "@utils/Time"; -import { API } from "@api/Api"; -import "@css/Maps.css"; -import { Link } from "react-router-dom"; -import useConfirm from "@hooks/UseConfirm"; +} from '@customTypes/Map'; +import { MapDiscussionContent } from '@customTypes/Content'; +import { time_ago } from '@utils/Time'; +import { API } from '@api/Api'; +import '@css/Maps.css'; +import { Link } from 'react-router-dom'; +import useConfirm from '@hooks/UseConfirm'; interface DiscussionsProps { token?: string; @@ -32,17 +32,17 @@ const Discussions: React.FC = ({ const [discussionThread, setDiscussionThread] = React.useState< MapDiscussion | undefined >(undefined); - const [discussionSearch, setDiscussionSearch] = React.useState(""); + const [discussionSearch, setDiscussionSearch] = React.useState(''); const [createDiscussion, setCreateDiscussion] = React.useState(false); const [createDiscussionContent, setCreateDiscussionContent] = React.useState({ - title: "", - content: "", + title: '', + content: '', }); const [createDiscussionCommentContent, setCreateDiscussionCommentContent] = - React.useState(""); + React.useState(''); const _open_map_discussion = async (discussion_id: number) => { const mapDiscussion = await API.get_map_discussion(mapID, discussion_id); @@ -72,7 +72,7 @@ const Discussions: React.FC = ({ const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => { if ( await confirm( - "Delete Map Discussion", + 'Delete Map Discussion', `Are you sure you want to remove post: ${discussion.title}?` ) ) { @@ -90,8 +90,8 @@ const Discussions: React.FC = ({ setDiscussionSearch(e.target.value)} + placeholder={'Search for posts...'} + onChange={e => setDiscussionSearch(e.target.value)} />
@@ -104,11 +104,11 @@ const Discussions: React.FC = ({
Create Post -
+
+ onChange={e => setCreateDiscussionContent({ ...createDiscussionContent, title: e.target.value, @@ -118,7 +118,7 @@ const Discussions: React.FC = ({ + onChange={e => setCreateDiscussionContent({ ...createDiscussionContent, content: e.target.value, @@ -126,7 +126,7 @@ const Discussions: React.FC = ({ } />
-
+
)) - : ""} + : ''}
- e.key === "Enter" && + placeholder={'Message'} + onKeyDown={e => + e.key === 'Enter' && _create_map_discussion_comment(discussionThread.discussion.id) } - onChange={(e) => + onChange={e => setCreateDiscussionCommentContent(e.target.value) } />
{data.pagination.current_page}/{data.pagination.total_pages} @@ -97,17 +97,17 @@ const Leaderboards: React.FC = ({ mapID }) => { onClick={() => pageNumber === data.pagination.total_pages ? null - : setPageNumber((prevPageNumber) => prevPageNumber + 1) + : setPageNumber(prevPageNumber => prevPageNumber + 1) } > {" "} + >{' '}
@@ -120,33 +120,33 @@ const Leaderboards: React.FC = ({ mapID }) => { key={index} style={ data.map.is_coop - ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } - : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" } + ? { gridTemplateColumns: '3% 4.5% 40% 4% 3.5% 15% 15% 14.5%' } + : { gridTemplateColumns: '3% 4.5% 30% 4% 6% 20% 17% 15%' } } > {r.placement} - {r.kind === "multiplayer" ? ( + {r.kind === 'multiplayer' ? (
-  {" "} +  {' '} {r.host.user_name} -  {" "} +  {' '} {r.partner.user_name}
) : ( - r.kind === "singleplayer" && ( + r.kind === 'singleplayer' && (
-  {" "} +  {' '} {r.user.user_name} @@ -158,25 +158,25 @@ const Leaderboards: React.FC = ({ mapID }) => { {ticks_to_time(r.score_time)} {time_ago( - new Date(r.record_date.replace("T", " ").replace("Z", "")) + new Date(r.record_date.replace('T', ' ').replace('Z', '')) )} - {r.kind === "multiplayer" ? ( + {r.kind === 'multiplayer' ? ( @@ -207,17 +207,17 @@ const Leaderboards: React.FC = ({ mapID }) => { alt="download" style={{ filter: - "hue-rotate(300deg) contrast(60%) saturate(1000%)", + 'hue-rotate(300deg) contrast(60%) saturate(1000%)', }} /> ) : ( - r.kind === "singleplayer" && ( + r.kind === 'singleplayer' && ( - - - - ) - : - ( - <> - - - - - - ) - } - - ) - : - ( - - - - )} + {profile ? ( + <> + {profile.profile ? ( + <> + + + + + + ) : ( + <> + + + + + + )} + + ) : ( + + + + )} ); }; diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx index 0f494ad..f1dee5b 100644 --- a/frontend/src/components/MapEntry.tsx +++ b/frontend/src/components/MapEntry.tsx @@ -1,12 +1,8 @@ import React from 'react'; -import { Link } from "react-router-dom"; +import { Link } from 'react-router-dom'; const MapEntry: React.FC = () => { - return ( -
- -
- ) -} + return
; +}; export default MapEntry; diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx index 5c85189..b739ebc 100644 --- a/frontend/src/components/MessageDialog.tsx +++ b/frontend/src/components/MessageDialog.tsx @@ -1,29 +1,33 @@ import React from 'react'; -import "@css/Dialog.css" +import '@css/Dialog.css'; interface MessageDialogProps { - title: string; - subtitle: string; - onClose: () => void; -}; + title: string; + subtitle: string; + onClose: () => void; +} -const MessageDialog: React.FC = ({ title, subtitle, onClose }) => { - return ( -
-
-
- {title} -
-
- {subtitle} -
-
- -
-
+const MessageDialog: React.FC = ({ + title, + subtitle, + onClose, +}) => { + return ( +
+
+
+ {title}
- ) -} +
+ {subtitle} +
+
+ +
+
+
+ ); +}; export default MessageDialog; diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx index 966e064..acea27d 100644 --- a/frontend/src/components/MessageDialogLoad.tsx +++ b/frontend/src/components/MessageDialogLoad.tsx @@ -1,29 +1,31 @@ import React from 'react'; -import "@css/Dialog.css" +import '@css/Dialog.css'; interface MessageDialogLoadProps { - title: string; - onClose: () => void; -}; + title: string; + onClose: () => void; +} -const MessageDialogLoad: React.FC = ({ title, onClose }) => { - return ( -
-
-
- {title} -
-
-
- -
-
-
-
-
+const MessageDialogLoad: React.FC = ({ + title, + onClose, +}) => { + return ( +
+
+
+ {title}
- ) -} +
+
+ +
+
+
+
+
+ ); +}; export default MessageDialogLoad; diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx index f765cd8..140d6a3 100644 --- a/frontend/src/components/ModMenu.tsx +++ b/frontend/src/components/ModMenu.tsx @@ -1,12 +1,12 @@ -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 '@css/ModMenu.css'; +import useConfirm from '@hooks/UseConfirm'; interface ModMenuProps { token?: string; @@ -28,26 +28,26 @@ const ModMenu: React.FC = ({ const [routeContent, setRouteContent] = React.useState({ id: 0, - name: "", + name: '', score: 0, - date: "", - showcase: "", - description: "No description available.", + date: '', + showcase: '', + description: 'No description available.', category_id: 1, }); - const [image, setImage] = React.useState(""); - const [md, setMd] = React.useState(""); + const [image, setImage] = React.useState(''); + const [md, setMd] = React.useState(''); const navigate = useNavigate(); function compressImage(file: File): Promise { const reader = new FileReader(); reader.readAsDataURL(file); - return new Promise((resolve) => { + return new Promise(resolve => { reader.onload = () => { const img = new Image(); - if (typeof reader.result === "string") { + if (typeof reader.result === 'string') { img.src = reader.result; img.onload = () => { let { width, height } = img; @@ -59,10 +59,10 @@ const ModMenu: React.FC = ({ 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)); }; } @@ -73,8 +73,8 @@ const ModMenu: React.FC = ({ const _edit_map_summary_image = async () => { if ( await confirm( - "Edit Map Summary Image", - "Are you sure you want to submit this to the database?" + 'Edit Map Summary Image', + 'Are you sure you want to submit this to the database?' ) ) { if (token) { @@ -82,7 +82,7 @@ const ModMenu: React.FC = ({ if (success) { navigate(0); } else { - alert("Error. Check logs."); + alert('Error. Check logs.'); } } } @@ -91,17 +91,17 @@ const ModMenu: React.FC = ({ const _edit_map_summary_route = async () => { if ( await confirm( - "Edit Map Summary Route", - "Are you sure you want to submit this to the database?" + 'Edit Map Summary Route', + 'Are you sure you want to submit this to the database?' ) ) { if (token) { - routeContent.date += "T00:00:00Z"; + 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.'); } } } @@ -110,17 +110,17 @@ const ModMenu: React.FC = ({ const _create_map_summary_route = async () => { if ( await confirm( - "Create Map Summary Route", - "Are you sure you want to submit this to the database?" + 'Create Map Summary Route', + 'Are you sure you want to submit this to the database?' ) ) { if (token) { - routeContent.date += "T00:00:00Z"; + 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.'); } } } @@ -129,7 +129,7 @@ const ModMenu: React.FC = ({ const _delete_map_summary_route = async () => { if ( await confirm( - "Delete Map Summary Route", + '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}` ) @@ -143,7 +143,7 @@ const ModMenu: React.FC = ({ if (success) { navigate(0); } else { - alert("Error. Check logs."); + alert('Error. Check logs.'); } } } @@ -154,14 +154,14 @@ const ModMenu: React.FC = ({ // add route setRouteContent({ id: 0, - name: "", + name: '', score: 0, - date: "", - showcase: "", - description: "No description available.", + date: '', + showcase: '', + description: 'No description available.', category_id: 1, }); - setMd("No description available."); + setMd('No description available.'); } if (menu === 2) { // edit route @@ -169,7 +169,7 @@ const ModMenu: React.FC = ({ id: data.summary.routes[selectedRun].route_id, name: data.summary.routes[selectedRun].history.runner_name, score: data.summary.routes[selectedRun].history.score_count, - date: data.summary.routes[selectedRun].history.date.split("T")[0], + date: data.summary.routes[selectedRun].history.date.split('T')[0], showcase: data.summary.routes[selectedRun].showcase, description: data.summary.routes[selectedRun].description, category_id: data.summary.routes[selectedRun].category.id, @@ -179,20 +179,20 @@ const ModMenu: React.FC = ({ }, [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%)"); + ? (modview.style.transform = 'translateY(-68%)') + : (modview.style.transform = 'translateY(0%)'); } const modview_block = document.querySelector( - "#modview_block" + '#modview_block' ) as HTMLElement; if (modview_block) { showButton - ? (modview_block.style.display = "none") - : (modview_block.style.display = "block"); + ? (modview_block.style.display = 'none') + : (modview_block.style.display = 'block'); } }, [showButton]); @@ -240,11 +240,9 @@ const ModMenu: React.FC = ({ { + onChange={e => { if (e.target.files) { - compressImage(e.target.files[0]).then((d) => - setImage(d) - ); + compressImage(e.target.files[0]).then(d => setImage(d)); } }} /> @@ -275,7 +273,7 @@ const ModMenu: React.FC = ({ { + onChange={e => { setRouteContent({ ...routeContent, name: e.target.value, @@ -288,7 +286,7 @@ const ModMenu: React.FC = ({ { + onChange={e => { setRouteContent({ ...routeContent, score: parseInt(e.target.value), @@ -301,7 +299,7 @@ const ModMenu: React.FC = ({ { + onChange={e => { setRouteContent({ ...routeContent, date: e.target.value, @@ -314,7 +312,7 @@ const ModMenu: React.FC = ({ { + onChange={e => { setRouteContent({ ...routeContent, showcase: e.target.value, @@ -324,12 +322,12 @@ const ModMenu: React.FC = ({
Description: