Added support for retrieving only relevant rows in leaderboard page

Author: Blerargh

src/commons/application/ApplicationTypes.ts

@@ -351,6 +351,7 @@ export const defaultAchievement: AchievementState = {
 
 export const defaultLeaderboard: LeaderboardState = {
   userXp: [],
+  paginatedUserXp: [],
   contestScore: [],
   contestPopularVote: [],
   code: '',

src/commons/sagas/LeaderboardSaga.ts

@@ -8,6 +8,7 @@ import { selectTokens } from './BackendSaga';
 import {
   getAllContests,
   getAllTotalXp,
+  getPaginatedTotalXp,
   getContestPopularVoteLeaderboard,
   getContestScoreLeaderboard
 } from './RequestsSaga';
@@ -23,6 +24,17 @@ const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
     }
   },
 
+  getPaginatedLeaderboardXp: function* (action) {
+    const tokens: Tokens = yield selectTokens();
+    const { page, pageSize } = action.payload;
+
+    const paginatedUsersXp = yield call(getPaginatedTotalXp, page, pageSize, tokens);
+
+    if (paginatedUsersXp) {
+      yield put(actions.savePaginatedLeaderboardXp(paginatedUsersXp));
+    }
+  },
+
   getAllContestScores: function* (action) {
     const tokens: Tokens = yield selectTokens();
     const assessmentId = action.payload;

src/commons/sagas/RequestsSaga.ts

@@ -488,6 +488,36 @@ export const getAllTotalXp = async (tokens: Tokens): Promise<number | null> => {
   );
 };
 
+/**
+ * GET /courses/{courseId}/all_user_xp
+ */
+export const getPaginatedTotalXp = async (
+  page: number,
+  pageSize: number,
+  tokens: Tokens
+): Promise<number | null> => {
+  const resp = await request(`${courseId()}/get_paginated_display/${page}/${pageSize}`, 'GET', {
+    ...tokens
+  });
+
+  if (!resp || !resp.ok) {
+    return null; // invalid accessToken _and_ refreshToken
+  }
+
+  const rows = await resp.json();
+
+  return rows.users.map(
+    (row: any): LeaderboardRow => ({
+      rank: row.rank,
+      name: row.name,
+      username: row.username,
+      xp: row.total_xp,
+      avatar: '',
+      achievements: ''
+    })
+  );
+};
+
 /**
  * GET /courses/{courseId}/leaderboard/contests/{assessment_id}/get_score_leaderboard
  */

src/features/leaderboard/LeaderboardActions.ts

@@ -9,6 +9,8 @@ import {
 const LeaderboardActions = createActions('leaderboard', {
   getAllUsersXp: 0,
   saveAllUsersXp: (userXp: LeaderboardRow[]) => userXp,
+  getPaginatedLeaderboardXp: (page: number, pageSize: number) => ({page, pageSize}),
+  savePaginatedLeaderboardXp: (paginatedUserXp: LeaderboardRow[]) => paginatedUserXp,
   getAllContestScores: (assessmentId: number) => assessmentId,
   saveAllContestScores: (contestScore: ContestLeaderboardRow[]) => contestScore,
   getAllContestPopularVotes: (assessmentId: number) => assessmentId,

src/features/leaderboard/LeaderboardReducer.ts

@@ -12,6 +12,9 @@ export const LeaderboardReducer: Reducer<LeaderboardState, SourceActionType> = c
       .addCase(LeaderboardActions.saveAllUsersXp, (state, action) => {
         state.userXp = action.payload;
       })
+      .addCase(LeaderboardActions.savePaginatedLeaderboardXp, (state, action) => {
+        state.paginatedUserXp = action.payload;
+      })
       .addCase(LeaderboardActions.saveAllContestScores, (state, action) => {
         state.contestScore = action.payload;
       })

src/features/leaderboard/LeaderboardTypes.ts

@@ -20,6 +20,7 @@ export type ContestLeaderboardRow = {
 
 export type LeaderboardState = {
   userXp: LeaderboardRow[];
+  paginatedUserXp: LeaderboardRow[];
   contestScore: ContestLeaderboardRow[];
   contestPopularVote: ContestLeaderboardRow[];
   code: string;

src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx

@@ -20,10 +20,25 @@ import LeaderboardExportButton from './LeaderboardExportButton';
 import LeaderboardPodium from './LeaderboardPodium';
 
 const OverallLeaderboard: React.FC = () => {
+  // FOR TESTING (To be removed)
+  const dispatch = useDispatch();
+  const paginatedLeaderboard: LeaderboardRow[] = useTypedSelector(store => store.leaderboard.paginatedUserXp);
+  let page = 2;
+  let pageSize = 25;
+  useEffect(() => {
+    dispatch(LeaderboardActions.getPaginatedLeaderboardXp(page, pageSize))
+    console.log("TEST")
+  }, [dispatch, page, pageSize]);
+
+  useEffect(() => {
+    console.log(paginatedLeaderboard);
+  }, [paginatedLeaderboard])
+
+  
+
   // Retrieve XP Data from store
   const rankedLeaderboard: LeaderboardRow[] = useTypedSelector(store => store.leaderboard.userXp);
 
-  const dispatch = useDispatch();
   useEffect(() => {
     dispatch(LeaderboardActions.getAllUsersXp());
   }, [dispatch]);