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

leaderboard on mobile by grid

Browse Source
This commit is contained in:
mattyl006 2022-07-18 15:11:46 +02:00
parent e8652d593b
commit 86ce0edef6
5 changed files with 82 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/getChallengeSubmissions.js Normal file
View File

@ -0,0 +1,11 @@
import {API} from "../utils/globals";
const getChallengeSubmissions = (setState, challengeName) => {
fetch(`${API}/challenge-all-submissions/${challengeName}`)
.then(response => response.json())
.then(data => {
setState(data);
});
}
export default getChallengeSubmissions;

63
src/components/elements/Table.js Normal file
View File

@ -0,0 +1,63 @@
import React from "react";
import {Grid} from "../../utils/containers";
import getChallengeSubmissions from "../../api/getChallengeSubmissions";
import {Body, Medium} from "../../utils/fonts";
const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'entries', 'result'];
const [challengeData, setChallengeData] = React.useState({});
React.useEffect(() => {
challengeDataRequest();
});
const challengeDataRequest = () => {
getChallengeSubmissions(setChallengeData, props.challengeName);
}
const renderSubmissions = () => {
const submissions = challengeData.submissions;
if (submissions) {
return (
submissions.map((submission, index) => {
return (
<React.Fragment key={`leaderboard-row-${index}`}>
<Body>
{index}
</Body>
<Body>
{submission.submitter}
</Body>
<Body>
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
</Body>
<Body>
{submission.version.length}
</Body>
<Body>
{submission.evaluations[0].score}
</Body>
</React.Fragment>
);
})
);
}
}
return (
<>
<Grid gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px'>
{headerElements.map((elem, index) => {
return (
<Medium key={`leaderboard-header-${index}`}>
{elem}
</Medium>
)
})}
{renderSubmissions()}
</Grid>
</>
);
}
export default Table;

6
src/components/sections/Leaderboar/Leaderboard.js
View File

@ -4,15 +4,15 @@ import theme from "../../../utils/theme";
import _mobileRender from "./_mobileRender"; import _mobileRender from "./_mobileRender";
import _desktopRender from "./_desktopRender"; import _desktopRender from "./_desktopRender";
const Leaderboard = () => { const Leaderboard = (props) => {
const [variant, setVariant] = React.useState(0); const [variant, setVariant] = React.useState(0);
const mobileRender = () => { const mobileRender = () => {
return _mobileRender(variant, setVariant); return _mobileRender(variant, setVariant, props.challengeName);
} }
const desktopRender = () => { const desktopRender = () => {
return _desktopRender(variant, setVariant); return _desktopRender(variant, setVariant, props.challengeName);
} }
return ( return (

6
src/components/sections/Leaderboar/_mobileRender.js
View File

@ -1,6 +1,7 @@
import {FlexColumn, FlexRow} from "../../../utils/containers"; import {FlexColumn, FlexRow} from "../../../utils/containers";
import {H2} from "../../../utils/fonts"; import {H2} from "../../../utils/fonts";
import styled from "styled-components"; import styled from "styled-components";
import Table from "../../elements/Table";
const BoardVariantMobile = styled(FlexRow)` const BoardVariantMobile = styled(FlexRow)`
transition: color, background-color 0.3s ease-in-out; transition: color, background-color 0.3s ease-in-out;
@ -25,9 +26,9 @@ const BoardVariantMobile = styled(FlexRow)`
} }
`; `;
const mobileRender = (variant, setVariant) => { const mobileRender = (variant, setVariant, challengeName) => {
return ( return (
<FlexColumn padding='24px' as='section'> <FlexColumn padding='24px 12px' as='section'>
<H2 as='h2' margin='0 0 12px 0'> <H2 as='h2' margin='0 0 12px 0'>
Leaderboard Leaderboard
</H2> </H2>
@ -39,6 +40,7 @@ const mobileRender = (variant, setVariant) => {
By metric By metric
</BoardVariantMobile> </BoardVariantMobile>
</FlexRow> </FlexRow>
<Table challengeName={challengeName}/>
</FlexColumn> </FlexColumn>
); );
} }

2
src/pages/Challenge.js
View File

@ -37,7 +37,7 @@ const Challenge = () => {
const sectionRender = () => { const sectionRender = () => {
switch (section) { switch (section) {
case 0: case 0:
return <Leaderboard/> return <Leaderboard challengeName={challengeName}/>
case 1: case 1:
return <Readme/> return <Readme/>
case 2: case 2: