From b5d0c3ca6a5ed541cb4d23e1965fdc91ee179f02 Mon Sep 17 00:00:00 2001 From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> Date: Tue, 20 Aug 2024 20:05:53 +0300 Subject: fix: homepage api call spam (#195) --- frontend/src/components/pages/home.js | 420 ++++++++++++++++------------------ 1 file changed, 198 insertions(+), 222 deletions(-) (limited to 'frontend') diff --git a/frontend/src/components/pages/home.js b/frontend/src/components/pages/home.js index b0cc75f..c2376f2 100644 --- a/frontend/src/components/pages/home.js +++ b/frontend/src/components/pages/home.js @@ -6,261 +6,237 @@ import Record from '../record'; export default function Homepage({ token }) { const [profile, setProfile] = useState(null); - const [loading, setLoading] = useState(true) - - const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => { + if (!token) { return; } - try { - fetch(`https://lp.ardapektezol.com/api/v1/profile`, { + + async function home() { + + const profileResponse = await fetch(`https://lp.ardapektezol.com/api/v1/profile`, { headers: { - 'Content-Type': 'application/json', Authorization: token } }) - .then(r => r.json()) - .then(d => setProfile(d.data)) - .then(d => { - if (profile != null) { - setIsLoggedIn(true) - } - }) - .then(d => { - setLoading(false) - }) - } catch (error) { - console.log(error) - } - }, [token]); + const profileData = await profileResponse.json(); - useEffect(() => { - async function fetchMapImg() { - if (!isLoggedIn) { - return; - } - try { - const response = await fetch("https://lp.ardapektezol.com/api/v1/games", { - headers: { - 'Authorization': token - } - }); - - const data = await response.json(); + setProfile(profileData); - const recommendedMapImg = document.querySelector("#recommendedMapImg"); - - recommendedMapImg.style.backgroundImage = `url(${data.data[0].image})` + const gamesResponse = await fetch("https://lp.ardapektezol.com/api/v1/games", { + headers: { + Authorization: token + } + }); - const column1 = document.querySelector("#column1"); - const column2 = document.querySelector("#column2"); + const gamesData = await gamesResponse.json(); - column2.style.height = column1.clientHeight + "px"; - } catch (error) { - console.log(error) - } - } + const recommendedMapImg = document.querySelector("#recommendedMapImg"); - fetchMapImg() + recommendedMapImg.style.backgroundImage = `url(${gamesData.data[0].image})` - const panels = document.querySelectorAll(".homepage-panel"); - panels.forEach(e => { - // this is cuz react is silly - if (e.innerHTML.includes('
')) { - return - } - const title = e.getAttribute("title"); + const column1 = document.querySelector("#column1"); + const column2 = document.querySelector("#column2"); - const titleDiv = document.createElement("div"); - const titleSpan = document.createElement("span"); + column2.style.height = column1.clientHeight + "px"; - titleDiv.classList.add("homepage-panel-title-div") + const panels = document.querySelectorAll(".homepage-panel"); + panels.forEach(e => { + // this is cuz react is silly + if (e.innerHTML.includes('
')) { + return + } + const title = e.getAttribute("title"); - titleSpan.innerText = title + const titleDiv = document.createElement("div"); + const titleSpan = document.createElement("span"); - titleDiv.appendChild(titleSpan) - e.insertBefore(titleDiv, e.firstChild) - }); - }, [token]) + titleDiv.classList.add("homepage-panel-title-div") - const newsList = [ - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - { - "title": "Portal Saved on Container Ride", - "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." - }, - ] + titleSpan.innerText = title - if (loading) { - return ( -
-
- ) + titleDiv.appendChild(titleSpan) + e.insertBefore(titleDiv, e.firstChild) + }); + } + try { + home(); + } catch (e) { + console.log("error while setting up home page:", e); } - return ( -
-
-

Home

- {isLoggedIn ? -
- Welcome back,
- - Wolfboy248 -
- : null} -
- -
-
- {/* Column 1 */} - {isLoggedIn ? -
-
-
- Overall rank
- {profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"} -
-
- Singleplayer
- {profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"} {profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""} -
-
- Cooperative rank
- {profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"} {profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""} -
+}, [token]); + +const newsList = [ + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, + { + "title": "Portal Saved on Container Ride", + "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." + }, +] + +return ( +
+
+

Home

+ {profile ? +
+ Welcome back,
+ + Wolfboy248 +
+ : null} +
+ +
+
+ {/* Column 1 */} + {profile ? +
+
+
+ Overall rank
+ {profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}
-
- : null} - {isLoggedIn ? -
-
-
-
- Container Ride - Your Record: 4 portals - World Record: 2 portals -
-
-
-
-
-
-
-
+
+ Singleplayer
+ {profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"} {profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""}
-
- : null} -
-
-
- Place - Runner - Portals - Time - Date +
+ Cooperative rank
+ {profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"} {profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""}
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- {/* Column 2 */} -
-
-
- {newsList.map((newsList, index) => ( - - ))} + : null} + {profile ? +
+
+
+
+ Container Ride + Your Record: 4 portals + World Record: 2 portals +
+
+
+
+
+
+
+
-
+ : null} +
+
+
+ Place + Runner + Portals + Time + Date +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ {/* Column 2 */} +
+
+
+ {newsList.map((newsList, index) => ( + + ))} +
+
+
-
- ) +
+) } \ No newline at end of file -- cgit v1.2.3