remove timeout in getLeaderboard
This commit is contained in:
parent
fb7acca7ef
commit
02fd22b56f
@ -1,16 +1,19 @@
|
||||
import { API } from '../utils/globals';
|
||||
|
||||
const getChallengeLeaderboard = (setDataState, challengeName, setLoading) => {
|
||||
fetch(`${API}/leaderboard/${challengeName}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const getChallengeLeaderboard = async (
|
||||
setDataState,
|
||||
challengeName,
|
||||
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;
|
@ -7,7 +7,11 @@ 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'>
|
||||
<H2 as='h2' margin='0 0 12px 0'>
|
||||
<FlexColumn padding="24px 12px" width="70%" as="section" id="start">
|
||||
<H2 as="h2" margin="0 0 12px 0">
|
||||
Leaderboard
|
||||
</H2>
|
||||
{!loading ?
|
||||
{!loading ? (
|
||||
<>
|
||||
<Search searchQueryHandler={searchQueryHandler} />
|
||||
<Table challengeName={props.challengeName} headerElements={getLeaderboardHeaderMobile()}
|
||||
gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
|
||||
<Table
|
||||
challengeName={props.challengeName}
|
||||
headerElements={getLeaderboardHeaderMobile()}
|
||||
gridTemplateColumns={
|
||||
entries[0]
|
||||
? '1fr 3fr ' +
|
||||
'2fr '.repeat(entries[0].evaluations.length) +
|
||||
'1fr 2fr'
|
||||
: ''
|
||||
}
|
||||
user={props.user}
|
||||
staticColumnElements={
|
||||
[
|
||||
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'}
|
||||
]
|
||||
}
|
||||
{ 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}/>
|
||||
<Pager pageNr={pageNr} width='48px' borderRadius='64px'
|
||||
pageNr={pageNr}
|
||||
elements={entries}
|
||||
sortByUpdate={sortByUpdate}
|
||||
/>
|
||||
<Pager
|
||||
pageNr={pageNr}
|
||||
width="48px"
|
||||
borderRadius="64px"
|
||||
pages={CALC_PAGES(entries)}
|
||||
nextPage={nextPage} previousPage={previousPage}
|
||||
number={`${pageNr} / ${CALC_PAGES(entries)}`}/>
|
||||
nextPage={nextPage}
|
||||
previousPage={previousPage}
|
||||
number={`${pageNr} / ${CALC_PAGES(entries)}`}
|
||||
/>
|
||||
</>
|
||||
: <Loading/>}
|
||||
) : (
|
||||
<Loading />
|
||||
)}
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
const desktopRender = () => {
|
||||
return (
|
||||
<FlexColumn padding='24px' as='section' width='100%' maxWidth='1200px'>
|
||||
<H2 as='h2' margin='0 0 32px 0'>
|
||||
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1200px">
|
||||
<H2 as="h2" margin="0 0 32px 0">
|
||||
Leaderboard
|
||||
</H2>
|
||||
{!loading ?
|
||||
{!loading ? (
|
||||
<>
|
||||
<Search searchQueryHandler={searchQueryHandler} />
|
||||
<Table challengeName={props.challengeName} headerElements={getLeaderboardHeader()}
|
||||
gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
|
||||
<Table
|
||||
challengeName={props.challengeName}
|
||||
headerElements={getLeaderboardHeader()}
|
||||
gridTemplateColumns={
|
||||
entries[0]
|
||||
? '1fr 3fr ' +
|
||||
'2fr '.repeat(entries[0].evaluations.length) +
|
||||
'1fr 2fr'
|
||||
: ''
|
||||
}
|
||||
user={props.user}
|
||||
staticColumnElements={
|
||||
[
|
||||
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'}
|
||||
]
|
||||
}
|
||||
{ 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}/>
|
||||
<Pager pageNr={pageNr} width='72px' borderRadius='64px'
|
||||
pageNr={pageNr}
|
||||
elements={entries}
|
||||
sortByUpdate={sortByUpdate}
|
||||
/>
|
||||
<Pager
|
||||
pageNr={pageNr}
|
||||
width="72px"
|
||||
borderRadius="64px"
|
||||
pages={CALC_PAGES(entries, 2)}
|
||||
nextPage={nextPage} previousPage={previousPage}
|
||||
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}/>
|
||||
nextPage={nextPage}
|
||||
previousPage={previousPage}
|
||||
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
|
||||
/>
|
||||
</>
|
||||
: <Loading/>}
|
||||
) : (
|
||||
<Loading />
|
||||
)}
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
<Media query={theme.mobile}>{mobileRender()}</Media>
|
||||
<Media query={theme.desktop}>{desktopRender()}</Media>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user