From a65d6d9127c3fa7f6a8ecaec5d1ffd1f47c2bc98 Mon Sep 17 00:00:00 2001 From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> Date: Tue, 3 Sep 2024 00:08:53 +0300 Subject: refactor: port to typescript --- frontend/src/components/pages/profile.js | 382 ------------------------------- 1 file changed, 382 deletions(-) delete mode 100644 frontend/src/components/pages/profile.js (limited to 'frontend/src/components/pages/profile.js') diff --git a/frontend/src/components/pages/profile.js b/frontend/src/components/pages/profile.js deleted file mode 100644 index 7c45320..0000000 --- a/frontend/src/components/pages/profile.js +++ /dev/null @@ -1,382 +0,0 @@ -import React from 'react'; -import { useLocation } from "react-router-dom"; - -import img4 from "../../imgs/4.png" -import img5 from "../../imgs/5.png" -import img12 from "../../imgs/12.png" -import img13 from "../../imgs/13.png" -import img14 from "../../imgs/14.png" -import img15 from "../../imgs/15.png" -import img16 from "../../imgs/16.png" -import img17 from "../../imgs/17.png" -import img18 from "../../imgs/18.png" -import img19 from "../../imgs/19.png" -import "./profile.css"; - -export default function Profile(props) { -const {token} = props - - -const location = useLocation() - - -const [profileData, setProfileData] = React.useState(null) -React.useEffect(()=>{ - setProfileData(null) - setChapterData(null) - setMaps(null) - setPageNumber(1) - - if(location.pathname==="/profile"){ - fetch(`https://lp.ardapektezol.com/api/v1/${location.pathname}`,{ - headers: { - 'Authorization': token - }}) - .then(r=>r.json()) - .then(d=>{ - setProfileData(d.data) - setPageMax(Math.ceil(d.data.records.length/20)) - }) - }else{ - fetch(`https://lp.ardapektezol.com/api/v1/${location.pathname}`) - .then(r=>r.json()) - .then(d=>{ - setProfileData(d.data) - setPageMax(Math.ceil(d.data.records.length/20)) - }) - } -},[location.pathname]) - - - -const [game,setGame] = React.useState(0) -const [gameData,setGameData] = React.useState(null) -const [chapter,setChapter] = React.useState("0") -const [chapterData,setChapterData] = React.useState(null) -const [maps,setMaps] = React.useState(null) - -React.useEffect(()=>{ - fetch("https://lp.ardapektezol.com/api/v1/games") - .then(r=>r.json()) - .then(d=>{ - setGameData(d.data) - setGame(0) - }) - -},[location]) - -React.useEffect(()=>{ - if(game!==null && game!= 0){ - fetch(`https://lp.ardapektezol.com/api/v1/games/${game}`) - .then(r=>r.json()) - .then(d=>{ - setChapterData(d.data) - setChapter("0") - document.querySelector('#select-chapter').value=0 - }) - - } else if (game!==null && game==0 && profileData!== null){ - setPageMax(Math.ceil(profileData.records.length/20)) - setPageNumber(1) - } - -},[game,location]) - -React.useEffect(()=>{ - if(chapter!==null){ - if(chapter==0){ - setMaps(null) - fetch(`https://lp.ardapektezol.com/api/v1/games/${game}/maps`) - .then(r=>r.json()) - .then(d=>{ - setMaps(d.data.maps); - setPageMax(Math.ceil(d.data.maps.length/20)) - setPageNumber(1) - }) - }else{ - setMaps(null) - fetch(`https://lp.ardapektezol.com/api/v1/chapters/${chapter}`) - .then(r=>r.json()) - .then(d=>{ - setMaps(d.data.maps); - setPageMax(Math.ceil(d.data.maps.length/20)) - setPageNumber(1) - }) - - } - } -},[chapter,chapterData]) - - - -const [pageNumber, setPageNumber] = React.useState(1); -const [pageMax, setPageMax] = React.useState(0); -const [navState, setNavState] = React.useState(0); // eslint-disable-next-line -React.useEffect(() => {NavClick();}, [[],navState]); -function NavClick() { - if(profileData!==null){ - const btn = document.querySelectorAll("#section2 button"); - btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"}); - btn[navState].style.backgroundColor = "#202232"; - - document.querySelectorAll("section").forEach((e,i)=>i>=2?e.style.display="none":"") - if(navState === 0){document.querySelectorAll(".profile1").forEach((e) => {e.style.display = "block"});} - if(navState === 1){document.querySelectorAll(".profile2").forEach((e) => {e.style.display = "block"});} -} -} -function UpdateProfile(){ - fetch(`https://lp.ardapektezol.com/api/v1/profile`,{ - method: 'POST', - headers: {Authorization: token} - }).then(r=>r.json()) - .then(d=>d.success?window.alert("profile updated"):window.alert(`Error: ${d.message}`)) -} - -function TimeAgo(date) { - const seconds = Math.floor((new Date() - date) / 1000); - - let interval = Math.floor(seconds / 31536000); - if (interval > 1) {return interval + ' years ago';} - - interval = Math.floor(seconds / 2592000); - if (interval > 1) {return interval + ' months ago';} - - interval = Math.floor(seconds / 86400); - if (interval > 1) {return interval + ' days ago';} - - interval = Math.floor(seconds / 3600); - if (interval > 1) {return interval + ' hours ago';} - - interval = Math.floor(seconds / 60); - if (interval > 1) {return interval + ' minutes ago';} - - if(seconds < 10) return 'just now'; - - return Math.floor(seconds) + ' seconds ago'; - }; - -function TicksToTime(ticks) { - - let seconds = Math.floor(ticks/60) - let minutes = Math.floor(seconds/60) - let hours = Math.floor(minutes/60) - - let milliseconds = Math.floor((ticks%60)*1000/60) - seconds = seconds % 60; - minutes = minutes % 60; - - return `${hours===0?"":hours+":"}${minutes===0?"":hours>0?minutes.toString().padStart(2, '0')+":":(minutes+":")}${minutes>0?seconds.toString().padStart(2, '0'):seconds}.${milliseconds.toString().padStart(3, '0')} (${ticks})`; -} - - -if(profileData!==null){ -return ( -
-
- - {profileData.profile?( -
UpdateProfile()}> - - Refresh -
- ):( -
- -
- )} - -
-
-
{profileData.user_name}
-
- {profileData.country_code==="XX"?"":{profileData.country_code}} -
-
- {profileData.titles.map(e=>( - - {e.name} - - ))} -
-
-
- {profileData.links.p2sr==="-"?"":Steam} - {profileData.links.p2sr==="-"?"":Twitch} - {profileData.links.p2sr==="-"?"":Youtube} - {profileData.links.p2sr==="-"?"":P2SR} -
- -
-
-
- Overall - {profileData.rankings.overall.rank===0?"N/A ":"#"+profileData.rankings.overall.rank+" "} - ({profileData.rankings.overall.completion_count}/{profileData.rankings.overall.completion_total}) - -
-
- Singleplayer - {profileData.rankings.singleplayer.rank===0?"N/A ":"#"+profileData.rankings.singleplayer.rank+" "} - ({profileData.rankings.singleplayer.completion_count}/{profileData.rankings.singleplayer.completion_total}) - -
-
- Cooperative - {profileData.rankings.cooperative.rank===0?"N/A ":"#"+profileData.rankings.cooperative.rank+" "} - ({profileData.rankings.cooperative.completion_count}/{profileData.rankings.cooperative.completion_total}) - -
-
-
- - -
- - -
- - - - - -
-
- {gameData===null?: - - - } - - {game==0? - - :chapterData===null?: - - - } -
-
- Map Name - Portals - WRΔ - Time - - Rank - Date -
-
- - {pageNumber}/{pageMax} - -
-
-
-
-
- - {game == 0 && profileData !== null - ? ( - - profileData.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?:""} - - - ))} - - - ) : "" - ))) : maps !== null ? - - 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 = profileData.records.find((e) => e.map_id === r.id); - return record === undefined ? ( - - ) : ( - - - {i===0&&record.scores.length>1?:""} - - - ))} - - - ) - }else{return null} - }):(<>{console.warn(maps)})} -
-
- -
-)} -} - - -- cgit v1.2.3