Refactor leaderboard saga and actions for improved readability and maintainability; update ContestLeaderboard and OverallLeaderboard components for better state management and data retrieval.

Author: tohyzhong

src/commons/sagas/LeaderboardSaga.ts

@@ -8,9 +8,9 @@ import { selectTokens } from './BackendSaga';
 import {
   getAllContests,
   getAllTotalXp,
-  getPaginatedTotalXp,
   getContestPopularVoteLeaderboard,
-  getContestScoreLeaderboard
+  getContestScoreLeaderboard,
+  getPaginatedTotalXp
 } from './RequestsSaga';
 
 const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
@@ -39,7 +39,12 @@ const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
     const tokens: Tokens = yield selectTokens();
     const { assessmentId, visibleEntries } = action.payload;
 
-    const contestScores = yield call(getContestScoreLeaderboard, assessmentId, visibleEntries, tokens);
+    const contestScores = yield call(
+      getContestScoreLeaderboard,
+      assessmentId,
+      visibleEntries,
+      tokens
+    );
 
     if (contestScores) {
       yield put(actions.saveAllContestScores(contestScores));
@@ -50,7 +55,12 @@ const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
     const tokens: Tokens = yield selectTokens();
     const { assessmentId, visibleEntries } = action.payload;
 
-    const contestPopularVotes = yield call(getContestPopularVoteLeaderboard, assessmentId, visibleEntries, tokens);
+    const contestPopularVotes = yield call(
+      getContestPopularVoteLeaderboard,
+      assessmentId,
+      visibleEntries,
+      tokens
+    );
     if (contestPopularVotes) {
       yield put(actions.saveAllContestPopularVotes(contestPopularVotes));
     }

src/features/leaderboard/LeaderboardActions.ts

@@ -11,9 +11,15 @@ 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, visibleEntries: number) => ({ assessmentId, visibleEntries }),
+  getAllContestScores: (assessmentId: number, visibleEntries: number) => ({
+    assessmentId,
+    visibleEntries
+  }),
   saveAllContestScores: (contestScore: ContestLeaderboardRow[]) => contestScore,
-  getAllContestPopularVotes: (assessmentId: number, visibleEntries: number) => ({ assessmentId, visibleEntries }),
+  getAllContestPopularVotes: (assessmentId: number, visibleEntries: number) => ({
+    assessmentId,
+    visibleEntries
+  }),
   saveAllContestPopularVotes: (contestPopularVote: ContestLeaderboardRow[]) => contestPopularVote,
   getCode: 0,
   saveCode: (code: string) => code,

src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx

@@ -27,7 +27,9 @@ 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 visibleEntries = useTypedSelector(
+    store => store.session?.topContestLeaderboardDisplay ?? 10
+  );
   const dispatch = useDispatch();
 
   // Retrieve Contest Score Data from store
@@ -164,7 +166,7 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
         <LeaderboardDropdown contests={contestDetails} />
 
         {/* Export Button */}
-        <LeaderboardExportButton type={type} contest={contestName} contestID={contestID}/>
+        <LeaderboardExportButton type={type} contest={contestName} contestID={contestID} />
       </div>
 
       {/* Leaderboard Table (Top 3) */}

src/pages/leaderboard/subcomponents/LeaderboardExportButton.tsx

@@ -1,47 +1,57 @@
 import 'src/styles/Leaderboard.scss';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
+import LeaderboardActions from 'src/features/leaderboard/LeaderboardActions';
 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
-  contestID?: number
-}
+  type: string;
+  contest?: string;
+  contestID?: number;
+};
 
 const LeaderboardExportButton: React.FC<Props> = ({ type, contest, contestID }) => {
-  
   // Retrieve relevant leaderboard data
-  const [ exportRequested, setExportRequest ] = useState(false);
+  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 selectData = (type: string) => {
+    switch (type) {
+      case 'overall':
+        return (store: { leaderboard: { userXp: any } }) => store.leaderboard.userXp;
+      case 'score':
+        return (store: { leaderboard: { contestScore: any } }) => store.leaderboard.contestScore;
+      default:
+        return (store: { leaderboard: { contestPopularVote: any } }) =>
+          store.leaderboard.contestPopularVote;
+    }
+  };
+
+  const selector = useMemo(() => selectData(type), [type]);
+  const data = useTypedSelector(selector);
 
   const visibleEntries = Number.MAX_SAFE_INTEGER;
 
   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)
