new leaderboard for trivial game

webapp/src/components/leaderboard/LeaderBoard.tsx

@@ -1,17 +1,64 @@
-import React from "react"
+import React, { useState } from "react"
 import RankingTable from "./RankingTable"
-
-
+import TrivialRankingTable from "./TrivialRankingTable"
+import { TabList, Tab, TabPanels, TabPanel, Tabs } from "@chakra-ui/react"
+
 
 export default function LeaderBoard() {
 
+    const [tabs, setTabs] = useState<string[]>(["NORMAL", "TRIVIAL"]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
 
 
     return (
         <>
             <h1 className="h1-leaderboard"> LEADERBOARD </h1>
 
-            <RankingTable />
+            <Tabs isFitted className="chakra-tabs-container">
+                <TabList className="chakra-tabs" mb='1em'>
+                    {
+                        tabs.map((tab, index) => {
+                            return(
+                                <Tab 
+                                    onClick={() => setSelectedIndex(index)}
+                                    key={index} 
+                                    className={index === selectedIndex ? "chakra-tabs-tab-selected" : "chakra-tabs-tab"}>
+                                        {tab}
+                                </Tab>
+                            )
+                        })
+                    }
+                </TabList>
+                <TabPanels>
+                    <TabPanel>
+                        <RankingTable />
+                    </TabPanel>
+                    <TabPanel>
+                        <TrivialRankingTable />
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+
+
+
+
         </>
+        //<RankingTable />
+
+        /*
+        <Tabs isFitted variant='enclosed'>
+                <TabList mb='1em'>
+                    <Tab>One</Tab>
+                    <Tab>Two</Tab>
+                </TabList>
+                <TabPanels>
+                    <TabPanel>
+                    <p>one!</p>
+                    </TabPanel>
+                    <TabPanel>
+                    <p>two!</p>
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>*/
     )
 }

webapp/src/components/leaderboard/RankingTable.tsx

@@ -33,13 +33,18 @@ export default function RankingTable() {
                 correctAnswers: user.correctly_answered_questions,
                 totalAnswers: user.questions_answered
             }));
-            setUsers(usersArray.sort((a, b) => b.correctAnswers - a.correctAnswers));
+
+            const filteredUsers = filterUsers(usersArray)
+
+            setUsers(filteredUsers.sort((a, b) => b.correctAnswers - a.correctAnswers));
         }).catch((error) => {
             console.error('Error during retrieving all the users', error);
         });
     }, [])
 
-
+    const filterUsers = (usersArray: User[]) => {
+        return usersArray.filter(user => user.totalAnswers > 0);
+    }
 
 
     return (

webapp/src/components/leaderboard/TrivialRankingTable.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import { GiPodiumSecond, GiPodiumThird, GiPodiumWinner } from "react-icons/gi";
+import * as Avatar from '@radix-ui/react-avatar';
+import { CircularProgress, CircularProgressLabel } from "@chakra-ui/react";
+import { getAllUsers } from "../../services/auth-service";
+
+export interface User {
+    username: string,
+    correctAnswers: number,
+    totalAnswers: number,
+    cheeseCount: number
+}
+
+
+export default function TrivialRankingTable() {
+
+
+    const [users, setUsers] = useState<User[]>([])
+    const [podium, setPodium] = useState<ReactNode[]>
+        ([<GiPodiumWinner size={"2.5rem"}/>,<GiPodiumSecond size={"2.5rem"} /> , <GiPodiumThird size={"2.5rem"} />])
+
+
+
+    const getAllUsers2 = async () => {
+        const response = await getAllUsers();
+        return response;
+    }
+
+
+    useEffect(() => {
+        getAllUsers2().then((users) => {
+            const usersArray: User[] = Object.values(users).map((user: any) => ({
+                username: user.username,
+                correctAnswers: user.correctly_answered_questions,
+                totalAnswers: user.questions_answered,
+                cheeseCount: user.cheeseCount
+            }));
+
+            const filteredUsers = filterUsers(usersArray)
+
+            setUsers(filteredUsers.sort((a, b) => b.cheeseCount - a.cheeseCount));
+
+        }).catch((error) => {
+            console.error('Error during retrieving all the users', error);
+        });
+    }, [])
+
+    const filterUsers = (usersArray: User[]) => {
+        return usersArray.filter(user => user.cheeseCount > 0);
+    }
+
+
+    return (
+        <table className="ranking-table-trivial">
+            <thead >
+                <tr className="header">
+                    <th className="avatar"></th>
+                    <th className="ranking">RANKING</th>
+                    <th className="cheeseCount">CHEESES</th>
+                </tr>
+            </thead>
+            <tbody>
+                {
+                    users.map((user, index) => {
+                        return (
+                            <tr className="body-row">
+                                <td className="avatar">
+                                <Avatar.Root className="AvatarRoot">
+                                <Avatar.Fallback className="AvatarFallback">{user.username.toUpperCase().charAt(0)}{user.username.toUpperCase().charAt(1)}</Avatar.Fallback>
+                                </Avatar.Root>
+                                {user.username.toLowerCase()}
+                                </td>
+                                <td className="ranking">
+                                    {index === 0 || index === 1 || index === 2 ? podium[index] : index + 1}
+                                </td>
+                                <td className="cheeseCount">{user.cheeseCount}</td>
+
+                            </tr>
+                        )
+                    })
+                }
+            </tbody>
+        </table>
+    )
+}

webapp/src/index.css

@@ -107,6 +107,7 @@
 }
 
 .ranking-table {
+  margin-top: 3rem;
   font-size: 1rem;
   color: white;
   display: flex;
@@ -173,6 +174,73 @@
   }
 }
 
+.ranking-table-trivial {
+  margin-top: 3rem;
+  font-size: 1rem;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .header {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
+    padding-bottom: 1rem;
+
+    th {
+      padding-inline: 1rem;
+    }
+
+    .avatar {
+      grid-column: 1/1;    
+    }
+
+    .ranking{
+      grid-column: 2/2;
+    }
+
+    .quesitos{
+      grid-column: 3/3;
+    }
+
+
+
+  }
+
+  .body-row {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
+    border-top: .1rem solid white;
+    padding: .8rem 0rem .8rem 0rem;
+
+    .avatar {
+      grid-column: 1/1;    
+      display: flex;
+      align-items: center;
+      gap: .8rem;
+      justify-self: flex-start;
+      padding-left: 2.5rem;
+    }
+
+    .ranking{
+      grid-column: 2/2;
+    }
+
+    .cheeseCount{
+      grid-column: 3/3;
+    }
+
+  }
+}
+
+
+
+
+
 
 .stats-table {
   font-size: 1rem;
@@ -263,3 +331,35 @@ html {
 }
 
 
+.chakra-tabs-container {
+  width: 100%;
+  color: white;
+  display: flex;
+  flex-direction: column;
+
+  .chakra-tabs {
+    width: 100%;
+    justify-content: space-around;
+    display: flex;
+
+
+    .chakra-tabs-tab, .chakra-tabs-tab-selected {
+      display: flex;
+      padding: 1rem;
+      width: 100%;
+      font-weight: bolder;
+    }
+
+    .chakra-tabs-tab {
+      border-bottom: .1rem solid white;
+    }
+
+    .chakra-tabs-tab-selected {
+      border-top: .1rem solid white;
+      border-left: .1rem solid white;
+      border-right: .1rem solid white;
+      border-top-left-radius: .4rem;
+      border-top-right-radius: .4rem;
+    }
+  }
+}