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

42
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'>
{submissions.map((submission, index) => {
return ( return (
<React.Fragment key={`leaderboard-row-${index}`}> <Grid as='tr' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px'
<Body> key={`leaderboard-row-${index}`}>
<Body as='td'>
{index} {index}
</Body> </Body>
<Body> <Body as='td'>
{submission.submitter} {submission.submitter}
</Body> </Body>
<Body> <Body as='td'>
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)} {submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
</Body> </Body>
<Body> <Body as='td'>
{submission.evaluations[0].score.slice(0, 7)}
</Body>
<Body as='td' textAlign='right' padding='0 2px 0 0'>
{submission.version.length} {submission.version.length}
</Body> </Body>
<Body> </Grid>
{submission.evaluations[0].score}
</Body>
</React.Fragment>
); );
}) })}
</FlexColumn>
); );
} }
} }
return ( return (
<> <>
<Grid gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px'> <FlexColumn as='table'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px' width='100%'>
{headerElements.map((elem, index) => { {headerElements.map((elem, index) => {
return ( return (
<Medium key={`leaderboard-header-${index}`}> <FlexRow as='tr' key={`leaderboard-header-${index}`}
{elem} alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
</Medium> <Medium as='th'>{elem}</Medium>
</FlexRow>
) )
})} })}
{renderSubmissions()}
</Grid> </Grid>
{renderSubmissions()}
</FlexColumn>
</> </>
); );
} }