Enhance leaderboard functionality to support visible entries in contest scores and popular votes, update API endpoints, and refactor export button logic.

tohyzhong · tohyzhong · commit 2ea8cf0d9214 · 2025-04-30T17:30:51.000+08:00
diff --git a/src/commons/sagas/LeaderboardSaga.ts b/src/commons/sagas/LeaderboardSaga.ts
@@ -37,9 +37,9 @@ const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
 
   getAllContestScores: function* (action) {
     const tokens: Tokens = yield selectTokens();
-    const assessmentId = action.payload;
+    const { assessmentId, visibleEntries } = action.payload;
 
-    const contestScores = yield call(getContestScoreLeaderboard, assessmentId, tokens);
+    const contestScores = yield call(getContestScoreLeaderboard, assessmentId, visibleEntries, tokens);
 
     if (contestScores) {
       yield put(actions.saveAllContestScores(contestScores));
@@ -48,9 +48,9 @@ const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
 
   getAllContestPopularVotes: function* (action) {
     const tokens: Tokens = yield selectTokens();
-    const assessmentId = action.payload;
+    const { assessmentId, visibleEntries } = action.payload;
 
-    const contestPopularVotes = yield call(getContestPopularVoteLeaderboard, assessmentId, tokens);
+    const contestPopularVotes = yield call(getContestPopularVoteLeaderboard, assessmentId, visibleEntries, tokens);
     if (contestPopularVotes) {
       yield put(actions.saveAllContestPopularVotes(contestPopularVotes));
     }
diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
@@ -521,14 +521,15 @@ export const getPaginatedTotalXp = async (
 };
 
 /**
- * GET /courses/{courseId}/leaderboard/contests/{assessment_id}/get_score_leaderboard
+ * GET /courses/{courseId}/assessments/{assessmentid}/{visibleentries}/scoreLeaderboard
  */
 export const getContestScoreLeaderboard = async (
   assessmentId: number,
+  visibleEntries: number,
   tokens: Tokens
 ): Promise<ContestLeaderboardRow[] | null> => {
   const resp = await request(
-    `${courseId()}/leaderboard/contests/${assessmentId}/get_score_leaderboard`,
+    `${courseId()}/assessments/${assessmentId}/${visibleEntries}/scoreLeaderboard`,
     'GET',
     {
       ...tokens
@@ -541,29 +542,30 @@ export const getContestScoreLeaderboard = async (
 
   const rows = await resp.json();
 
-  return rows.contest_score.map(
+  return rows.leaderboard.map(
     (row: any): ContestLeaderboardRow => ({
       rank: row.rank,
-      name: row.name,
-      username: row.username,
-      score: row.score,
+      name: row.student_name,
+      username: row.student_username,
+      score: row.final_score,
       avatar: '',
-      code: row.code,
+      code: row.answer,
       submissionId: row.submission_id,
       votingId: rows.voting_id
     })
   );
 };
 
 /**
- * GET /courses/{courseId}/leaderboard/contests/{assessment_id}/get_popular_vote_leaderboard
+ * GET /courses/{courseId}/assessments/{assessmentid}/{visibleentries}/popularVoteLeaderboard
  */
 export const getContestPopularVoteLeaderboard = async (
   assessmentId: number,
+  visibleEntries: number,
   tokens: Tokens
 ): Promise<ContestLeaderboardRow[] | null> => {
   const resp = await request(
-    `${courseId()}/leaderboard/contests/${assessmentId}/get_popular_vote_leaderboard`,
+    `${courseId()}/assessments/${assessmentId}/${visibleEntries}/popularVoteLeaderboard`,
     'GET',
     {
       ...tokens
@@ -576,14 +578,14 @@ export const getContestPopularVoteLeaderboard = async (
 
   const rows = await resp.json();
 
-  return rows.contest_popular.map(
+  return rows.leaderboard.map(
     (row: any): ContestLeaderboardRow => ({
       rank: row.rank,
-      name: row.name,
-      username: row.username,
-      score: row.score,
+      name: row.student_name,
+      username: row.student_username,
+      score: row.final_score,
       avatar: '',
-      code: row.code,
+      code: row.answer,
       submissionId: row.submission_id,
       votingId: rows.voting_id
     })
@@ -1348,7 +1350,16 @@ export const getScoreLeaderboard = async (
     return null; // invalid accessToken _and_ refreshToken
   }
   const scoreLeaderboard = await resp.json();
-  return scoreLeaderboard as ContestEntry[];
+
+  return scoreLeaderboard.leaderboard.map(
+    (row: any): ContestEntry => ({
+      rank: row.rank,
+      student_name: row.student_name,
+      final_score: row.final_score,
+      answer: row.answer,
+      submission_id: row.submission_id
+    })
+  );
 };
 
 /**
@@ -1370,7 +1381,15 @@ export const getPopularVoteLeaderboard = async (
     return null; // invalid accessToken _and_ refreshToken
   }
   const popularVoteLeaderboard = await resp.json();
-  return popularVoteLeaderboard as ContestEntry[];
+  return popularVoteLeaderboard.leaderboard.map(
+    (row: any): ContestEntry => ({
+      rank: row.rank,
+      student_name: row.student_name,
+      final_score: row.final_score,
+      answer: row.answer,
+      submission_id: row.submission_id
+    })
+  );
 };
 
 /**
diff --git a/src/features/leaderboard/LeaderboardActions.ts b/src/features/leaderboard/LeaderboardActions.ts
@@ -11,9 +11,9 @@ const LeaderboardActions = createActions('leaderboard', {
   saveAllUsersXp: (userXp: LeaderboardRow[]) => userXp,
   getPaginatedLeaderboardXp: (page: number, pageSize: number) => ({ page, pageSize }),
   savePaginatedLeaderboardXp: (payload: { rows: LeaderboardRow[]; userCount: number }) => payload,
-  getAllContestScores: (assessmentId: number) => assessmentId,
+  getAllContestScores: (assessmentId: number, visibleEntries: number) => ({ assessmentId, visibleEntries }),
   saveAllContestScores: (contestScore: ContestLeaderboardRow[]) => contestScore,
-  getAllContestPopularVotes: (assessmentId: number) => assessmentId,
+  getAllContestPopularVotes: (assessmentId: number, visibleEntries: number) => ({ assessmentId, visibleEntries }),
   saveAllContestPopularVotes: (contestPopularVote: ContestLeaderboardRow[]) => contestPopularVote,
   getCode: 0,
   saveCode: (code: string) => code,
diff --git a/src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx b/src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx
@@ -27,20 +27,19 @@ type Props = {
 
 const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
   const courseID = useTypedSelector(store => store.session.courseId);
+  const visibleEntries = useTypedSelector(store => store.session?.topContestLeaderboardDisplay ?? 10);
   const dispatch = useDispatch();
 
-  // TODO: Only display rows when contest voting counterpart has voting published
-
   // Retrieve Contest Score Data from store
   const rankedLeaderboard: ContestLeaderboardRow[] = useTypedSelector(store =>
     type === 'score' ? store.leaderboard.contestScore : store.leaderboard.contestPopularVote
   );
 
   useEffect(() => {
     if (type === 'score') {
-      dispatch(LeaderboardActions.getAllContestScores(contestID));
+      dispatch(LeaderboardActions.getAllContestScores(contestID, visibleEntries));
     } else {
-      dispatch(LeaderboardActions.getAllContestPopularVotes(contestID));
+      dispatch(LeaderboardActions.getAllContestPopularVotes(contestID, visibleEntries));
     }
   }, [dispatch, contestID, type]);
 
@@ -65,9 +64,6 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
   }, []);
 
   // Display constants
-  const visibleEntries = useTypedSelector(store => store.session.topContestLeaderboardDisplay);
-  // const top3 = rankedLeaderboard.slice(0, 3);
-  // const rest = rankedLeaderboard.slice(3, Number(visibleEntries));
   const top3 = rankedLeaderboard.filter(row => row.rank <= 3);
   const rest = rankedLeaderboard
     .filter(row => row.rank <= Number(visibleEntries))
@@ -168,7 +164,7 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
         <LeaderboardDropdown contests={contestDetails} />
 
         {/* Export Button */}
-        <LeaderboardExportButton type={type} contest={contestName} data={rankedLeaderboard} />
+        <LeaderboardExportButton type={type} contest={contestName} contestID={contestID}/>
       </div>
 
       {/* Leaderboard Table (Top 3) */}
diff --git a/src/pages/leaderboard/subcomponents/LeaderboardExportButton.tsx b/src/pages/leaderboard/subcomponents/LeaderboardExportButton.tsx
@@ -1,18 +1,48 @@
 import 'src/styles/Leaderboard.scss';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import { ContestLeaderboardRow, LeaderboardRow } from 'src/features/leaderboard/LeaderboardTypes';
 
 import { Role } from '../../../commons/application/ApplicationTypes';
+import { useDispatch } from 'react-redux';
+import LeaderboardActions from 'src/features/leaderboard/LeaderboardActions';
 
-type Props =
-  | { type: string; contest: string | undefined; data: ContestLeaderboardRow[] | undefined }
-  | { type: string; contest: string | undefined; data: LeaderboardRow[] };
+type Props = {
+  type: string
+  contest?: string
+  contestID?: number
+}
+
+const LeaderboardExportButton: React.FC<Props> = ({ type, contest, contestID }) => {
+  
+  // Retrieve relevant leaderboard data
+  const [ exportRequested, setExportRequest ] = useState(false);
+  const dispatch = useDispatch();
+  const data = (type == "overall")
+               ? useTypedSelector(store => store.leaderboard.userXp)
+               : (type == "score")
+               ? useTypedSelector(store => store.leaderboard.contestScore)
+               : useTypedSelector(store => store.leaderboard.contestPopularVote);
+
+  const visibleEntries = useTypedSelector(store => store.session?.topContestLeaderboardDisplay ?? 10);
+
+  const onExportClick = () => {
+    // Dispatch relevant request
+    if (type == "overall") dispatch(LeaderboardActions.getAllUsersXp());
+    else if (type == "score") dispatch(LeaderboardActions.getAllContestScores(contestID as number, visibleEntries));
+    else dispatch(LeaderboardActions.getAllContestPopularVotes(contestID as number, visibleEntries));
+    setExportRequest(true)
+  }
+
+  // Return the CSV when requested and data is loaded
+  useEffect(() => {
+    if (exportRequested) {
+      exportCSV();
+      setExportRequest(false); // Clear request
+    }
+  }, [data])
 
-const LeaderboardExportButton: React.FC<Props> = ({ type, contest, data }) => {
-  // pls remove this
-  if (!data) return;
   const role = useTypedSelector(store => store.session.role);
   const exportCSV = () => {
     const headers = [
@@ -48,7 +78,7 @@ const LeaderboardExportButton: React.FC<Props> = ({ type, contest, data }) => {
   };
 
   return role === Role.Admin || role === Role.Staff ? (
-    <button onClick={exportCSV} className="export-button">
+    <button onClick={onExportClick} className="export-button">
       Export as .csv
     </button>
   ) : (
diff --git a/src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx b/src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx
@@ -94,7 +94,7 @@ const OverallLeaderboard: React.FC = () => {
 
   const paginatedLeaderboard: { rows: LeaderboardRow[]; userCount: number } = useTypedSelector(store => store.leaderboard.paginatedUserXp);
   const pageSize = 25;
-  const visibleEntries = useTypedSelector(store => store.session.topLeaderboardDisplay) ?? Number.MAX_SAFE_INTEGER;
+  const visibleEntries = useTypedSelector(store => store.session?.topLeaderboardDisplay ?? Number.MAX_SAFE_INTEGER);
   const [top3Leaderboard, setTop3Leaderboard] = useState<LeaderboardRow[]>([]);
 
   useEffect(() => {
@@ -158,7 +158,7 @@ const OverallLeaderboard: React.FC = () => {
         <LeaderboardDropdown contests={contestDetails} />
 
         {/* Export Button */}
-        <LeaderboardExportButton type="overall" contest={undefined} data={undefined} />
+        <LeaderboardExportButton type="overall" />
       </div>
 
       {/* Leaderboard Table (Replaced with ag-Grid) */}
