Fix: Dispatch request to retrieve all user XP only triggers on export button click

Author: Blerargh

src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx

@@ -168,7 +168,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) */}

src/pages/leaderboard/subcomponents/LeaderboardExportButton.tsx

@@ -1,18 +1,46 @@
 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 onExportClick = () => {
+    // Dispatch relevant request
+    if (type == "overall") dispatch(LeaderboardActions.getAllUsersXp());
+    else if (type == "score") dispatch(LeaderboardActions.getAllContestScores(contestID as number));
+    else dispatch(LeaderboardActions.getAllContestPopularVotes(contestID as number));
+    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 +76,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>
   ) : (

src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx

@@ -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) */}