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

semantic html for leaderboard table

Browse Source
This commit is contained in:
mattyl006 2022-07-18 15:34:57 +02:00
parent 86ce0edef6
commit eade652339
1 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/elements/Table.js
View File

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
import {Grid} from "../../utils/containers"; import {FlexColumn, FlexRow, Grid} from "../../utils/containers";
import getChallengeSubmissions from "../../api/getChallengeSubmissions"; import getChallengeSubmissions from "../../api/getChallengeSubmissions";
import {Body, Medium} from "../../utils/fonts"; import {Body, Medium} from "../../utils/fonts";
const Table = (props) => { const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'entries', 'result']; const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
const [challengeData, setChallengeData] = React.useState({}); const [challengeData, setChallengeData] = React.useState({});
React.useEffect(() => { React.useEffect(() => {
@ -19,43 +19,49 @@ const Table = (props) => {
const submissions = challengeData.submissions; const submissions = challengeData.submissions;
if (submissions) { if (submissions) {
return ( return (
submissions.map((submission, index) => { <FlexColumn as='tbody'>
return ( {submissions.map((submission, index) => {
<React.Fragment key={`leaderboard-row-${index}`}> return (
<Body> <Grid as='tr' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px'
{index} key={`leaderboard-row-${index}`}>
</Body> <Body as='td'>
<Body> {index}
{submission.submitter} </Body>
</Body> <Body as='td'>
<Body> {submission.submitter}
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)} </Body>
</Body> <Body as='td'>
<Body> {submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
{submission.version.length} </Body>
</Body> <Body as='td'>
<Body> {submission.evaluations[0].score.slice(0, 7)}
{submission.evaluations[0].score} </Body>
</Body> <Body as='td' textAlign='right' padding='0 2px 0 0'>
</React.Fragment> {submission.version.length}
); </Body>
}) </Grid>
);
})}
</FlexColumn>
); );
} }
} }
return ( return (
<> <>
<Grid gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px'> <FlexColumn as='table'>
{headerElements.map((elem, index) => { <Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px' width='100%'>
return ( {headerElements.map((elem, index) => {
<Medium key={`leaderboard-header-${index}`}> return (
{elem} <FlexRow as='tr' key={`leaderboard-header-${index}`}
</Medium> alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
) <Medium as='th'>{elem}</Medium>
})} </FlexRow>
)
})}
</Grid>
{renderSubmissions()} {renderSubmissions()}
</Grid> </FlexColumn>
</> </>
); );
} }