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/App.tsx | 42 +- frontend/src/api/Api.ts | 18 +- frontend/src/api/Auth.ts | 8 +- frontend/src/api/Games.ts | 28 +- frontend/src/api/Maps.ts | 160 ++++-- frontend/src/api/Mod.ts | 104 ++-- frontend/src/api/Rankings.ts | 6 +- frontend/src/api/User.ts | 6 +- 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 +++++++++----- frontend/src/hooks/UseConfirm.tsx | 61 +-- frontend/src/hooks/UseMessage.tsx | 60 +-- frontend/src/hooks/UseMessageLoad.tsx | 55 ++- frontend/src/images/Images.tsx | 8 +- frontend/src/index.tsx | 2 +- frontend/src/pages/About.tsx | 54 +-- frontend/src/pages/Games.tsx | 61 +-- frontend/src/pages/Homepage.tsx | 39 +- frontend/src/pages/Maplist.tsx | 165 ++++--- frontend/src/pages/Maps.tsx | 129 +++-- frontend/src/pages/Profile.tsx | 669 ++++++++++++++++++-------- frontend/src/pages/Rankings.tsx | 319 +++++++----- frontend/src/pages/Rules.tsx | 56 ++- frontend/src/pages/User.tsx | 599 ++++++++++++++++------- frontend/src/react-app-env.d.ts | 4 +- frontend/src/types/Chapters.ts | 22 +- frontend/src/types/Content.ts | 8 +- frontend/src/types/Game.ts | 13 +- frontend/src/types/Map.ts | 36 +- frontend/src/types/MapNames.ts | 220 ++++----- frontend/src/types/Pagination.ts | 2 +- frontend/src/types/Profile.ts | 21 +- frontend/src/types/Ranking.ts | 40 +- frontend/src/types/Search.ts | 6 +- frontend/src/utils/Jwt.ts | 12 +- frontend/src/utils/Time.ts | 62 ++- 48 files changed, 2936 insertions(+), 1736 deletions(-) (limited to 'frontend/src') diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 81589f6..754f5a2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,24 +1,24 @@ -import React from "react"; -import { Routes, Route } from "react-router-dom"; -import { Helmet } from "react-helmet"; +import React from 'react'; +import { Routes, Route } from 'react-router-dom'; +import { Helmet } from 'react-helmet'; -import { UserProfile } from "@customTypes/Profile"; -import Sidebar from "./components/Sidebar"; -import "./App.css"; +import { UserProfile } from '@customTypes/Profile'; +import Sidebar from './components/Sidebar'; +import './App.css'; -import Profile from "@pages/Profile"; -import Games from "@pages/Games"; -import Maps from "@pages/Maps"; -import User from "@pages/User"; -import Homepage from "@pages/Homepage"; -import UploadRunDialog from "./components/UploadRunDialog"; -import Rules from "@pages/Rules"; -import About from "@pages/About"; -import { Game } from "@customTypes/Game"; -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 Profile from '@pages/Profile'; +import Games from '@pages/Games'; +import Maps from '@pages/Maps'; +import User from '@pages/User'; +import Homepage from '@pages/Homepage'; +import UploadRunDialog from './components/UploadRunDialog'; +import Rules from '@pages/Rules'; +import About from '@pages/About'; +import { Game } from '@customTypes/Game'; +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'; const App: React.FC = () => { const [token, setToken] = React.useState(undefined); @@ -78,7 +78,7 @@ const App: React.FC = () => { { + onClose={updateProfile => { setUploadRunDialog(false); if (updateProfile) { _set_profile(get_user_id_from_token(token)); @@ -118,7 +118,7 @@ const App: React.FC = () => { } /> } /> }> - + ); diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts index 0e1658c..b98dda3 100644 --- a/frontend/src/api/Api.ts +++ b/frontend/src/api/Api.ts @@ -1,14 +1,14 @@ -import { MapDiscussionContent, ModMenuContent } from "@customTypes/Content"; -import { delete_token, get_token } from "@api/Auth"; -import { get_user, get_profile, post_profile } from "@api/User"; +import { MapDiscussionContent, ModMenuContent } from '@customTypes/Content'; +import { delete_token, get_token } from '@api/Auth'; +import { get_user, get_profile, post_profile } from '@api/User'; import { get_games, get_chapters, get_games_chapters, get_game_maps, get_search, -} from "@api/Games"; -import { get_official_rankings, get_unofficial_rankings } from "@api/Rankings"; +} from '@api/Games'; +import { get_official_rankings, get_unofficial_rankings } from '@api/Rankings'; import { get_map_summary, get_map_leaderboard, @@ -19,14 +19,14 @@ import { delete_map_discussion, post_record, delete_map_record, -} from "@api/Maps"; +} from '@api/Maps'; import { delete_map_summary, post_map_summary, put_map_image, put_map_summary, -} from "@api/Mod"; -import { UploadRunContent } from "@customTypes/Content"; +} from '@api/Mod'; +import { UploadRunContent } from '@customTypes/Content'; // add new api call function entries here // example usage: API.get_games(); @@ -91,7 +91,7 @@ export const API = { delete_map_summary(token, map_id, route_id), }; -const BASE_API_URL: string = "/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/api/Auth.ts b/frontend/src/api/Auth.ts index 875c7e5..e495d47 100644 --- a/frontend/src/api/Auth.ts +++ b/frontend/src/api/Auth.ts @@ -1,8 +1,8 @@ -import axios from "axios"; -import { url } from "@api/Api"; +import axios from 'axios'; +import { url } from '@api/Api'; export const get_token = async (): Promise => { - const response = await axios.get(url(`token`)) + const response = await axios.get(url(`token`)); if (!response.data.success) { return undefined; } @@ -10,5 +10,5 @@ export const get_token = async (): Promise => { }; export const delete_token = async () => { - await axios.delete(url("token")); + await axios.delete(url('token')); }; diff --git a/frontend/src/api/Games.ts b/frontend/src/api/Games.ts index 72bb4b3..0e47091 100644 --- a/frontend/src/api/Games.ts +++ b/frontend/src/api/Games.ts @@ -1,31 +1,35 @@ -import axios from "axios"; -import { url } from "@api/Api"; -import { GameChapter, GamesChapters } from "@customTypes/Chapters"; -import { Game } from "@customTypes/Game"; -import { Map } from "@customTypes/Map"; -import { Search } from "@customTypes/Search"; +import axios from 'axios'; +import { url } from '@api/Api'; +import { GameChapter, GamesChapters } from '@customTypes/Chapters'; +import { Game } from '@customTypes/Game'; +import { Map } from '@customTypes/Map'; +import { Search } from '@customTypes/Search'; export const get_games = async (): Promise => { - const response = await axios.get(url(`games`)) + const response = await axios.get(url(`games`)); return response.data.data; }; -export const get_chapters = async (chapter_id: string): Promise => { +export const get_chapters = async ( + chapter_id: string +): Promise => { const response = await axios.get(url(`chapters/${chapter_id}`)); return response.data.data; -} +}; -export const get_games_chapters = async (game_id: string): Promise => { +export const get_games_chapters = async ( + game_id: string +): Promise => { const response = await axios.get(url(`games/${game_id}`)); return response.data.data; }; export const get_game_maps = async (game_id: string): Promise => { - const response = await axios.get(url(`games/${game_id}/maps`)) + const response = await axios.get(url(`games/${game_id}/maps`)); return response.data.data.maps; }; export const get_search = async (q: string): Promise => { - const response = await axios.get(url(`search?q=${q}`)) + const response = await axios.get(url(`search?q=${q}`)); return response.data.data; }; diff --git a/frontend/src/api/Maps.ts b/frontend/src/api/Maps.ts index aa967ce..3a22f88 100644 --- a/frontend/src/api/Maps.ts +++ b/frontend/src/api/Maps.ts @@ -1,15 +1,25 @@ -import axios from "axios"; -import { url } from "@api/Api"; -import { MapDiscussionContent, UploadRunContent } from "@customTypes/Content"; -import { MapSummary, MapLeaderboard, MapDiscussions, MapDiscussion } from "@customTypes/Map"; +import axios from 'axios'; +import { url } from '@api/Api'; +import { MapDiscussionContent, UploadRunContent } from '@customTypes/Content'; +import { + MapSummary, + MapLeaderboard, + MapDiscussions, + MapDiscussion, +} from '@customTypes/Map'; export const get_map_summary = async (map_id: string): Promise => { - const response = await axios.get(url(`maps/${map_id}/summary`)) + const response = await axios.get(url(`maps/${map_id}/summary`)); return response.data.data; }; -export const get_map_leaderboard = async (map_id: string, page: string): Promise => { - const response = await axios.get(url(`maps/${map_id}/leaderboards?page=${page}`)); +export const get_map_leaderboard = async ( + map_id: string, + page: string +): Promise => { + const response = await axios.get( + url(`maps/${map_id}/leaderboards?page=${page}`) + ); if (!response.data.success) { return undefined; } @@ -25,7 +35,9 @@ export const get_map_leaderboard = async (map_id: string, page: string): Promise return data; }; -export const get_map_discussions = async (map_id: string): Promise => { +export const get_map_discussions = async ( + map_id: string +): Promise => { const response = await axios.get(url(`maps/${map_id}/discussions`)); if (!response.data.data.discussions) { return undefined; @@ -33,74 +45,122 @@ export const get_map_discussions = async (map_id: string): Promise => { - const response = await axios.get(url(`maps/${map_id}/discussions/${discussion_id}`)); +export const get_map_discussion = async ( + map_id: string, + discussion_id: number +): Promise => { + const response = await axios.get( + url(`maps/${map_id}/discussions/${discussion_id}`) + ); if (!response.data.data.discussion) { return undefined; } return response.data.data; }; -export const post_map_discussion = async (token: string, map_id: string, content: MapDiscussionContent): Promise => { - const response = await axios.post(url(`maps/${map_id}/discussions`), { - "title": content.title, - "content": content.content, - }, { - headers: { - "Authorization": token, +export const post_map_discussion = async ( + token: string, + map_id: string, + content: MapDiscussionContent +): Promise => { + const response = await axios.post( + url(`maps/${map_id}/discussions`), + { + title: content.title, + content: content.content, + }, + { + headers: { + Authorization: token, + }, } - }); + ); return response.data.success; }; -export const post_map_discussion_comment = async (token: string, map_id: string, discussion_id: number, comment: string): Promise => { - const response = await axios.post(url(`maps/${map_id}/discussions/${discussion_id}`), { - "comment": comment, - }, { - headers: { - "Authorization": token, +export const post_map_discussion_comment = async ( + token: string, + map_id: string, + discussion_id: number, + comment: string +): Promise => { + const response = await axios.post( + url(`maps/${map_id}/discussions/${discussion_id}`), + { + comment: comment, + }, + { + headers: { + Authorization: token, + }, } - }); + ); return response.data.success; }; -export const delete_map_discussion = async (token: string, map_id: string, discussion_id: number): Promise => { - const response = await axios.delete(url(`maps/${map_id}/discussions/${discussion_id}`), { - headers: { - "Authorization": token, +export const delete_map_discussion = async ( + token: string, + map_id: string, + discussion_id: number +): Promise => { + const response = await axios.delete( + url(`maps/${map_id}/discussions/${discussion_id}`), + { + headers: { + Authorization: token, + }, } - }); + ); return response.data.success; }; -export const post_record = async (token: string, run: UploadRunContent, map_id: number): Promise<[boolean, string]> => { +export const post_record = async ( + token: string, + run: UploadRunContent, + map_id: number +): Promise<[boolean, string]> => { if (run.partner_demo) { - const response = await axios.postForm(url(`maps/${map_id}/record`), { - "host_demo": run.host_demo, - "partner_demo": run.partner_demo, - }, { - headers: { - "Authorization": token, + const response = await axios.postForm( + url(`maps/${map_id}/record`), + { + host_demo: run.host_demo, + partner_demo: run.partner_demo, + }, + { + headers: { + Authorization: token, + }, } - }); + ); return [response.data.success, response.data.message]; } else { - const response = await axios.postForm(url(`maps/${map_id}/record`), { - "host_demo": run.host_demo, - }, { - headers: { - "Authorization": token, + const response = await axios.postForm( + url(`maps/${map_id}/record`), + { + host_demo: run.host_demo, + }, + { + headers: { + Authorization: token, + }, } - }); + ); return [response.data.success, response.data.message]; } -} +}; -export const delete_map_record = async (token: string, map_id: number, record_id: number): Promise => { - const response = await axios.delete(url(`maps/${map_id}/record/${record_id}`), { - headers: { - "Authorization": token, +export const delete_map_record = async ( + token: string, + map_id: number, + record_id: number +): Promise => { + const response = await axios.delete( + url(`maps/${map_id}/record/${record_id}`), + { + headers: { + Authorization: token, + }, } - }); + ); return response.data.success; }; diff --git a/frontend/src/api/Mod.ts b/frontend/src/api/Mod.ts index 1511f8b..69e76c5 100644 --- a/frontend/src/api/Mod.ts +++ b/frontend/src/api/Mod.ts @@ -1,58 +1,86 @@ -import axios from "axios"; -import { url } from "@api/Api"; -import { ModMenuContent } from "@customTypes/Content"; +import axios from 'axios'; +import { url } from '@api/Api'; +import { ModMenuContent } from '@customTypes/Content'; -export const put_map_image = async (token: string, map_id: string, image: string): Promise => { - const response = await axios.put(url(`maps/${map_id}/image`), { - "image": image, - }, { - headers: { - "Authorization": token, +export const put_map_image = async ( + token: string, + map_id: string, + image: string +): Promise => { + const response = await axios.put( + url(`maps/${map_id}/image`), + { + image: image, + }, + { + headers: { + Authorization: token, + }, } - }); + ); return response.data.success; }; -export const post_map_summary = async (token: string, map_id: string, content: ModMenuContent): Promise => { - const response = await axios.post(url(`maps/${map_id}/summary`), { - "category_id": content.category_id, - "user_name": content.name, - "score_count": content.score, - "record_date": content.date, - "showcase": content.showcase, - "description": content.description, - }, { - headers: { - "Authorization": token, +export const post_map_summary = async ( + token: string, + map_id: string, + content: ModMenuContent +): Promise => { + const response = await axios.post( + url(`maps/${map_id}/summary`), + { + category_id: content.category_id, + user_name: content.name, + score_count: content.score, + record_date: content.date, + showcase: content.showcase, + description: content.description, + }, + { + headers: { + Authorization: token, + }, } - }); + ); return response.data.success; }; -export const put_map_summary = async (token: string, map_id: string, content: ModMenuContent): Promise => { - const response = await axios.put(url(`maps/${map_id}/summary`), { - "route_id": content.id, - "user_name": content.name, - "score_count": content.score, - "record_date": content.date, - "showcase": content.showcase, - "description": content.description, - }, { - headers: { - "Authorization": token, +export const put_map_summary = async ( + token: string, + map_id: string, + content: ModMenuContent +): Promise => { + const response = await axios.put( + url(`maps/${map_id}/summary`), + { + route_id: content.id, + user_name: content.name, + score_count: content.score, + record_date: content.date, + showcase: content.showcase, + description: content.description, + }, + { + headers: { + Authorization: token, + }, } - }); + ); return response.data.success; }; -export const delete_map_summary = async (token: string, map_id: string, route_id: number): Promise => { +export const delete_map_summary = async ( + token: string, + map_id: string, + route_id: number +): Promise => { const response = await axios.delete(url(`maps/${map_id}/summary`), { data: { - "route_id": route_id, + route_id: route_id, }, headers: { - "Authorization": token, - } + Authorization: token, + }, }); return response.data.success; }; diff --git a/frontend/src/api/Rankings.ts b/frontend/src/api/Rankings.ts index b8d9bec..9afd999 100644 --- a/frontend/src/api/Rankings.ts +++ b/frontend/src/api/Rankings.ts @@ -1,6 +1,6 @@ -import axios from "axios"; -import { url } from "@api/Api"; -import { Ranking, SteamRanking } from "@customTypes/Ranking"; +import axios from 'axios'; +import { url } from '@api/Api'; +import { Ranking, SteamRanking } from '@customTypes/Ranking'; export const get_official_rankings = async (): Promise => { const response = await axios.get(url(`rankings/lphub`)); diff --git a/frontend/src/api/User.ts b/frontend/src/api/User.ts index 004aa22..4ce21e1 100644 --- a/frontend/src/api/User.ts +++ b/frontend/src/api/User.ts @@ -1,6 +1,6 @@ -import axios from "axios"; -import { url } from "@api/Api"; -import { UserProfile } from "@customTypes/Profile"; +import axios from 'axios'; +import { url } from '@api/Api'; +import { UserProfile } from '@customTypes/Profile'; export const get_user = async (user_id: string): Promise => { const response = await axios.get(url(`users/${user_id}`)); 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: