Make direct requests for exporting leaderboard instead of caching in store

Author: sayomaki

src/pages/leaderboard/subcomponents/LeaderboardExportButton.tsx

@@ -1,12 +1,15 @@
 import 'src/styles/Leaderboard.scss';
 
-import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import React from 'react';
+import { Role } from 'src/commons/application/ApplicationTypes';
+import {
+  getAllOverallLeaderboardXP,
+  getContestPopularVoteLeaderboard,
+  getContestScoreLeaderboard
+} from 'src/commons/sagas/RequestsSaga';
 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 { store } from 'src/pages/createStore';
 
 type Props = {
   type: string;
@@ -15,60 +18,50 @@ type Props = {
 };
 
 const LeaderboardExportButton: React.FC<Props> = ({ type, contest, contestID }) => {
-  // Retrieve relevant leaderboard data
-  const [exportRequested, setExportRequest] = useState(false);
-  const dispatch = useDispatch();
-  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 role = useTypedSelector(store => store.session.role);
 
-  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);
-  };
+  const onExportClick = async () => {
+    const accessToken = store.getState().session.accessToken!;
+    const refreshToken = store.getState().session.refreshToken!;
+    const tokens = { accessToken, refreshToken };
 
-  // Return the CSV when requested and data is loaded
-  useEffect(() => {
-    if (exportRequested) {
-      exportCSV();
-      setExportRequest(false); // Clear request
+    if (type === 'overall') {
+      const resp = await getAllOverallLeaderboardXP(tokens);
+      if (resp) {
+        exportCSV(resp);
+      }
+    } else if (type === 'score') {
+      const resp = await getContestScoreLeaderboard(contestID!, Number.MAX_SAFE_INTEGER, tokens);
+      if (resp) {
+        exportCSV(resp);
+      }
+    } else if (type === 'popularvote') {
+      const resp = await getContestPopularVoteLeaderboard(
+        contestID!,
+        Number.MAX_SAFE_INTEGER,
+        tokens
+      );
+      if (resp) {
+        exportCSV(resp);
+      }
     }
-  }, [data]);
+  };
 
   const escapeCodeField = (value: any) => {
     const str = value?.toString() ?? '';
     const escaped = str.replace(/"/g, '""');
     return `"${escaped}"`;
   };
 
-  const role = useTypedSelector(store => store.session.role);
-  const exportCSV = () => {
+  const exportCSV = (data: any[]) => {
     const headers = [
       'Rank',
       'Name',
       'Username',
       type === 'overall' ? 'XP' : 'Score',
       type === 'overall' ? 'Achievements' : 'Code'
     ];
-    const rows = data?.map(
+    const rows = data.map(
       (player: {
         rank: any;
         name: any;
@@ -110,7 +103,7 @@ const LeaderboardExportButton: React.FC<Props> = ({ type, contest, contestID })
 
   return role === Role.Admin || role === Role.Staff ? (
     <button onClick={onExportClick} className="export-button">
-      Export as .csv
+      Export as CSV
     </button>
   ) : (
     ''