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/User.tsx | 599 +++++++++++++++++++++++++++++++------------- 1 file changed, 426 insertions(+), 173 deletions(-) (limited to 'frontend/src/pages/User.tsx') diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx index d43c0c6..b6dfbd3 100644 --- a/frontend/src/pages/User.tsx +++ b/frontend/src/pages/User.tsx @@ -2,13 +2,24 @@ import React from 'react'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Helmet } from 'react-helmet'; -import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images'; +import { + SteamIcon, + TwitchIcon, + YouTubeIcon, + PortalIcon, + FlagIcon, + StatisticsIcon, + SortIcon, + ThreedotIcon, + DownloadIcon, + HistoryIcon, +} from '@images/Images'; import { UserProfile } from '@customTypes/Profile'; import { Game, GameChapters } from '@customTypes/Game'; import { Map } from '@customTypes/Map'; import { API } from '@api/Api'; import { ticks_to_time } from '@utils/Time'; -import "@css/Profile.css"; +import '@css/Profile.css'; import useMessage from '@hooks/UseMessage'; interface UserProps { @@ -18,7 +29,6 @@ interface UserProps { } const User: React.FC = ({ token, profile, gameData }) => { - const { message, MessageDialogComponent } = useMessage(); const [user, setUser] = React.useState(undefined); @@ -27,18 +37,20 @@ const User: React.FC = ({ token, profile, gameData }) => { 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 location = useLocation(); const navigate = useNavigate(); const _fetch_user = async () => { - const userID = location.pathname.split("/")[2]; + const userID = location.pathname.split('/')[2]; if (token && profile && profile.profile && profile.steam_id === userID) { - navigate("/profile"); + navigate('/profile'); return; } const userData = await API.get_user(userID); @@ -46,7 +58,7 @@ const User: React.FC = ({ token, profile, gameData }) => { }; const _get_game_chapters = async () => { - if (game !== "0") { + if (game !== '0') { const gameChapters = await API.get_games_chapters(game); setChapterData(gameChapters); } else { @@ -56,7 +68,7 @@ const User: React.FC = ({ token, profile, gameData }) => { }; 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)); @@ -80,16 +92,14 @@ const User: React.FC = ({ token, profile, gameData }) => { }, [user, game, location]); React.useEffect(() => { - if (user && game !== "0") { + if (user && game !== '0') { _get_game_maps(); } - }, [user, game, chapter, location]) + }, [user, game, chapter, location]); if (!user) { - return ( - <> - ); - }; + return <>; + } return (
@@ -98,218 +108,461 @@ const User: React.FC = ({ token, profile, gameData }) => { {MessageDialogComponent} -
+
profile-image
-
+
{user.user_name}
- {user.country_code === "XX" ? "" : {user.country_code}} + {user.country_code === 'XX' ? ( + '' + ) : ( + {user.country_code} + )}
{user.titles.map(e => ( - + {e.name} ))}
- {user.links.steam === "-" ? "" : Steam} - {user.links.twitch === "-" ? "" : Twitch} - {user.links.youtube === "-" ? "" : Youtube} - {user.links.p2sr === "-" ? "" : P2SR} + {user.links.steam === '-' ? ( + '' + ) : ( + + Steam + + )} + {user.links.twitch === '-' ? ( + '' + ) : ( + + Twitch + + )} + {user.links.youtube === '-' ? ( + '' + ) : ( + + Youtube + + )} + {user.links.p2sr === '-' ? ( + '' + ) : ( + + P2SR + + )}
-
-
+
Overall - {user.rankings.overall.rank === 0 ? "N/A " : "#" + user.rankings.overall.rank + " "} - ({user.rankings.overall.completion_count}/{user.rankings.overall.completion_total}) + + {user.rankings.overall.rank === 0 + ? 'N/A ' + : '#' + user.rankings.overall.rank + ' '} + + ({user.rankings.overall.completion_count}/ + {user.rankings.overall.completion_total}) +
Singleplayer - {user.rankings.singleplayer.rank === 0 ? "N/A " : "#" + user.rankings.singleplayer.rank + " "} - ({user.rankings.singleplayer.completion_count}/{user.rankings.singleplayer.completion_total}) + + {user.rankings.singleplayer.rank === 0 + ? 'N/A ' + : '#' + user.rankings.singleplayer.rank + ' '} + + ({user.rankings.singleplayer.completion_count}/ + {user.rankings.singleplayer.completion_total}) +
Cooperative - {user.rankings.cooperative.rank === 0 ? "N/A " : "#" + user.rankings.cooperative.rank + " "} - ({user.rankings.cooperative.completion_count}/{user.rankings.cooperative.completion_total}) + + {user.rankings.cooperative.rank === 0 + ? 'N/A ' + : '#' + user.rankings.cooperative.rank + ' '} + + ({user.rankings.cooperative.completion_count}/ + {user.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" - ? ( - - user.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 ? : ""} - + {e.date.split('T')[0]} + + + + {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 = user.records.find(e => e.map_id === r.id); + return record === undefined ? ( + - ) : "" - ))) : 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 = user.records.find((e) => e.map_id === r.id); - return record === undefined ? ( - - ) : ( - - - {i === 0 && record!.scores.length > 1 ? : ""} - + {i === 0 ? ( + #{record!.placement} + ) : ( + + )} + {record!.scores[i].date.split('T')[0]} + + + + {i === 0 && record!.scores.length > 1 ? ( + + ) : ( + '' + )} - ))} - - - ) - } else { return null } - }) : (<>{console.warn(maps)})} + + ))} + + ); + } else { + return null; + } + }) + ) : ( + <>{console.warn(maps)} + )}
-- cgit v1.2.3