s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remove timeout in getLeaderboard

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-07 15:35:59 +01:00
parent fb7acca7ef
commit 02fd22b56f
2 changed files with 278 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/getChallengeLeaderboard.js
View File

@ -1,16 +1,19 @@
import {API} from '../utils/globals';
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;

166
src/components/specific_challenge/Leaderboard/Leaderboard.js
View File

@ -1,13 +1,17 @@
import React from 'react';
import Media from 'react-media';
import theme from '../../../utils/theme';
import {FlexColumn} from '../../../utils/containers';
import {H2} from '../../../utils/fonts';
import { FlexColumn } from '../../../utils/containers';
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'>
<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' : ''}
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'}
]
<Search searchQueryHandler={searchQueryHandler} />
<Table
challengeName={props.challengeName}
headerElements={getLeaderboardHeaderMobile()}
gridTemplateColumns={
entries[0]
? '1fr 3fr ' +
'2fr '.repeat(entries[0].evaluations.length) +
'1fr 2fr'
: ''
}
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}/>
<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' : ''}
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'}
]
<Search searchQueryHandler={searchQueryHandler} />
<Table
challengeName={props.challengeName}
headerElements={getLeaderboardHeader()}
gridTemplateColumns={
entries[0]
? '1fr 3fr ' +
'2fr '.repeat(entries[0].evaluations.length) +
'1fr 2fr'
: ''
}
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}/>
<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>
</>
);
};