remove timeout in getLeaderboard

src/api/getChallengeLeaderboard.js

@@ -1,16 +1,19 @@
-import {API} from '../utils/globals';
+import { API } from '../utils/globals';
 
-const getChallengeLeaderboard = (setDataState, challengeName, setLoading) => {
+const getChallengeLeaderboard = async (
-    fetch(`${API}/leaderboard/${challengeName}`)
+  setDataState,
-        .then(response => response.json())
+  challengeName,
-        .then(data => {
+  setLoading
+) => {
+  await fetch(`${API}/leaderboard/${challengeName}`)
+    .then((response) => response.json())
+    .then((data) => {
       setDataState(data.entries);
-            if (setLoading) {
-                setTimeout(() => {
-                    setLoading(false);
-                }, 3000);
-            }
     });
+
+  if (setLoading) {
+    setLoading(false);
+  }
 };
 
 export default getChallengeLeaderboard;

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import Media from 'react-media';
 import theme from '../../../utils/theme';
-import {FlexColumn} from '../../../utils/containers';
+import { FlexColumn } from '../../../utils/containers';
-import {H2} from '../../../utils/fonts';
+import { H2 } from '../../../utils/fonts';
 import Table from '../Table';
 import PropsTypes from 'prop-types';
 import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
 import leaderboardSearchQueryHandler from './leaderboardSearchQueryHandler';
-import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/globals';
+import {
+  CALC_PAGES,
+  EVALUATIONS_FORMAT,
+  RENDER_WHEN,
+} from '../../../utils/globals';
 import Search from '../../generic/Search';
 import Pager from '../../generic/Pager';
 import Loading from '../../generic/Loading';
@@ -97,10 +101,22 @@ const Leaderboard = (props) => {
     switch (elem) {
       case 'submitter':
         if (submitterSorted) {
-                    newEntries = newEntries.sort((a, b) => (a.submitter.toLowerCase() < b.submitter.toLowerCase()) ? 1 : ((b.submitter.toLowerCase() < a.submitter.toLowerCase()) ? -1 : 0));
+          newEntries = newEntries.sort((a, b) =>
+            a.submitter.toLowerCase() < b.submitter.toLowerCase()
+              ? 1
+              : b.submitter.toLowerCase() < a.submitter.toLowerCase()
+              ? -1
+              : 0
+          );
           setSubmitterSorted(false);
         } else {
-                    newEntries = newEntries.sort((a, b) => (a.submitter.toLowerCase() > b.submitter.toLowerCase()) ? 1 : ((b.submitter.toLowerCase() > a.submitter.toLowerCase()) ? -1 : 0));
+          newEntries = newEntries.sort((a, b) =>
+            a.submitter.toLowerCase() > b.submitter.toLowerCase()
+              ? 1
+              : b.submitter.toLowerCase() > a.submitter.toLowerCase()
+              ? -1
+              : 0
+          );
           setSubmitterSorted(true);
         }
         break;
@@ -115,10 +131,14 @@ const Leaderboard = (props) => {
         break;
       case 'when':
         if (whenSorted) {
-                    newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
+          newEntries = newEntries.sort((a, b) =>
+            a.when < b.when ? 1 : b.when < a.when ? -1 : 0
+          );
           setWhenSorted(false);
         } else {
-                    newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
+          newEntries = newEntries.sort((a, b) =>
+            a.when > b.when ? 1 : b.when > a.when ? -1 : 0
+          );
           setWhenSorted(true);
         }
         break;
@@ -127,11 +147,19 @@ const Leaderboard = (props) => {
         // eslint-disable-next-line no-case-declarations
         let newScoresSorted = scoresSorted;
         if (scoresSorted[metricIndex]) {
-                    newEntries = newEntries.sort((a, b) => b.evaluations[metricIndex].score - a.evaluations[metricIndex].score);
+          newEntries = newEntries.sort(
+            (a, b) =>
+              b.evaluations[metricIndex].score -
+              a.evaluations[metricIndex].score
+          );
           newScoresSorted[metricIndex] = false;
           setScoresSorted(newScoresSorted);
         } else {
-                    newEntries = newEntries.sort((a, b) => a.evaluations[metricIndex].score - b.evaluations[metricIndex].score);
+          newEntries = newEntries.sort(
+            (a, b) =>
+              a.evaluations[metricIndex].score -
+              b.evaluations[metricIndex].score
+          );
           newScoresSorted[metricIndex] = true;
           setScoresSorted(newScoresSorted);
         }
@@ -142,88 +170,116 @@ const Leaderboard = (props) => {
 
   const mobileRender = () => {
     return (
-            <FlexColumn padding='24px 12px' width='70%' as='section' id='start'>
+      <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
-                <H2 as='h2' margin='0 0 12px 0'>
+        <H2 as="h2" margin="0 0 12px 0">
           Leaderboard
         </H2>
-                {!loading ?
+        {!loading ? (
           <>
-                        <Search searchQueryHandler={searchQueryHandler}/>
+            <Search searchQueryHandler={searchQueryHandler} />
-                        <Table challengeName={props.challengeName} headerElements={getLeaderboardHeaderMobile()}
+            <Table
-                               gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
+              challengeName={props.challengeName}
-                               user={props.user}
+              headerElements={getLeaderboardHeaderMobile()}
-                               staticColumnElements={
+              gridTemplateColumns={
-                                   [
+                entries[0]
-                                       {name: 'id', format: null, order: 1, align: 'left'},
+                  ? '1fr 3fr ' +
-                                       {name: 'submitter', format: null, order: 2, align: 'left'},
+                    '2fr '.repeat(entries[0].evaluations.length) +
-                                       {name: 'times', format: null, order: 4, align: 'left'},
+                    '1fr 2fr'
-                                       {name: 'when', format: RENDER_WHEN, order: 5, align: 'right'}
+                  : ''
-                                   ]
               }
+              user={props.user}
+              staticColumnElements={[
+                { name: 'id', format: null, order: 1, align: 'left' },
+                { name: 'submitter', format: null, order: 2, align: 'left' },
+                { name: 'times', format: null, order: 4, align: 'left' },
+                { name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
+              ]}
               metrics={getPossibleMetrics()}
               iterableColumnElement={{
                 name: 'evaluations',
                 format: EVALUATIONS_FORMAT,
                 order: 3,
-                                   align: 'left'
+                align: 'left',
               }}
-                               pageNr={pageNr} elements={entries} sortByUpdate={sortByUpdate}/>
+              pageNr={pageNr}
-                        <Pager pageNr={pageNr} width='48px' borderRadius='64px'
+              elements={entries}
+              sortByUpdate={sortByUpdate}
+            />
+            <Pager
+              pageNr={pageNr}
+              width="48px"
+              borderRadius="64px"
               pages={CALC_PAGES(entries)}
-                               nextPage={nextPage} previousPage={previousPage}
+              nextPage={nextPage}
-                               number={`${pageNr} / ${CALC_PAGES(entries)}`}/>
+              previousPage={previousPage}
+              number={`${pageNr} / ${CALC_PAGES(entries)}`}
+            />
           </>
-                    : <Loading/>}
+        ) : (
+          <Loading />
+        )}
       </FlexColumn>
     );
   };
 
   const desktopRender = () => {
     return (
-            <FlexColumn padding='24px' as='section' width='100%' maxWidth='1200px'>
+      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1200px">
-                <H2 as='h2' margin='0 0 32px 0'>
+        <H2 as="h2" margin="0 0 32px 0">
           Leaderboard
         </H2>
-                {!loading ?
+        {!loading ? (
           <>
-                        <Search searchQueryHandler={searchQueryHandler}/>
+            <Search searchQueryHandler={searchQueryHandler} />
-                        <Table challengeName={props.challengeName} headerElements={getLeaderboardHeader()}
+            <Table
-                               gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
+              challengeName={props.challengeName}
-                               user={props.user}
+              headerElements={getLeaderboardHeader()}
-                               staticColumnElements={
+              gridTemplateColumns={
-                                   [
+                entries[0]
-                                       {name: 'id', format: null, order: 1, align: 'left'},
+                  ? '1fr 3fr ' +
-                                       {name: 'submitter', format: null, order: 2, align: 'left'},
+                    '2fr '.repeat(entries[0].evaluations.length) +
-                                       {name: 'times', format: null, order: 4, align: 'left'},
+                    '1fr 2fr'
-                                       {name: 'when', format: RENDER_WHEN, order: 5, align: 'right'}
+                  : ''
-                                   ]
               }
+              user={props.user}
+              staticColumnElements={[
+                { name: 'id', format: null, order: 1, align: 'left' },
+                { name: 'submitter', format: null, order: 2, align: 'left' },
+                { name: 'times', format: null, order: 4, align: 'left' },
+                { name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
+              ]}
               metrics={getPossibleMetrics()}
               iterableColumnElement={{
                 name: 'evaluations',
                 format: EVALUATIONS_FORMAT,
                 order: 3,
-                                   align: 'left'
+                align: 'left',
               }}
-                               pageNr={pageNr} elements={entries} sortByUpdate={sortByUpdate}/>
+              pageNr={pageNr}
-                        <Pager pageNr={pageNr} width='72px' borderRadius='64px'
+              elements={entries}
+              sortByUpdate={sortByUpdate}
+            />
+            <Pager
+              pageNr={pageNr}
+              width="72px"
+              borderRadius="64px"
               pages={CALC_PAGES(entries, 2)}
-                               nextPage={nextPage} previousPage={previousPage}
+              nextPage={nextPage}
-                               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}/>
+              previousPage={previousPage}
+              number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
+            />
           </>
-                    : <Loading/>}
+        ) : (
+          <Loading />
+        )}
       </FlexColumn>
     );
   };
 
   return (
     <>
-            <Media query={theme.mobile}>
+      <Media query={theme.mobile}>{mobileRender()}</Media>
-                {mobileRender()}
+      <Media query={theme.desktop}>{desktopRender()}</Media>
-            </Media>
-            <Media query={theme.desktop}>
-                {desktopRender()}
-            </Media>
     </>
   );
 };