From 9a87dd9b6c90504d9583a2b2af543fc3e423c56a Mon Sep 17 00:00:00 2001
From: Joey Lim <jyorin0206@gmail.com>
Date: Thu, 11 Jan 2024 00:08:36 +0800
Subject: [PATCH] added pagination, removed Season 2 stuff

---
 .../pages/challenges/leaderboard/index.tsx    | 71 +++++++++++++++----
 1 file changed, 57 insertions(+), 14 deletions(-)

diff --git a/apps/web/pages/challenges/leaderboard/index.tsx b/apps/web/pages/challenges/leaderboard/index.tsx
index f903b478..272180b7 100644
--- a/apps/web/pages/challenges/leaderboard/index.tsx
+++ b/apps/web/pages/challenges/leaderboard/index.tsx
@@ -1,18 +1,17 @@
 import LeaderboardEntry from "@/features/challenges/components/LeaderboardEntry"
-import { Box, Flex, Select, Spacer, Text } from "@chakra-ui/react"
+import { Box, Button, Flex, Select, Spacer, Text } from "@chakra-ui/react"
 import { useState } from "react"
+import { Pagination } from "react-bootstrap"
 
 // placeholder for API Response
 let currentSeasonData: LeaderboardData[] = [
     { uuid: 1000, userId: "alex200", points: 100 },
     { uuid: 1001, userId: "johndoe010", points: 200 },
-    { uuid: 1002, userId: "janedoe345", points: 350 },
-]
-
-const seasonTwoData: LeaderboardData[] = [
-    { uuid: 1000, userId: "harvey562", points: 209 },
-    { uuid: 1001, userId: "pam391", points: 540 },
-    { uuid: 1002, userId: "linus903", points: 250 },
+    { uuid: 1002, userId: "fwqdqw", points: 350 },
+    { uuid: 1003, userId: "cwcqw", points: 350 },
+    { uuid: 1004, userId: "dqwdq", points: 350 },
+    { uuid: 1005, userId: "wqcqw", points: 350 },
+    { uuid: 1006, userId: "cwqc", points: 350 },
 ]
 
 interface LeaderboardData {
@@ -20,23 +19,57 @@ interface LeaderboardData {
     userId: string,
     points: number
 }
-const Leaderboard = () => {
-    const [currentDisplayedData, setCurrentDisplayedData] = useState(currentSeasonData)
 
+function paginateData(data: LeaderboardData[], numItemsPerPage: number) : LeaderboardData[][] {
+    const data2D : LeaderboardData[][] = []
+    for (var i = 0; i < data.length; i += numItemsPerPage) {
+        data2D.push(data.slice(i, i + numItemsPerPage))
+    }
+    return data2D
+}
+
+interface PaginationButtonProps {
+    onClick : () => void
+    variant?: string
+    text: string
+}
+const PaginationButton = ({onClick, variant = 'primary-blue', text} : PaginationButtonProps) => {
+    
+    return <Button onClick={onClick} variant={variant} size={['sm','md']} _hover={{bg: variant}} mx={4}>{text}</Button>
+}
+
+const numOfItemsPerPage = 3
+
+const numOfPages = Math.ceil(currentSeasonData.length / numOfItemsPerPage)
+const paginatedCurrentSeasonData = paginateData(currentSeasonData, numOfItemsPerPage)
+
+const Leaderboard = () => {
+    const [currentPage, setCurrentPage] = useState(0)
+    
+    const [currentDisplayedData, setCurrentDisplayedData] = useState(paginatedCurrentSeasonData[currentPage])
     function handleDataChange(event: React.ChangeEvent<HTMLSelectElement>) {
         // fetch and update leaderboard
+        setCurrentPage(0)
         switch (event.target.value) {
             case 'season-id-1':
-                setCurrentDisplayedData(currentSeasonData)
-                break
-            case 'season-id-2': 
-                setCurrentDisplayedData(seasonTwoData)
+                setCurrentDisplayedData(paginatedCurrentSeasonData[currentPage])
                 break
         }
     
     }
+    
+     function goToPage(index: number) {
+        let toSet = index
+        if (index < 0) toSet = 0
+        else if (index > numOfPages-1) toSet = numOfPages - 1
+        console.log(`toSet: ${toSet}`)
+        setCurrentPage(toSet)
+        setCurrentDisplayedData(paginatedCurrentSeasonData[toSet])
+     }
+
     return (<Flex
         minH="100vh"
+        pt={24}
         flexDirection="column"
         justifyContent="center"
         alignItems="center">
@@ -49,7 +82,17 @@ const Leaderboard = () => {
                 return <LeaderboardEntry key={item.uuid} index={index+1} name={item.userId} points={item.points}/>
             })}
         </Box>
+        <Flex justifyContent='center' w="60vw" align="center" py={8}>
+            <PaginationButton onClick={() =>{goToPage(currentPage - 1)}} text="<"/>
+      
+            {Array.from(Array(numOfPages).keys()).map((index) => <PaginationButton onClick={() => {goToPage(index)}}  variant={currentPage == index ? 'primary-black' : 'primary-blue'} text={(index+1).toString()}/>)}
+            
+            <PaginationButton onClick={() =>{goToPage(currentPage + 1)}} text=">"/>
+            
+        </Flex>
     </Flex>)
 }
 
+
+
 export default Leaderboard
\ No newline at end of file