Add contests state and actions to leaderboard management.

tohyzhong · tohyzhong · commit ba4b33befb58 · 2025-03-17T21:56:28.000+08:00
Added top X for contest Leaderboard (create course dropdown and course admin panel)
Added Top X for assessment workspace contest leaderboard and fixed export contest leaderboard (assessment workspace)
Fixed Leaderboard dropdown to show only published contests and omit voting assessments.
diff --git a/src/commons/application/ApplicationTypes.ts b/src/commons/application/ApplicationTypes.ts
@@ -353,7 +353,8 @@ export const defaultLeaderboard: LeaderboardState = {
   userXp: [],
   contestScore: [],
   contestPopularVote: [],
-  code: 'Initial code'
+  code: 'Initial code',
+  contests: []
 };
 
 const getDefaultLanguageConfig = (): SALanguage => {
diff --git a/src/commons/application/types/SessionTypes.ts b/src/commons/application/types/SessionTypes.ts
@@ -42,6 +42,7 @@ export type SessionState = {
   readonly enableOverallLeaderboard?: boolean;
   readonly enableContestLeaderboard?: boolean;
   readonly topLeaderboardDisplay?: number;
+  readonly topContestLeaderboardDisplay?: number;
   readonly sourceChapter?: Chapter;
   readonly sourceVariant?: Variant;
   readonly moduleHelpText?: string;
@@ -111,6 +112,7 @@ export type CourseConfiguration = {
   enableOverallLeaderboard: boolean;
   enableContestLeaderboard: boolean;
   topLeaderboardDisplay: number;
+  topContestLeaderboardDisplay: number;
   sourceChapter: Chapter;
   sourceVariant: Variant;
   moduleHelpText: string;
diff --git a/src/commons/dropdown/DropdownCreateCourse.tsx b/src/commons/dropdown/DropdownCreateCourse.tsx
@@ -43,6 +43,7 @@ const DropdownCreateCourse: React.FC<Props> = props => {
     enableOverallLeaderboard: true,
     enableContestLeaderboard: true,
     topLeaderboardDisplay: 100,
+    topContestLeaderboardDisplay: 10,
     sourceChapter: Chapter.SOURCE_1,
     sourceVariant: Variant.DEFAULT,
     moduleHelpText: ''
@@ -279,6 +280,24 @@ const DropdownCreateCourse: React.FC<Props> = props => {
             />
           </FormGroup>
         </div>
+        <div>
+          <FormGroup
+            label="Contest Leaderboard Top XX Display"
+            labelInfo="(configurable later on)"
+            labelFor="contest-leaderboard-top-display"
+          >
+            <InputGroup
+              id="topContestLeaderboardDisplay"
+              value={String(courseConfig.topContestLeaderboardDisplay)}
+              onChange={e =>
+                setCourseConfig({
+                  ...courseConfig,
+                  topContestLeaderboardDisplay: Number(e.target.value)
+                })
+              }
+            />
+          </FormGroup>
+        </div>
         <div>
           <FormGroup
             label="Default Source Chapter"
diff --git a/src/commons/mocks/UserMocks.ts b/src/commons/mocks/UserMocks.ts
@@ -376,6 +376,7 @@ export const mockCourseConfigurations: CourseConfiguration[] = [
     enableOverallLeaderboard: true,
     enableContestLeaderboard: true,
     topLeaderboardDisplay: 100,
+    topContestLeaderboardDisplay: 10,
     sourceChapter: Chapter.SOURCE_1,
     sourceVariant: Variant.DEFAULT,
     moduleHelpText: '',
@@ -392,6 +393,7 @@ export const mockCourseConfigurations: CourseConfiguration[] = [
     enableOverallLeaderboard: true,
     enableContestLeaderboard: true,
     topLeaderboardDisplay: 100,
+    topContestLeaderboardDisplay: 10,
     sourceChapter: Chapter.SOURCE_2,
     sourceVariant: Variant.DEFAULT,
     moduleHelpText: 'Help Text!',
diff --git a/src/commons/sagas/LeaderboardSaga.ts b/src/commons/sagas/LeaderboardSaga.ts
@@ -8,7 +8,8 @@ import { selectTokens } from './BackendSaga';
 import {
   getAllTotalXp,
   getContestPopularVoteLeaderboard,
-  getContestScoreLeaderboard
+  getContestScoreLeaderboard,
+  getAllContests
 } from './RequestsSaga';
 
 const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
@@ -41,7 +42,18 @@ const LeaderboardSaga = combineSagaHandlers(LeaderboardActions, {
     if (contestPopularVotes) {
       yield put(actions.saveAllContestPopularVotes(contestPopularVotes));
     }
-  }
+  },
+
+  getContests: function* () {
+    const tokens: Tokens = yield selectTokens();
+
+    const contests = yield call(getAllContests, tokens);
+    console.log(contests, 'rows');
+
+    if (contests) {
+      yield put(actions.saveContests(contests));
+    }
+  },
 });
 
 export default LeaderboardSaga;
diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
@@ -1,6 +1,6 @@
 import { call } from 'redux-saga/effects';
 import { backendParamsToProgressStatus } from 'src/features/grading/GradingUtils';
-import { ContestLeaderboardRow, LeaderboardRow } from 'src/features/leaderboard/LeaderboardTypes';
+import { ContestLeaderboardRow, LeaderboardContestDetails, LeaderboardRow } from 'src/features/leaderboard/LeaderboardTypes';
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
 
 import {
@@ -490,7 +490,7 @@ export const getAllTotalXp = async (tokens: Tokens): Promise<number | null> => {
 export const getContestScoreLeaderboard = async (
   assessmentId: number,
   tokens: Tokens
-): Promise<number | null> => {
+): Promise<ContestLeaderboardRow[] | null> => {
   const resp = await request(
     `${courseId()}/leaderboard/contests/${assessmentId}/get_score_leaderboard`,
     'GET',
@@ -525,7 +525,7 @@ export const getContestScoreLeaderboard = async (
 export const getContestPopularVoteLeaderboard = async (
   assessmentId: number,
   tokens: Tokens
-): Promise<number | null> => {
+): Promise<ContestLeaderboardRow[] | null> => {
   const resp = await request(
     `${courseId()}/leaderboard/contests/${assessmentId}/get_popular_vote_leaderboard`,
     'GET',
@@ -554,6 +554,23 @@ export const getContestPopularVoteLeaderboard = async (
   );
 };
 
+/**
+ * GET /courses/{courseId}/all_contests
+ */
+export const getAllContests = async (tokens: Tokens): Promise<LeaderboardContestDetails[] | null> => {
+  const resp = await request(`${courseId()}/all_contests`, 'GET', {
+    ...tokens
+  });
+
+  if (!resp || !resp.ok) {
+    return null; // invalid accessToken _and_ refreshToken
+  }
+
+  const rows = await resp.json();
+
+  return rows;
+};
+
 /**
  * GET /courses/{courseId}/admin/users/{course_reg_id}/assessments
  */
@@ -1257,14 +1274,15 @@ export const calculateContestScore = async (
 };
 
 /**
- * GET /courses/{courseId}/admin/assessments/{assessmentId}/scoreLeaderboard
+ * GET /courses/{courseId}/admin/assessments/{assessmentId}/{visibleEntries}/scoreLeaderboard
  */
 export const getScoreLeaderboard = async (
   assessmentId: number,
+  visibleEntries: number | undefined,
   tokens: Tokens
 ): Promise<ContestEntry[] | null> => {
   const resp = await request(
-    `${courseId()}/admin/assessments/${assessmentId}/scoreLeaderboard`,
+    `${courseId()}/admin/assessments/${assessmentId}/${visibleEntries}/scoreLeaderboard`,
     'GET',
     {
       ...tokens
@@ -1278,14 +1296,15 @@ export const getScoreLeaderboard = async (
 };
 
 /**
- * GET /courses/{courseId}/admin/assessments/{assessmentId}/popularVoteLeaderboard
+ * GET /courses/{courseId}/admin/assessments/{assessmentId}/{visibleEntries}/popularVoteLeaderboard
  */
 export const getPopularVoteLeaderboard = async (
   assessmentId: number,
+  visibleEntries: number | undefined,
   tokens: Tokens
 ): Promise<ContestEntry[] | null> => {
   const resp = await request(
-    `${courseId()}/admin/assessments/${assessmentId}/popularVoteLeaderboard`,
+    `${courseId()}/admin/assessments/${assessmentId}/${visibleEntries}/popularVoteLeaderboard`,
     'GET',
     {
       ...tokens
diff --git a/src/commons/sagas/__tests__/BackendSaga.ts b/src/commons/sagas/__tests__/BackendSaga.ts
@@ -136,6 +136,7 @@ const mockCourseConfiguration1: CourseConfiguration = {
   enableSourcecast: true,
   enableStories: false,
   topLeaderboardDisplay: 100,
+  topContestLeaderboardDisplay: 10,
   sourceChapter: Chapter.SOURCE_1,
   sourceVariant: Variant.DEFAULT,
   moduleHelpText: 'Help text',
@@ -168,6 +169,7 @@ const mockCourseConfiguration2: CourseConfiguration = {
   enableOverallLeaderboard: true,
   enableContestLeaderboard: true,
   topLeaderboardDisplay: 100,
+  topContestLeaderboardDisplay: 10,
   enableSourcecast: true,
   enableStories: false,
   sourceChapter: Chapter.SOURCE_4,
@@ -937,6 +939,7 @@ describe('Test UPDATE_COURSE_CONFIG action', () => {
     enableOverallLeaderboard: true,
     enableContestLeaderboard: true,
     topLeaderboardDisplay: 100,
+    topContestLeaderboardDisplay: 10,
     enableSourcecast: false,
     enableStories: false,
     sourceChapter: Chapter.SOURCE_4,
diff --git a/src/features/leaderboard/LeaderboardActions.ts b/src/features/leaderboard/LeaderboardActions.ts
@@ -1,6 +1,6 @@
 import { createActions } from 'src/commons/redux/utils';
 
-import { ContestLeaderboardRow, LeaderboardRow } from './LeaderboardTypes';
+import { ContestLeaderboardRow, LeaderboardContestDetails, LeaderboardRow } from './LeaderboardTypes';
 
 const LeaderboardActions = createActions('leaderboard', {
   getAllUsersXp: 0,
@@ -11,7 +11,9 @@ const LeaderboardActions = createActions('leaderboard', {
   saveAllContestPopularVotes: (contestPopularVote: ContestLeaderboardRow[]) => contestPopularVote,
   getCode: 0,
   saveCode: (code: string) => code,
-  clearCode: 0
+  clearCode: 0,
+  getContests: 0,
+  saveContests: (contests: LeaderboardContestDetails[]) => contests,
 });
 
 export default LeaderboardActions;
diff --git a/src/features/leaderboard/LeaderboardReducer.ts b/src/features/leaderboard/LeaderboardReducer.ts
@@ -23,6 +23,9 @@ export const LeaderboardReducer: Reducer<LeaderboardState, SourceActionType> = c
       })
       .addCase(LeaderboardActions.clearCode, (state, action) => {
         state.code = '';
+      })
+      .addCase(LeaderboardActions.saveContests, (state, action) => {
+        state.contests = action.payload;
       });
   }
 );
diff --git a/src/features/leaderboard/LeaderboardTypes.ts b/src/features/leaderboard/LeaderboardTypes.ts
@@ -23,6 +23,7 @@ export type LeaderboardState = {
   contestScore: ContestLeaderboardRow[];
   contestPopularVote: ContestLeaderboardRow[];
   code: string;
+  contests: LeaderboardContestDetails[];
 };
 
 export type LeaderboardContestDetails = {
diff --git a/src/pages/academy/adminPanel/AdminPanel.tsx b/src/pages/academy/adminPanel/AdminPanel.tsx
@@ -30,6 +30,7 @@ const defaultCourseConfig: UpdateCourseConfiguration = {
   enableOverallLeaderboard: true,
   enableContestLeaderboard: true,
   topLeaderboardDisplay: 100,
+  topContestLeaderboardDisplay: 10,
   enableSourcecast: true,
   enableStories: false,
   moduleHelpText: ''
@@ -66,6 +67,7 @@ const AdminPanel: React.FC = () => {
       enableOverallLeaderboard: session.enableOverallLeaderboard,
       enableContestLeaderboard: session.enableContestLeaderboard,
       topLeaderboardDisplay: session.topLeaderboardDisplay,
+      topContestLeaderboardDisplay: session.topContestLeaderboardDisplay,
       enableSourcecast: session.enableSourcecast,
       enableStories: session.enableStories,
       moduleHelpText: session.moduleHelpText
@@ -77,6 +79,7 @@ const AdminPanel: React.FC = () => {
     session.enableOverallLeaderboard,
     session.enableContestLeaderboard,
     session.topLeaderboardDisplay,
+    session.topContestLeaderboardDisplay,
     session.enableGame,
     session.enableSourcecast,
     session.enableStories,
diff --git a/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
@@ -39,6 +39,7 @@ const CourseConfigPanel: React.FC<Props> = props => {
     enableOverallLeaderboard,
     enableContestLeaderboard,
     topLeaderboardDisplay,
+    topContestLeaderboardDisplay,
     enableSourcecast,
     enableStories,
     moduleHelpText
@@ -153,6 +154,23 @@ const CourseConfigPanel: React.FC<Props> = props => {
               }
             />
           </FormGroup>
+          <FormGroup
+            helperText="Enter the Top XX students to be displayed on the Contest Leaderboard"
+            inline={true}
+            label="Top Contest Leaderboard Display"
+            labelFor="topContestLeaderboardDisplay"
+          >
+            <InputGroup
+              id="topContestLeaderboardDisplay"
+              value={String(topContestLeaderboardDisplay)}
+              onChange={e =>
+                props.setCourseConfiguration({
+                  ...props.courseConfiguration,
+                  topContestLeaderboardDisplay: Number(e.target.value)
+                })
+              }
+            />
+          </FormGroup>
         </div>
         {!isMobileBreakpoint && <Divider />}
         <div className="booleans">
diff --git a/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx b/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx
@@ -2,18 +2,19 @@ import { IconNames } from '@blueprintjs/icons';
 import { createGrid, GridOptions } from 'ag-grid-community';
 import ControlButton from 'src/commons/ControlButton';
 import { getScoreLeaderboard } from 'src/commons/sagas/RequestsSaga';
-import { useTokens } from 'src/commons/utils/Hooks';
+import { useTokens, useTypedSelector } from 'src/commons/utils/Hooks';
 
 type Props = {
   assessmentId: number;
 };
 
 const ExportScoreLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
   const tokens = useTokens();
+  const visibleEntries = useTypedSelector(store => store.session.topContestLeaderboardDisplay);
 
   // onClick handler for fetching score leaderboard, putting it into a grid and exporting data
   const exportScoreLeaderboardToCsv = async () => {
-    const scoreLeaderbaord = await getScoreLeaderboard(assessmentId, tokens);
+    const scoreLeaderbaord = await getScoreLeaderboard(assessmentId, visibleEntries, tokens);
     const gridContainer = document.createElement('div');
     const gridOptions: GridOptions = {
       rowData: scoreLeaderbaord,
diff --git a/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx b/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx
@@ -2,18 +2,19 @@ import { IconNames } from '@blueprintjs/icons';
 import { createGrid, GridOptions } from 'ag-grid-community';
 import ControlButton from 'src/commons/ControlButton';
 import { getPopularVoteLeaderboard } from 'src/commons/sagas/RequestsSaga';
-import { useTokens } from 'src/commons/utils/Hooks';
+import { useTokens, useTypedSelector } from 'src/commons/utils/Hooks';
 
 type Props = {
   assessmentId: number;
 };
 
 const ExportVoteLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
   const tokens = useTokens({ throwWhenEmpty: true });
+  const visibleEntries = useTypedSelector(store => store.session.topContestLeaderboardDisplay);
 
   // onClick handler for fetching popular vote leaderboard, putting it into a grid and exporting data
   const exportPopularVoteLeaderboardToCsv = async () => {
-    const popularVoteLeaderboard = await getPopularVoteLeaderboard(assessmentId, tokens);
+    const popularVoteLeaderboard = await getPopularVoteLeaderboard(assessmentId, visibleEntries, tokens);
     const gridContainer = document.createElement('div');
     const gridOptions: GridOptions = {
       rowData: popularVoteLeaderboard,
diff --git a/src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx b/src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx
@@ -46,18 +46,13 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
   }, [dispatch, contestID, type]);
 
   // Retrieve contests (For dropdown)
-  const contestAssessments = useTypedSelector(store => store.session.assessmentOverviews);
-
-  const contestDetails: LeaderboardContestDetails[] = (contestAssessments ?? [])
-    .filter(assessment => assessment.type === 'Contests')
-    .map(contest => ({
-      contest_id: contest.id,
-      title: contest.title,
-      published: contest.isPublished,
-      voting: contest.hasVotingFeatures
-    }));
+  const contestDetails: LeaderboardContestDetails[] = useTypedSelector(store => store.leaderboard.contests);
   const contestName = contestDetails.find(contest => contest.contest_id === contestID)?.title;
 
+  useEffect(() => {
+    dispatch(LeaderboardActions.getContests());
+  }, [dispatch]);
+
   // Temporary loading of leaderboard background
   useEffect(() => {
     const originalBackground = document.body.style.background;
@@ -69,9 +64,9 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
   }, []);
 
   // Display constants
-  const visibleEntries = 10;
-  const top3 = rankedLeaderboard.filter(x => x.rank <= 3);
-  const rest = rankedLeaderboard.filter(x => x.rank <= Number(visibleEntries) && x.rank > 3);
+  const visibleEntries = useTypedSelector(store => store.session.topContestLeaderboardDisplay);
+  const top3 = rankedLeaderboard.filter(x => x.rank !== undefined && x.rank <= 3);
+  const rest = rankedLeaderboard.filter(x => x.rank !== undefined && x.rank <= Number(visibleEntries) && x.rank > 3);
 
   // const workspaceLocation = 'assessment';
   const navigate = useNavigate();
@@ -167,7 +162,7 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
       {/* Honourable Mentions */}
       <div className="ag-theme-alpine">
         <h2>Honourable Mentions</h2>
-        <AgGridReact rowData={rest} columnDefs={columnDefs} domLayout="autoHeight" rowHeight={60} />
+        <AgGridReact rowData={rest} columnDefs={columnDefs} domLayout="autoHeight" rowHeight={60} pagination={true} paginationPageSize={10} paginationPageSizeSelector={[10, 25, 50]} />
       </div>
     </div>
   );
diff --git a/src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx b/src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx
diff --git a/src/pages/localStorage.ts b/src/pages/localStorage.ts
