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/home.js | 242 ----------------------------------
 1 file changed, 242 deletions(-)
 delete mode 100644 frontend/src/components/pages/home.js

(limited to 'frontend/src/components/pages/home.js')

diff --git a/frontend/src/components/pages/home.js b/frontend/src/components/pages/home.js
deleted file mode 100644
index 0a46bec..0000000
--- a/frontend/src/components/pages/home.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import "./home.css"
-import News from '../news';
-import Record from '../record';
-
-export default function Homepage({ token }) {
-    const [profile, setProfile] = useState(null);
-
-//     useEffect(() => {
-
-//         if (!token) {
-//             return;
-//         }
-
-//         async function home() {
-
-//             const profileResponse = await fetch(`https://lp.ardapektezol.com/api/v1/profile`, {
-//                 headers: {
-//                     Authorization: token
-//                 }
-//             })
-
-//             const profileData = await profileResponse.json();
-
-//             setProfile(profileData);
-
-//             const gamesResponse = await fetch("https://lp.ardapektezol.com/api/v1/games", {
-//                 headers: {
-//                     Authorization: token
-//                 }
-//             });
-
-//             const gamesData = await gamesResponse.json();
-
-//             const recommendedMapImg = document.querySelector("#recommendedMapImg");
-
-//             recommendedMapImg.style.backgroundImage = `url(${gamesData.data[0].image})`
-
-//             const column1 = document.querySelector("#column1");
-//             const column2 = document.querySelector("#column2");
-
-//             column2.style.height = column1.clientHeight + "px";
-
-//             const panels = document.querySelectorAll(".homepage-panel");
-//             panels.forEach(e => {
-//                 // this is cuz react is silly
-//                 if (e.innerHTML.includes('<div class="homepage-panel-title-div">')) {
-//                     return
-//                 }
-//                 const title = e.getAttribute("title");
-
-//                 const titleDiv = document.createElement("div");
-//                 const titleSpan = document.createElement("span");
-
-//                 titleDiv.classList.add("homepage-panel-title-div")
-
-//                 titleSpan.innerText = title
-
-//                 titleDiv.appendChild(titleSpan)
-//                 e.insertBefore(titleDiv, e.firstChild)
-//             });
-//     }
-//     try {
-//         home();
-//     } catch (e) {
-//         console.log("error while setting up home page:", e);
-//     }
-
-// }, [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 (
-    <main>
-        <section style={{ userSelect: "none", display: "flex" }}>
-            <h1 style={{ marginTop: "53.6px", fontSize: "80px", marginBottom: "15px" }}>Home</h1>
-            {profile ?
-                <div style={{ textAlign: "right", width: "100%", marginTop: "20px" }}>
-                    <span style={{ fontSize: "25px" }}>Welcome back,</span><br />
-
-                    <span><b style={{ fontSize: "80px", transform: "translateY(-20px)", display: "block" }}>Wolfboy248</b></span>
-                </div>
-                : null}
-        </section>
-
-        <div style={{ display: "grid", gridTemplateColumns: "calc(50%) calc(50%)" }}>
-            <div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}>
-                {/* Column 1 */}
-                {profile ?
-                    <section title="Your Profile" className='homepage-panel'>
-                        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }}>
-                            <div className='stats-div'>
-                                <span>Overall rank</span><br />
-                                <span><b>{profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}</b></span>
-                            </div>
-                            <div className='stats-div'>
-                                <span>Singleplayer</span><br />
-                                <span style={{ fontSize: "22px" }}><b>{profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"}</b>&nbsp;{profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""}</span>
-                            </div>
-                            <div className='stats-div'>
-                                <span>Cooperative rank</span><br />
-                                <span style={{ fontSize: "22px" }}><b>{profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"}</b>&nbsp;{profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""}</span>
-                            </div>
-                        </div>
-                    </section>
-                    : null}
-                {profile ?
-                    <section title="What's Next?" className='homepage-panel'>
-                        <div style={{ display: "flex" }}>
-                            <div className='recommended-map-img' id="recommendedMapImg"></div>
-                            <div style={{ marginLeft: "12px", display: "block", width: "100%" }}>
-                                <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span>
-                                <span style={{ fontSize: "20px", display: "block" }}>Your Record: 4 portals</span>
-                                <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block" }}>World Record: 2 portals</span>
-                                <div className='difficulty-bar-home'>
-                                    <div className='difficulty-point' style={{ backgroundColor: "#51C355" }}></div>
-                                    <div className='difficulty-point'></div>
-                                    <div className='difficulty-point'></div>
-                                    <div className='difficulty-point'></div>
-                                    <div className='difficulty-point'></div>
-                                </div>
-                            </div>
-                        </div>
-                    </section>
-                    : null}
-                <section title="Newest Records" className='homepage-panel' style={{ height: profile ? "250px" : "960px" }}>
-                    <div className='record-title'>
-                        <div>
-                            <span>Place</span>
-                            <span style={{ textAlign: "left" }}>Runner</span>
-                            <span>Portals</span>
-                            <span>Time</span>
-                            <span>Date</span>
-                        </div>
-                    </div>
-                    <div style={{ overflowY: "scroll", height: "calc(100% - 90px)", paddingRight: "10px" }}>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                        <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
-                    </div>
-                </section>
-            </div>
-            {/* Column 2 */}
-            <div id='column2' style={{ display: "flex", alignItems: "stretch", height: "1000px" }}>
-                <section title="News" className='homepage-panel'>
-                    <div id='newsContent' style={{ display: "block", width: "100%", overflowY: "scroll", height: "calc(100% - 50px)" }}>
-                        {newsList.map((newsList, index) => (
-                            <News newsInfo={newsList} key={index}></News>
-                        ))}
-                    </div>
-                </section>
-            </div>
-        </div>
-
-
-
-    </main>
-)
-}
\ No newline at end of file
-- 
cgit v1.2.3