shafin808s/examjam-frontend
1
0
Fork 0
generated from muhtadeetaron/nextjs-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: refactor code for type safety

Browse Source
This commit is contained in:
shafin-r
2025-07-27 03:19:25 +06:00
parent 0ea199c0fe
commit 3ef526ec1a
10 changed files with 135 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/(tabs)/leaderboard/page.tsx
View File

@ -4,39 +4,17 @@ import BackgroundWrapper from "@/components/BackgroundWrapper";
import Header from "@/components/Header";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { API_URL, getToken } from "@/lib/auth";
import { BoardData, getLeaderboard, getUserData } from "@/lib/leaderboard";
import { UserData } from "@/types/auth";
import Image from "next/image";
import React, { useEffect, useState } from "react";
const page = () => {
const LeaderboardPage = () => {
const [boardError, setBoardError] = useState<string | null>(null);
const [boardData, setBoardData] = useState([]);
const [userData, setUserData] = useState(null);
const [boardData, setBoardData] = useState<BoardData[]>([]);
const [userData, setUserData] = useState<UserData>();
const [loading, setLoading] = useState(true);
async function fetchBoardData() {
try {
const boardResponse = await fetch(`${API_URL}/leaderboard`, {
method: "GET",
});
if (!boardResponse.ok) {
throw new Error("Failed to fetch leaderboard data");
}
const fetchedBoardData = await boardResponse.json();
if (Array.isArray(fetchedBoardData) && fetchedBoardData.length > 0) {
setBoardData(fetchedBoardData);
} else {
setBoardError("No leaderboard data available.");
setBoardData([]);
}
} catch (error) {
console.error(error);
setBoardError("Something went wrong. Please try again.");
setBoardData([]);
}
}
useEffect(() => {
async function fetchUser() {
try {
@ -55,7 +33,31 @@ const page = () => {
setUserData(fetchedUserData);
} catch (error) {
console.error(error);
setUserData(null);
setUserData(undefined);
}
}
async function fetchBoardData() {
try {
const boardResponse = await fetch(`${API_URL}/leaderboard`, {
method: "GET",
});
if (!boardResponse.ok) {
throw new Error("Failed to fetch leaderboard data");
}
const fetchedBoardData = await boardResponse.json();
if (Array.isArray(fetchedBoardData) && fetchedBoardData.length > 0) {
setBoardData(fetchedBoardData);
} else {
setBoardError("No leaderboard data available.");
setBoardData([]);
}
} catch (error) {
console.error(error);
setBoardError("Something went wrong. Please try again.");
setBoardData([]);
}
}
@ -63,7 +65,7 @@ const page = () => {
fetchBoardData();
}, []);
const getTopThree = (boardData) => {
const getTopThree = (boardData: BoardData[]) => {
if (!boardData || !Array.isArray(boardData)) return [];
const sortedData = boardData
.filter((player) => player?.points !== undefined) // Ensure `points` exists
@ -78,24 +80,10 @@ const page = () => {
return [topThree[1], topThree[0], topThree[2]].filter(Boolean); // Handle missing players
};
const getLeaderboard = (boardData) => {
return boardData.slice().sort((a, b) => b.points - a.points);
};
const getUserData = (boardData, name) => {
if (!boardData || !Array.isArray(boardData)) return [];
const sortedData = boardData
.filter((player) => player?.name && player?.points !== undefined)
.sort((a, b) => b.points - a.points);
const result = sortedData.find((player) => player.name === name);
return result ? [{ ...result, rank: sortedData.indexOf(result) + 1 }] : [];
};
return (
<BackgroundWrapper>
<section>
<Header displaySubject={"Leaderboard"} displayTabTitle={null} />
<Header displayTabTitle={"Leaderboard"} />
<section className="flex flex-col mx-10 pt-10 space-y-4">
<section className="flex justify-evenly items-end">
{getTopThree(boardData).map((student, idx) =>
@ -124,7 +112,7 @@ const page = () => {
<div className="w-full border-[0.5px] border-[#c5dbf8] bg-[#c5dbf8]"></div>
<section className="border-[1px] border-[#c0dafc] w-full rounded-3xl p-6 space-y-4 mb-20">
<section>
{getUserData(boardData, userData?.name).map((user, idx) => (
{getUserData(boardData, userData!.name).map((user, idx) => (
<div
key={idx}
className="flex bg-[#113768] rounded-[8] py-2 px-4 justify-between items-center"
@ -179,4 +167,4 @@ const page = () => {
);
};
export default page;
export default LeaderboardPage;