added pagination and responsivness

jordus100 · May 30, 2024 · 535aab2 · 535aab2
1 parent 5dd6c2b
commit 535aab2
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 35 deletions.
diff --git a/src/Tournaments/leaderboard.js b/src/Tournaments/leaderboard.js
@@ -1,38 +1,63 @@
 import React, { useState, useEffect } from "react";
+import {useNavigate } from 'react-router-dom';
 import {PointsService} from "../services/PointsService";
+import Paginator from '../elements/Paginator/Paginator';
 import './leaderboard.scss'
 function Leaderboard({isAuthenticated, user, login, logout }) {
-
+    const navigate = useNavigate();
     const [leaderboardsList, setLeaderboardsList] = useState([]);
     const [message, setMessage] = useState('');
+    const [page, setPage] = useState({selected: 0});
+    const [pageCount, setPageCount] = useState(1);
+    const pageSize = 10;
 
     useEffect(() => {
         const fetchLeaderboardsData = async () => {
             try {
-                const gl = await PointsService.getLeaderboards(1, 10);
-                setLeaderboardsList(gl.data.data);
+                const gl = await PointsService.getLeaderboards(page.selected, pageSize);
+                console.log(gl.data.data.page);
+                setLeaderboardsList(gl.data.data.page);
+                setPageCount(gl.data.data.amountOfPages);
             } catch (e) {
                 setMessage('There was a problem with fetching leaderboards data.');
             }
         };
 
         fetchLeaderboardsData();
-    }, []); 
+    }, [page]); 
+
+    const handlePlayerClick = (player) => {
+        return () => {navigate(`/player/${player}`)};   
+    }
 
     return (
         <>
             <div className="list">
                 <h1 className="heading">Leaderboard</h1>
-                <div className="standings">
-                <div className="leaderboard-item">
-                                <div className="color-primary-3">Rank</div><div className="color-primary-3">Player </div><div className="color-primary-3">Elo</div><div className="color-primary-3">Bots created</div>
-                            </div>
-                {leaderboardsList.map((player, index) => (
-                            <div key={index} className="leaderboard-item">
-                                <div className="color-primary-3">{index+1} </div><div className="color-primary-3">{player.login} </div><div className="color-primary-3">{player.points}</div><div className="color-primary-3">{index+1}</div>
-                            </div>
-                        ))}
-            </div></div>
+                <div className="leaderboard-container">
+                    <table className="standings">
+                        <thead>
+                            <tr className="leaderboard-item">
+                                <th className="rankcol header column">Rank</th>
+                                <th className="playercol header column">Player</th>
+                                <th className="elocol header column">Elo</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {leaderboardsList.map((player, index) => (
+                                <tr key={index} 
+                                    className="leaderboard-item"
+                                    onClick={handlePlayerClick(player.login)}>
+                                    <td className="rankcol element column">{page.selected*pageSize + index+1}</td>
+                                    <td className="playercol element column">{player.login}</td>
+                                    <td className="elocol element column">{player.points}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+                <Paginator pageCount={pageCount} handlePageClick={setPage}/>
+            </div>
             <p>{message}</p>
         </>
     );

diff --git a/src/Tournaments/leaderboard.scss b/src/Tournaments/leaderboard.scss
@@ -1,25 +1,58 @@
 .list {
   border: #0be400;
   border-style: solid;
-  margin-top: 80px;
-}
-.leaderboard-item{
-  border-bottom: 3px solid #0be400;
-  padding: 5px;
-  display: grid;
-  align-items: center;
-  align-content: center;
-  grid-template-columns: 100px 3fr 1fr 1fr;
-  justify-items: center;
-}
-.leaderboard-item:nth-last-of-type(1){
-  border-bottom: none;
-}
-.leaderboard-item:first-of-type{
-  border-top: none;
-  div{
-    text-align: center;
-    font-size: 22px;
+  background-color: #181818;
+  height: 90%;
+  min-width: 400px;
+  .heading {
+    margin: 10px auto;  
+  }
+
+  .leaderboard-container{
+    overflow-y: scroll;
+
+    height: 300px;
+    .standings {
+      width: 100%;
+
+      .leaderboard-item{
+        border-bottom: 3px solid #0be400;
+        transition: all 0.3s;
+
+        &:hover {
+          background-color: #0be400;
+          color: #181818;
+          cursor: pointer;
+        }
+
+        .rankcol {
+          text-align: center;
+        }
+
+        .column {
+          border: 2px solid #0be400;
+          margin: 2px;
+          transition: all 0.5s;
+          font-size: 20px;
+          padding: 3px;
+          &:hover {
+            background-color: #0e4c0a;
+            color: #0be400;
+            cursor: pointer;
+          }
+        }
+      }
+      .leaderboard-item:nth-last-of-type(1){
+        border-bottom: none;
+      }
+      .leaderboard-item:first-of-type{
+        border-top: none;
+        div{
+          text-align: center;
+          font-size: 22px;
+        }
+      }
+    }
   }
 }
 @media (max-width: 768px) {

diff --git a/src/elements/Paginator/Paginator.js b/src/elements/Paginator/Paginator.js
@@ -10,7 +10,7 @@ export default function Paginator({ pageCount, handlePageClick }) {
             breakLabel={'...'}
             pageCount={pageCount}
             marginPagesDisplayed={2}
-            pageRangeDisplayed={2   }
+            pageRangeDisplayed={2}
             onPageChange={handlePageClick}
             containerClassName={'pagination'}
             subContainerClassName={'pages pagination'}

diff --git a/src/services/PointsService.js b/src/services/PointsService.js
@@ -3,7 +3,7 @@ import {Api} from './Api'
 export const PointsService = {
 
   getLeaderboards: async function (page, pageSize) {
-    return await Api.req(() => {return Api.get(`Points/getLeaderboards?page=${page}&pageSize=${pageSize}`)})
+    return await Api.req(() => {return Api.get(`Points/getLeaderboards?PageNumber=${page}&PageSize=${pageSize}`)})
   },
   getPointsForPlayer: async function (id) {
     return await Api.req(() => {return Api.get(`Points/getPointsForPlayer?id=${id}`)})