From 69aeb7889ac136a8e4fbe7de1330298e30345479 Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Wed, 22 Oct 2025 13:59:12 +0400
Subject: feat/frontend: switch to vite, update node to v22 (#281)

---
 frontend/src/pages/User.tsx | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

(limited to 'frontend/src/pages/User.tsx')

diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index d43c0c6..33be1f0 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,15 +1,15 @@
-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 { 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 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 { 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 useMessage from '@hooks/UseMessage';
+import useMessage from "@hooks/UseMessage";
 
 interface UserProps {
   profile?: UserProfile;
@@ -162,9 +162,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
             <select id='select-game'
               onChange={() => {
-                setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                setGame((document.querySelector("#select-game") as HTMLInputElement).value);
                 setChapter("0");
-                const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                const chapterSelect = document.querySelector("#select-chapter") as HTMLSelectElement;
                 if (chapterSelect) {
                   chapterSelect.value = "0";
                 }
@@ -182,7 +182,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
             : chapterData === null ? <select></select> :
 
               <select id='select-chapter'
-                onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+                onChange={() => setChapter((document.querySelector("#select-chapter") as HTMLInputElement).value)}>
                 <option value="0" key="0">All Chapters</option>
                 {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
                   <option value={e.id} key={i + 1}>{e.name}</option>
@@ -191,9 +191,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
         </div>
         <div id='profileboard-top'>
           <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+          <span style={{ justifyContent: "center" }}><span>Portals</span><img src={SortIcon} alt="" /></span>
+          <span style={{ justifyContent: "center" }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
+          <span style={{ justifyContent: "center" }}><span>Time</span><img src={SortIcon} alt="" /></span>
           <span> </span>
           <span><span>Rank</span><img src={SortIcon} alt="" /></span>
           <span><span>Date</span><img src={SortIcon} alt="" /></span>
@@ -208,7 +208,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                   });
                 }
               }}
-              ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+              ><i className='triangle' style={{ position: "relative", left: "-5px", }}></i> </button>
               <span>{pageNumber}/{pageMax}</span>
               <button onClick={() => {
                 if (pageNumber !== pageMax) {
@@ -219,7 +219,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                   });
                 }
               }}
-              ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+              ><i className='triangle' style={{ position: "relative", left: "5px", transform: "rotate(180deg)" }}></i> </button>
             </div>
           </div>
         </div>
@@ -241,7 +241,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
                         <span style={{ display: "grid" }}>{e.score_count}</span>
 
-                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
+                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : "-"}</span>
                         <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
                         <span> </span>
                         {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
@@ -268,7 +268,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
               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);
+                    const record = user.records.find((e) => e.map_id === r.id);
                     return record === undefined ? (
                       <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
                         <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
@@ -286,7 +286,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                           {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
                           <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
                           <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
+                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : "-"}</span>
                           <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                           <span> </span>
                           {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
-- 
cgit v1.2.3