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/pages/Profile.tsx | 669 +++++++++++++++++++++++++++++------------ 1 file changed, 475 insertions(+), 194 deletions(-) (limited to 'frontend/src/pages/Profile.tsx') diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index 48233bf..7e3d603 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -2,16 +2,28 @@ import React from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { Helmet } from 'react-helmet'; -import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images'; +import { + SteamIcon, + TwitchIcon, + YouTubeIcon, + PortalIcon, + FlagIcon, + StatisticsIcon, + SortIcon, + ThreedotIcon, + DownloadIcon, + HistoryIcon, + DeleteIcon, +} from '@images/Images'; import { UserProfile } from '@customTypes/Profile'; import { Game, GameChapters } from '@customTypes/Game'; import { Map } from '@customTypes/Map'; import { ticks_to_time } from '@utils/Time'; -import "@css/Profile.css"; +import '@css/Profile.css'; import { API } from '@api/Api'; import useConfirm from '@hooks/UseConfirm'; import useMessage from '@hooks/UseMessage'; -import useMessageLoad from "@hooks/UseMessageLoad"; +import useMessageLoad from '@hooks/UseMessageLoad'; interface ProfileProps { profile?: UserProfile; @@ -20,17 +32,25 @@ interface ProfileProps { onDeleteRecord: () => void; } -const Profile: React.FC = ({ profile, token, gameData, onDeleteRecord }) => { +const Profile: React.FC = ({ + profile, + token, + gameData, + onDeleteRecord, +}) => { const { confirm, ConfirmDialogComponent } = useConfirm(); const { message, MessageDialogComponent } = useMessage(); - const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad(); + const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = + useMessageLoad(); const [navState, setNavState] = React.useState(0); const [pageNumber, setPageNumber] = React.useState(1); const [pageMax, setPageMax] = React.useState(0); - const [game, setGame] = React.useState("0") - const [chapter, setChapter] = React.useState("0") - const [chapterData, setChapterData] = React.useState(null); + const [game, setGame] = React.useState('0'); + const [chapter, setChapter] = React.useState('0'); + const [chapterData, setChapterData] = React.useState( + null + ); const [maps, setMaps] = React.useState([]); const navigate = useNavigate(); @@ -42,17 +62,17 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec }; const _get_game_chapters = async () => { - if (game && game !== "0") { + if (game && game !== '0') { const gameChapters = await API.get_games_chapters(game); setChapterData(gameChapters); - } else if (game && game === "0") { + } else if (game && game === '0') { setPageMax(Math.ceil(profile!.records.length / 20)); setPageNumber(1); } }; const _get_game_maps = async () => { - if (chapter === "0") { + if (chapter === '0') { const gameMaps = await API.get_game_maps(game); setMaps(gameMaps); setPageMax(Math.ceil(gameMaps.length / 20)); @@ -66,28 +86,31 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec }; const _delete_submission = async (map_id: number, record_id: number) => { - const userConfirmed = await confirm("Delete Record", "Are you sure you want to delete this record?"); + const userConfirmed = await confirm( + 'Delete Record', + 'Are you sure you want to delete this record?' + ); if (!userConfirmed) { return; } - messageLoad("Deleting..."); + 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."); + await message('Delete Record', 'Successfully deleted record.'); onDeleteRecord(); } else { - await message("Delete Record", "Could not delete record."); + await message('Delete Record', 'Could not delete record.'); } }; React.useEffect(() => { if (!profile) { - navigate("/"); - }; + navigate('/'); + } }, [profile]); React.useEffect(() => { @@ -97,16 +120,14 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec }, [profile, game]); React.useEffect(() => { - if (profile && game !== "0") { + if (profile && game !== '0') { _get_game_maps(); } - }, [profile, game, chapter, chapterData]) + }, [profile, game, chapter, chapterData]); if (!profile) { - return ( - <> - ); - }; + return <>; + } return (
@@ -119,230 +140,490 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec {ConfirmDialogComponent}
-
- - {profile.profile - ? ( -
- profile-image - Refresh -
- ) : ( -
- profile-image -
- )} +
+ {profile.profile ? ( +
+ profile-image + Refresh +
+ ) : ( +
+ profile-image +
+ )} -
+
{profile.user_name}
- {profile.country_code === "XX" ? "" : {profile.country_code}} + {profile.country_code === 'XX' ? ( + '' + ) : ( + {profile.country_code} + )}
{profile.titles.map(e => ( - + {e.name} ))}
- {profile.links.steam === "-" ? "" : Steam} - {profile.links.twitch === "-" ? "" : Twitch} - {profile.links.youtube === "-" ? "" : Youtube} - {profile.links.p2sr === "-" ? "" : P2SR} + {profile.links.steam === '-' ? ( + '' + ) : ( + + Steam + + )} + {profile.links.twitch === '-' ? ( + '' + ) : ( + + Twitch + + )} + {profile.links.youtube === '-' ? ( + '' + ) : ( + + Youtube + + )} + {profile.links.p2sr === '-' ? ( + '' + ) : ( + + P2SR + + )}
-
-
+
Overall - {profile.rankings.overall.rank === 0 ? "N/A " : "#" + profile.rankings.overall.rank + " "} - ({profile.rankings.overall.completion_count}/{profile.rankings.overall.completion_total}) + + {profile.rankings.overall.rank === 0 + ? 'N/A ' + : '#' + profile.rankings.overall.rank + ' '} + + ({profile.rankings.overall.completion_count}/ + {profile.rankings.overall.completion_total}) +
Singleplayer - {profile.rankings.singleplayer.rank === 0 ? "N/A " : "#" + profile.rankings.singleplayer.rank + " "} - ({profile.rankings.singleplayer.completion_count}/{profile.rankings.singleplayer.completion_total}) + + {profile.rankings.singleplayer.rank === 0 + ? 'N/A ' + : '#' + profile.rankings.singleplayer.rank + ' '} + + ({profile.rankings.singleplayer.completion_count}/ + {profile.rankings.singleplayer.completion_total}) +
Cooperative - {profile.rankings.cooperative.rank === 0 ? "N/A " : "#" + profile.rankings.cooperative.rank + " "} - ({profile.rankings.cooperative.completion_count}/{profile.rankings.cooperative.completion_total}) + + {profile.rankings.cooperative.rank === 0 + ? 'N/A ' + : '#' + profile.rankings.cooperative.rank + ' '} + + ({profile.rankings.cooperative.completion_count}/ + {profile.rankings.cooperative.completion_total}) +
- -
- - +
+ +
- - - - -
-
- {gameData === null ? : - - error + ) : ( + - } + + ))} + + )} - {game === "0" ? + {game === '0' ? ( - : chapterData === null ? : - - - } + ) : chapterData === null ? ( + + ) : ( + + )}
-
- Map Name - Portals - WRΔ - Time +
+ + Map Name + + + + Portals + + + + WRΔ + + + + Time + + - Rank - Date -
+ + Rank + + + + Date + + +
- - {pageNumber}/{pageMax} - + + + {pageNumber}/{pageMax} + +
-
- - {game === "0" - ? ( - - profile.records.sort((a, b) => a.map_id - b.map_id) - .map((r, index) => ( - - Math.ceil((index + 1) / 20) === pageNumber ? ( - - - - {i === 0 && r.scores.length > 1 ? : ""} - +
+ {game === '0' ? ( + profile.records + .sort((a, b) => a.map_id - b.map_id) + .map((r, index) => + Math.ceil((index + 1) / 20) === pageNumber ? ( + - ) : "" - ))) : maps ? - maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id) - .map((r, index) => { - if (Math.ceil((index + 1) / 20) === pageNumber) { - let record = profile.records.find((e) => e.map_id === r.id); - return record === undefined ? ( - - ) : ( - - - - {i === 0 && record!.scores.length > 1 ? + + : ""} - + > + download + + {i === 0 && r.scores.length > 1 ? ( + + ) : ( + '' + )} + + + ))} + + ) : ( + '' + ) + ) + ) : maps ? ( + maps + .filter(e => e.is_disabled === false) + .sort((a, b) => a.id - b.id) + .map((r, index) => { + if (Math.ceil((index + 1) / 20) === pageNumber) { + let record = profile.records.find(e => e.map_id === r.id); + return record === undefined ? ( + + ) : ( + - - ) - } else { return null } - }) : (<>{console.warn(maps)})} + + {record!.scores[i].score_count - + record!.map_wr_count > + 0 + ? `+${record!.scores[i].score_count - record!.map_wr_count}` + : `-`} + + + {ticks_to_time(record!.scores[i].score_time)} + + + {i === 0 ? ( + #{record!.placement} + ) : ( + + )} + {record!.scores[i].date.split('T')[0]} + + + + + {i === 0 && record!.scores.length > 1 ? ( + + ) : ( + '' + )} + + + ))} + + ); + } else { + return null; + } + }) + ) : ( + <>{console.warn(maps)} + )}
-- cgit v1.2.3