-  }
+    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])
+  }, [data]);
 
   const role = useTypedSelector(store => store.session.role);
   const exportCSV = () => {
@@ -52,18 +62,33 @@ const LeaderboardExportButton: React.FC<Props> = ({ type, contest, contestID })
       type === 'overall' ? 'XP' : 'Score',
       type === 'overall' ? 'Achievements' : 'Submission Id'
     ];
-    const rows = data?.map(player => [
-      player.rank,
-      player.name,
-      player.username,
-      type === 'overall' ? (player as LeaderboardRow).xp : (player as ContestLeaderboardRow).score,
-      type === 'overall'
-        ? (player as LeaderboardRow).achievements
-        : (player as ContestLeaderboardRow).submissionId
-    ]);
+    const rows = data?.map(
+      (player: {
+        rank: any;
+        name: any;
+        username: any;
+        xp?: number;
+        avatar?: string;
+        achievements?: string;
+        score?: number;
+        code?: string;
+        submissionId?: number;
+        votingId?: number;
+      }) => [
+        player.rank,
+        player.name,
+        player.username,
+        type === 'overall'
+          ? (player as LeaderboardRow).xp
+          : (player as ContestLeaderboardRow).score,
+        type === 'overall'
+          ? (player as LeaderboardRow).achievements
+          : (player as ContestLeaderboardRow).submissionId
+      ]
+    );
 
     // Combine headers and rows
-    const csvContent = [headers.join(','), ...rows.map(row => row.join(','))].join('\n');
+    const csvContent = [headers.join(','), ...rows.map((row: any[]) => row.join(','))].join('\n');
 
     const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
     const link = document.createElement('a');

src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx

@@ -92,13 +92,17 @@ const OverallLeaderboard: React.FC = () => {
     []
   );
 
-  const paginatedLeaderboard: { rows: LeaderboardRow[]; userCount: number } = useTypedSelector(store => store.leaderboard.paginatedUserXp);
+  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(() => {
-    dispatch(LeaderboardActions.getPaginatedLeaderboardXp(1, pageSize))
+    dispatch(LeaderboardActions.getPaginatedLeaderboardXp(1, pageSize));
   }, [dispatch]);
 
   const latestParamsRef = useRef<any>(null);
@@ -108,27 +112,27 @@ const OverallLeaderboard: React.FC = () => {
       const endRow = params.endRow;
 
       const pageSize = endRow - startRow;
-      const page = startRow / pageSize + 1
+      const page = startRow / pageSize + 1;
 
       dispatch(LeaderboardActions.getPaginatedLeaderboardXp(page, pageSize));
 
       // Params stored to prevent re-rendering
       latestParamsRef.current = params;
-    },
+    }
   });
 
   useEffect(() => {
-    if (
-      latestParamsRef.current &&
-      paginatedLeaderboard.rows.length > 0
-    ) {
+    if (latestParamsRef.current && paginatedLeaderboard.rows.length > 0) {
       const { successCallback } = latestParamsRef.current;
 
       if (latestParamsRef.current.startRow === 0) {
         setTop3Leaderboard(paginatedLeaderboard.rows.slice(0, 3));
       }
 
-      successCallback(paginatedLeaderboard.rows, Math.min(paginatedLeaderboard.userCount, visibleEntries));
+      successCallback(
+        paginatedLeaderboard.rows,
+        Math.min(paginatedLeaderboard.userCount, visibleEntries)
+      );
       latestParamsRef.current = null;
     }
   }, [paginatedLeaderboard]);