Set filename for Contests and Overall Leaderboard csv

Author: tohyzhong

src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx

@@ -33,8 +33,6 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
   // TODO: Only display rows when contest voting counterpart has voting published
 
   // Retrieve Contest Score Data from store
-  console.log(contestID);
-  console.log(useTypedSelector(store => store.session.assessmentOverviews));
   const rankedLeaderboard: ContestLeaderboardRow[] = useTypedSelector(store =>
     type === 'score' ? store.leaderboard.contestScore : store.leaderboard.contestPopularVote
   );
@@ -58,6 +56,7 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
       published: contest.isPublished,
       voting: contest.hasVotingFeatures
     }));
+  const contestName = contestDetails.find(contest => contest.contest_id === contestID)?.title;
 
   // Temporary loading of leaderboard background
   useEffect(() => {
@@ -154,7 +153,7 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
         <LeaderboardDropdown contests={contestDetails} />
 
         {/* Export Button */}
-        <LeaderboardExportButton type="contest" data={rankedLeaderboard}/>
+        <LeaderboardExportButton type="contest" contest={contestName} data={rankedLeaderboard}/>
       </div>
 
       {/* Leaderboard Table (Top 3) */}

src/pages/leaderboard/subcomponents/LeaderboardExportButton.tsx

@@ -7,19 +7,19 @@ import { ContestLeaderboardRow, LeaderboardRow } from 'src/features/leaderboard/
 import { Role } from '../../../commons/application/ApplicationTypes';
 
 type Props =
-  | { type: "contest"; data: ContestLeaderboardRow[] }
-  | { type: "overall"; data: LeaderboardRow[] };
+  | { type: "contest"; contest: string | undefined; data: ContestLeaderboardRow[] }
+  | { type: "overall"; contest: string | undefined; data: LeaderboardRow[] };
 
-const LeaderboardExportButton: React.FC<Props> = ({ type, data }) => {
+const LeaderboardExportButton: React.FC<Props> = ({ type, contest, data }) => {
   const role = useTypedSelector(store => store.session.role);
   const exportCSV = () => {
-    const headers = ['Rank', 'Name', 'Username', (type == "overall" ? 'XP' : 'Score'), (type == "overall" ? 'Achievements' : 'Submission Id')];
+    const headers = ['Rank', 'Name', 'Username', (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
+        type === "overall" ? (player as LeaderboardRow).xp : (player as ContestLeaderboardRow).score,
+        type === "overall" ? (player as LeaderboardRow).achievements : (player as ContestLeaderboardRow).submissionId
     ]);
 
     // Combine headers and rows
@@ -28,7 +28,7 @@ const LeaderboardExportButton: React.FC<Props> = ({ type, data }) => {
     const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
     const link = document.createElement('a');
     link.href = URL.createObjectURL(blob);
-    link.download = 'leaderboard.csv'; // Filename for download
+    link.download = type === "overall" ? 'Overall Leaderboard.csv' : `${contest} Leaderboard.csv`; // Filename for download
     link.click();
   };
 

src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx

@@ -108,7 +108,7 @@ const OverallLeaderboard: React.FC = () => {
         <LeaderboardDropdown contests={contestDetails} />
 
         {/* Export Button */}
-        <LeaderboardExportButton type="overall" data={rankedLeaderboard} />
+        <LeaderboardExportButton type="overall" contest={undefined} data={rankedLeaderboard} />
       </div>
 
       {/* Leaderboard Table (Replaced with ag-Grid) */}