Feat/update ranking scoreboard #96

src/components/league/sections/podium.tsx

@@ -4,7 +4,15 @@ import { LevelEnum } from "@/models/level.enum";
 import { Student } from "@/models/student.model";
 import { useEffect, useState } from "react";
 
-export function Podium() {
+/**
+ * Muestra a los 3 mejores estudiantes de la liga
+ * @param updateInterval segundos para actualizar la información, 0 para no actualizar la información
+ */
+export function Podium({
+  updateInterval = 0
+}: {
+  updateInterval?: number
+}) {
   const [loading, setloading] = useState<boolean>(true);
 
   const [students, setStudents] = useState<
@@ -38,7 +46,16 @@ export function Podium() {
   useEffect(() => {
     handlerGetPodiumStudents();
     setloading(false);
-  }, []);
+
+    if (updateInterval > 0) {
+      const interval = setInterval(() => {
+        console.log("actualizado")
+        handlerGetPodiumStudents();
+      }, updateInterval * 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [updateInterval]);
 
   useEffect(() => {
     setSortedStudents(() => {

src/components/league/sections/ranking.tsx

@@ -1,12 +1,14 @@
 import RankingComponent from "../ui/ranking-component";
+import { Podium } from "./podium";
 
 export const Ranking = () => {
   return (
     <div>
+      <Podium updateInterval={15} />
       <RankingComponent.RankingContainer>
         <RankingComponent.Padding className="max-w-[65rem] mx-auto">
           <p className="text-lg font-semibold text-center">Ranking</p>
-          <RankingComponent.RankingList student_number={20} />
+          <RankingComponent.RankingList student_number={5} offset={3} updateInterval={15} />
         </RankingComponent.Padding>
       </RankingComponent.RankingContainer>
     </div>

src/components/league/ui/podium/podium-component.tsx

@@ -20,7 +20,7 @@ const Container = (props: {
             style={{
               height: `${((0.8 / steps_count) * (steps_count - step.order) + 0.2) * 100}%`,
             }}
-            className="flex-grow"
+            className="flex-grow flex-1"
             key={step.order}
           >
             {step.children}

src/components/league/ui/ranking-component.tsx

@@ -66,12 +66,23 @@ const StudentComponent = ({
   );
 };
 
+/**
+ * Muestra la información de `student_number` estudiantes
+ * @param className clases normales de html, se puede agregar tailwind sin problema (a pesar que no sirva el autocompletado a veces)
+ * @param student_number cantidad de estudiantes maxima que puede mostrar el ranking
+ * @param offset cantidad de estudiantes a ignorar, se implemento para poner arriba el podio
+ * @param updateInterval segundos para actualizar la información, 0 para no actualizar la información
+ */
 const RankingList = ({
   className = "",
   student_number = 20,
+  offset = 0,
+  updateInterval = 0
 }: {
   className?: string;
   student_number?: number;
+  offset?: number,
+  updateInterval?: number
 }) => {
   const SKELETON_RANKING_USERS_COUNT = 5;
 
@@ -92,7 +103,7 @@ const RankingList = ({
 
   const handlerGetRankingStudents = async () => {
     try {
-      const response = await getRankingStudents({ student_number });
+      const response = await getRankingStudents({ student_number: student_number, offset });
 
       setStudents(response);
     } catch {
@@ -104,21 +115,31 @@ const RankingList = ({
 
   useEffect(() => {
     handlerGetRankingStudents();
-  }, []);
+
+    if (updateInterval > 0) {
+      const interval = setInterval(() => {
+        handlerGetRankingStudents();
+      }, updateInterval * 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [updateInterval]);
 
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       {students.map((s, i) => {
         return (
-          <StudentComponent skeleton={loading} student={s} key={i} pos={i} />
+          <StudentComponent skeleton={loading} student={s} key={i} pos={i + offset} />
         );
       })}
     </div>
   );
 };
 
-export default {
+const exp = {
   RankingContainer,
   Padding,
   RankingList,
 };
+
+export default exp

src/controllers/student.controller.ts

@@ -31,12 +31,14 @@ export async function getPodiumStudents(): Promise<Student[]> {
 
 export async function getRankingStudents({
   student_number,
+  offset = 0,
 }: {
   student_number: number;
+  offset?: number
 }): Promise<Student[]> {
   const res = await fetch(
     new URL(
-      `/students?limit=${student_number}&ordercol=victory_count&subordercol=matches_count&subasc=1`,
+      `/students?limit=${student_number}&ordercol=victory_count&subordercol=matches_count&subasc=1&offset=${offset}`,
       process.env.NEXT_PUBLIC_BACKEND_URL,
     ),
   );