Skip to content

Feat/fetch students podium #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Achalogy merged 5 commits into from
Aug 8, 2025
Merged

Feat/fetch students podium #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
01b8b6d
add students controller
Achalogy Aug 6, 2025
f9ab577
load and fetch podium studetns
Achalogy Aug 8, 2025
a91c0f4
remove hard-coded students
Achalogy Aug 8, 2025
8eed0ec
Merge branch 'develop' into feat/fetch-students-podium
Achalogy Aug 8, 2025
f230285
add supabase_user_id
Achalogy Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 1 addition & 48 deletions src/app/league/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import { Rules } from "@/components/league/sections/rules";
import { UpcomingEvents } from "@/components/league/sections/upcoming-events";
import { Podium } from "@/components/league/sections/podium";
import { Contest } from "@/models/contest.model";
import { LevelEnum } from "@/models/level.enum";
import { Student } from "@/models/student.model";
import Footer from "@/components/shared/footer";
import { getContestsWithPictures } from "@/controllers/contest.controller";
import { useEffect, useState } from "react";
Expand All @@ -24,51 +22,6 @@ const navLinks = [
{ key: "podium", label: "Podium", href: "#podium" },
];

const hard_coded_league_podium: { student: Student; order: number }[] = [
{
student: {
_id: "1",
avatar:
"https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",
level: LevelEnum.Advanced,
matches_count: 100,
name: "Acha1",
surname: "Dev",
victory_count: 90,
supabase_user_id: "1",
},
order: 0,
},
{
student: {
_id: "1",
avatar:
"https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",
level: LevelEnum.Advanced,
matches_count: 100,
name: "Acha2",
surname: "Dev",
victory_count: 90,
supabase_user_id: "1",
},
order: 1,
},
{
student: {
_id: "1",
avatar:
"https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",
level: LevelEnum.Advanced,
matches_count: 100,
name: "Acha3",
surname: "Dev",
victory_count: 90,
supabase_user_id: "1",
},
order: 2,
},
];

export default function LeagueHomePage() {

const [contests, setContests] = useState<(Contest & {
Expand All @@ -90,7 +43,7 @@ export default function LeagueHomePage() {
<Hero />
<Rules />
<UpcomingEvents events={contests} loadingInitialState />
<Podium students={hard_coded_league_podium} />
<Podium />
<Footer />
</HeroUIProvider>
);
Expand Down
107 changes: 82 additions & 25 deletions src/components/league/sections/podium.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,96 @@
import PodiumContainer from "@/components/league/ui/podium/podium-component"
import { getPodiumStudents } from "@/controllers/student.controller"
import { LevelEnum } from "@/models/level.enum";
import { Student } from "@/models/student.model"
import { useEffect, useState } from "react"

export function Podium(props: {
students: ({
export function Podium() {

const [loading, setloading] = useState<boolean>(true);

const [students, setStudents] = useState<({
student: Student,
order: number
})[]
}) {
const { students = [] } = props
const sortedStudents = (() => {
let ss = []
let d = false;

students.toSorted((a, b) => a.order - b.order).forEach(x => {
if (d) ss = [x, ...ss]
else ss = [...ss, x]

d = !d;
})
})[]>([]);
const [sortedStudents, setSortedStudents] = useState<({
student: Student,
order: number
})[]>([])

const handlerGetPodiumStudents = async () => {
try {
const response = await getPodiumStudents();

setStudents(response.map((s, i) => ({
student: s,
order: i
})));

} catch {
return;
}
}

useEffect(() => {
handlerGetPodiumStudents();
setloading(false)
}, [])

return ss
})();
useEffect(() => {
setSortedStudents(() => {
let ss = []
let d = false;

students.toSorted((a, b) => a.order - b.order).forEach(x => {
if (d) ss = [x, ...ss]
else ss = [...ss, x]

d = !d;
})

return ss
})
}, [students])

return <div id="podium" className="flex flex-col gap-2 py-8 w-[90%] max-w-[100rem] mx-auto">
<div className="flex flex-col gap-2 lg:w-[80%] mx-auto">
<h2 className="dark:text-white">Mejores 3 de la liga</h2>
<div className="w-full h-[20rem] lg:h-[30rem] max-w-full lg:max-w-[45rem] mx-auto mt-[4rem]">
<PodiumContainer.Container steps={
sortedStudents.map(s => ({
order: s.order,
children: <PodiumContainer.Step showUserInfo showCrown showAvatar showNumber bg_color="bg-[rgb(var(--azul-electrico-rgb)_/_0.2)] dark:bg-[rgb(var(--azul-electrico-rgb)_/_0.5)]" className="border-[rgb(var(--azul-electrico-rgb)_/_0.2)] border-1" student={s} >

</PodiumContainer.Step>
}))
} steps_count={students.length} />
{loading ?

<PodiumContainer.Container steps={
[{ order: 1 }, { order: 0 }, { order: 2 }].map(s => ({
order: s.order,
children: <PodiumContainer.Step showUserInfo showNumber bg_color="bg-[rgb(var(--azul-electrico-rgb)_/_0.2)] dark:bg-[rgb(var(--azul-electrico-rgb)_/_0.5)]" className="border-[rgb(var(--azul-electrico-rgb)_/_0.2)] border-1" student={{
order: s.order,
student: {
_id: "",
avatar: "",
level: LevelEnum.Advanced,
matches_count: 0,
name: "",
surname: "",
// ignorar
victory_count: 0,
supabase_user_id: ""
}
}} >

</PodiumContainer.Step>
}))
} steps_count={3} />

:

<PodiumContainer.Container steps={
sortedStudents.map(s => ({
order: s.order,
children: <PodiumContainer.Step showUserInfo showCrown showAvatar showNumber bg_color="bg-[rgb(var(--azul-electrico-rgb)_/_0.2)] dark:bg-[rgb(var(--azul-electrico-rgb)_/_0.5)]" className="border-[rgb(var(--azul-electrico-rgb)_/_0.2)] border-1" student={s} >

</PodiumContainer.Step>
}))
} steps_count={students.length} />
}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/league/ui/podium/podium-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const Step = (props: {
showAvatar &&
<div className="absolute -top-[2rem] lg:-top-[3.5rem] left-1/2 transform -translate-x-1/2 mx-auto rounded-full border-2 border-[--azul-niebla] bg-[--azul-niebla] h-[4rem] lg:h-[7rem] aspect-square overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={student.student.avatar} alt={`Avatar de ${student.student.name}`} className="w-full h-full object-cover" />
<img src={student.student.avatar.length == 0 ? null : student.student.avatar} alt={`Avatar de ${student.student.name}`} className="w-full h-full object-cover" />
</div>
}

Expand Down
21 changes: 21 additions & 0 deletions src/controllers/student.controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
export async function getStudents() {
const res = await fetch(new URL(`/students`, process.env.NEXT_PUBLIC_BACKEND_URL));

if (!res.ok) {
throw new Error("Error al obtener estudiantes");
}

const json = await res.json();
return json.data;
}

export async function getPodiumStudents() {
const res = await fetch(new URL(`/students?limit=3&ordercol=victory_count&subordercol=matches_count&subasc=1`, process.env.NEXT_PUBLIC_BACKEND_URL));

if (!res.ok) {
throw new Error("Error al obtener los estudiantes del podio");
}

const json = await res.json();
return json.data;
}