Add updateInterval, set updateInterval to 15segs #96

falta probar

Author: Achalogy

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

@@ -4,11 +4,11 @@ import { Podium } from "./podium";
 export const Ranking = () => {
   return (
     <div>
-      <Podium />
+      <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={5} offset={3} />
+          <RankingComponent.RankingList student_number={5} offset={3} updateInterval={15} />
         </RankingComponent.Padding>
       </RankingComponent.RankingContainer>
     </div>

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

@@ -66,14 +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;
 
@@ -106,7 +115,15 @@ 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}`}>
@@ -119,8 +136,10 @@ const RankingList = ({
   );
 };
 
-export default {
+const exp = {
   RankingContainer,
   Padding,
   RankingList,
 };
+
+export default exp