remove timeout in getLeaderboard

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

View File

@ -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
setDataState(data.entries); ) => {
if (setLoading) { await fetch(`${API}/leaderboard/${challengeName}`)
setTimeout(() => { .then((response) => response.json())
setLoading(false); .then((data) => {
}, 3000); setDataState(data.entries);
} });
});
if (setLoading) {
setLoading(false);
}
}; };
export default getChallengeLeaderboard; export default getChallengeLeaderboard;

View File

@ -1,239 +1,295 @@
import React from 'react'; import React from 'react';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../../utils/theme'; 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 Table from '../Table';
import PropsTypes from 'prop-types'; import PropsTypes from 'prop-types';
import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard'; import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
import leaderboardSearchQueryHandler from './leaderboardSearchQueryHandler'; 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 Search from '../../generic/Search';
import Pager from '../../generic/Pager'; import Pager from '../../generic/Pager';
import Loading from '../../generic/Loading'; import Loading from '../../generic/Loading';
const Leaderboard = (props) => { const Leaderboard = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]); const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entries, setEntries] = React.useState([]); const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
const [submitterSorted, setSubmitterSorted] = React.useState(false); const [submitterSorted, setSubmitterSorted] = React.useState(false);
const [entriesSorted, setEntriesSorted] = React.useState(false); const [entriesSorted, setEntriesSorted] = React.useState(false);
const [whenSorted, setWhenSorted] = React.useState(false); const [whenSorted, setWhenSorted] = React.useState(false);
const [scoresSorted, setScoresSorted] = React.useState([]); const [scoresSorted, setScoresSorted] = React.useState([]);
React.useEffect(() => { React.useEffect(() => {
challengeDataRequest(props.challengeName); challengeDataRequest(props.challengeName);
}, [props.challengeName]); }, [props.challengeName]);
const challengeDataRequest = (challengeName) => { const challengeDataRequest = (challengeName) => {
getChallengeLeaderboard(setEntriesFromApi, challengeName); getChallengeLeaderboard(setEntriesFromApi, challengeName);
getChallengeLeaderboard(setEntries, challengeName, setLoading); getChallengeLeaderboard(setEntries, challengeName, setLoading);
}; };
const getMetricIndex = (metricName) => { const getMetricIndex = (metricName) => {
let i = 0; let i = 0;
for (let evaluation of entriesFromApi[0].evaluations) { for (let evaluation of entriesFromApi[0].evaluations) {
if (`${evaluation.test.metric}.${evaluation.test.name}` === metricName) { if (`${evaluation.test.metric}.${evaluation.test.name}` === metricName) {
return i; return i;
} }
i++; i++;
}
};
const searchQueryHandler = (event) => {
leaderboardSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries);
};
const nextPage = () => {
if (pageNr !== CALC_PAGES(entries ? entries : [])) {
let newPage = pageNr + 1;
setPageNr(newPage);
}
};
const previousPage = () => {
if (pageNr !== 1) {
let newPage = pageNr - 1;
setPageNr(newPage);
}
};
const getPossibleMetrics = () => {
let metrics = [];
for (let entry of entriesFromApi) {
for (let evaluation of entry.evaluations) {
let metric = evaluation.test.metric;
let name = evaluation.test.name;
if (metric && !metrics.includes(`${metric}.${name}`)) {
metrics.push(`${metric}.${name}`);
} }
}; }
}
return metrics;
};
const searchQueryHandler = (event) => { const getLeaderboardHeader = () => {
leaderboardSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries); let header = ['#', 'submitter'];
}; for (let metric of getPossibleMetrics()) {
header.push(metric);
}
header.push('entries');
header.push('when');
return header;
};
const nextPage = () => { const getLeaderboardHeaderMobile = () => {
if (pageNr !== CALC_PAGES(entries ? entries : [])) { let header = ['#', 'submitter', 'entries', 'when'];
let newPage = pageNr + 1; for (let metric of getPossibleMetrics()) {
setPageNr(newPage); header.push(metric);
}
return header;
};
const sortByUpdate = (elem) => {
let metricIndex = 0;
let newEntries = entries;
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
);
setSubmitterSorted(false);
} else {
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() > b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() > a.submitter.toLowerCase()
? -1
: 0
);
setSubmitterSorted(true);
} }
}; break;
case 'entries':
const previousPage = () => { if (entriesSorted) {
if (pageNr !== 1) { newEntries = newEntries.sort((a, b) => b.times - a.times);
let newPage = pageNr - 1; setEntriesSorted(false);
setPageNr(newPage); } else {
newEntries = newEntries.sort((a, b) => a.times - b.times);
setEntriesSorted(true);
} }
}; break;
case 'when':
const getPossibleMetrics = () => { if (whenSorted) {
let metrics = []; newEntries = newEntries.sort((a, b) =>
for (let entry of entriesFromApi) { a.when < b.when ? 1 : b.when < a.when ? -1 : 0
for (let evaluation of entry.evaluations) { );
let metric = evaluation.test.metric; setWhenSorted(false);
let name = evaluation.test.name; } else {
if (metric && !metrics.includes(`${metric}.${name}`)) { newEntries = newEntries.sort((a, b) =>
metrics.push(`${metric}.${name}`); a.when > b.when ? 1 : b.when > a.when ? -1 : 0
} );
} setWhenSorted(true);
} }
return metrics; break;
}; default:
metricIndex = getMetricIndex(elem);
const getLeaderboardHeader = () => { // eslint-disable-next-line no-case-declarations
let header = ['#', 'submitter']; let newScoresSorted = scoresSorted;
for (let metric of getPossibleMetrics()) { if (scoresSorted[metricIndex]) {
header.push(metric); 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
);
newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted);
} }
header.push('entries'); break;
header.push('when'); }
return header; setEntries(newEntries);
}; };
const getLeaderboardHeaderMobile = () => {
let header = ['#', 'submitter', 'entries', 'when'];
for (let metric of getPossibleMetrics()) {
header.push(metric);
}
return header;
};
const sortByUpdate = (elem) => {
let metricIndex = 0;
let newEntries = entries;
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));
setSubmitterSorted(false);
} else {
newEntries = newEntries.sort((a, b) => (a.submitter.toLowerCase() > b.submitter.toLowerCase()) ? 1 : ((b.submitter.toLowerCase() > a.submitter.toLowerCase()) ? -1 : 0));
setSubmitterSorted(true);
}
break;
case 'entries':
if (entriesSorted) {
newEntries = newEntries.sort((a, b) => b.times - a.times);
setEntriesSorted(false);
} else {
newEntries = newEntries.sort((a, b) => a.times - b.times);
setEntriesSorted(true);
}
break;
case 'when':
if (whenSorted) {
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));
setWhenSorted(true);
}
break;
default:
metricIndex = getMetricIndex(elem);
// 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);
newScoresSorted[metricIndex] = false;
setScoresSorted(newScoresSorted);
} else {
newEntries = newEntries.sort((a, b) => a.evaluations[metricIndex].score - b.evaluations[metricIndex].score);
newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted);
}
break;
}
setEntries(newEntries);
};
const mobileRender = () => {
return (
<FlexColumn padding='24px 12px' width='70%' as='section' id='start'>
<H2 as='h2' margin='0 0 12px 0'>
Leaderboard
</H2>
{!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'}
]
}
metrics={getPossibleMetrics()}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left'
}}
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)}`}/>
</>
: <Loading/>}
</FlexColumn>
);
};
const desktopRender = () => {
return (
<FlexColumn padding='24px' as='section' width='100%' maxWidth='1200px'>
<H2 as='h2' margin='0 0 32px 0'>
Leaderboard
</H2>
{!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'}
]
}
metrics={getPossibleMetrics()}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left'
}}
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)}`}/>
</>
: <Loading/>}
</FlexColumn>
);
};
const mobileRender = () => {
return ( return (
<> <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
<Media query={theme.mobile}> <H2 as="h2" margin="0 0 12px 0">
{mobileRender()} Leaderboard
</Media> </H2>
<Media query={theme.desktop}> {!loading ? (
{desktopRender()} <>
</Media> <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',
}}
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)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
); );
};
const desktopRender = () => {
return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1200px">
<H2 as="h2" margin="0 0 32px 0">
Leaderboard
</H2>
{!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' },
]}
metrics={getPossibleMetrics()}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left',
}}
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)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
);
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
);
}; };
Leaderboard.propsTypes = { Leaderboard.propsTypes = {
challengeName: PropsTypes.string, challengeName: PropsTypes.string,
}; };
Leaderboard.defaultProps = { Leaderboard.defaultProps = {
challengeName: '', challengeName: '',
}; };
export default Leaderboard; export default Leaderboard;