Shooty-Arena/web/pages/leaderboards/[page].js

// Strict Mode
"use strict";

// Imports
import authentication from "../../authentication/authentication.js";
import database from "../../database/database.js";
import styles from "../../styles/leaderboards.module.css";
import Header from "../../components/header/header.jsx";
import Title from "../../components/title/title.jsx";
import Footer from "../../components/footer/footer.jsx";

// Get Server Side Props
export async function getServerSideProps ( ctx ) {
    try {
        await authentication.getUser(ctx.req, ctx.res);
        const stats = await database.getAllStats();
        const pageStats = [];
        let previousPage = false;
        let nextPage = false;
        if (ctx.query.page != 1) {
            previousPage = Number(ctx.query.page) - 1;
        };
        for (let stat = ((ctx.query.page - 1) * 4); stat < stats.length; stat++) {
            if (stat <= ((ctx.query.page - 1) * 4) + 3) {
                pageStats.push(stats[stat]);
            } else {
                nextPage = Number(ctx.query.page) + 1;
            };
        };
        if (pageStats.length == 0) {
            return {
                redirect: {
                    permanent: false,
                    destination: "/leaderboards/1"
                }
            };
        };
        return {
            props: {
                pageStats: JSON.stringify(pageStats),
                previousPage: previousPage,
                nextPage: nextPage
            }
        };
    } catch {
        return {
            redirect: {
                permanent: false,
                destination: "/leaderboards/1"
            }
        };
    }
   
};

// Leaderboard
export default function Leaderboards ( props ) {
    return (
        <div>
            <Header/>
            <Title title = "Leaderboards"/>
            <div className = { styles.leaderboards }>
                <div>
                    <table>
                        <tr>
                            <th>
                                Username
                            </th>
                            <th>
                                Game Rank
                            </th>
                            <th>
                                Elo
                            </th>
                            <th>
                                Kills
                            </th>
                            <th>
                                Deaths
                            </th>
                        </tr>
                        {
                            JSON.parse(props.pageStats).map(stats => {
                                return (
                                    <tr>
                                        <td>
                                            { stats.username }
                                        </td>
                                        <td>
                                            { stats.gameRank }
                                        </td>
                                        <td>
                                            { stats.elo }
                                        </td>
                                        <td>
                                            { stats.kills }
                                        </td>
                                        <td>
                                            { stats.deaths }
                                        </td>
                                    </tr>
                                );
                            })
                        }
                    </table>
                    <table>
                        <tr>
                            <th>
                                Rank
                            </th>
                            <th>
                                Elo
                            </th>
                        </tr>
                        <tr>
                            <td>
                                Shitty Shooty
                            </td>
                            <td>
                                0
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Cutie Shooty
                            </td>
                            <td>
                                1000
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Beauty Shooty
                            </td>
                            <td>
                                2000
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Snooty Shooty
                            </td>
                            <td>
                                3000
                            </td>
                        </tr>
                    </table>
                </div>
                {
                    props.previousPage != false && props.nextPage != false &&
                        <div>
                            <a href = { "/leaderboards/?".replace("?", props.previousPage) }>Previous Page</a>
                            <a href = { "/leaderboards/?".replace("?", props.nextPage) }>Next Page</a>
                        </div>
                }
                {
                    props.previousPage != false && props.nextPage == false &&
                        <div>
                            <a href = { "/leaderboards/?".replace("?", props.previousPage) } style = {{"text-align": "center"}}>Previous Page</a>
                        </div>
                }
                {
                    props.nextPage != false && props.previousPage == false &&
                        <div>
                            <a href = { "/leaderboards/?".replace("?", props.nextPage) } style = {{"text-align": "center"}}>Next Page</a>
                        </div>
                }
            </div>
            <Footer/>
        </div>
    );
};