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

add Pager to Leaderboard on mobile

Browse Source
This commit is contained in:
mattyl006 2022-07-26 10:15:06 +02:00
parent 6a13edfdd9
commit 98821fff5a
6 changed files with 122 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,81 +0,0 @@
import React from "react";
import {FlexColumn, FlexRow, Grid} from "../../utils/containers";
import getChallengeSubmissions from "../../api/getChallengeSubmissions";
import {Body, Medium} from "../../utils/fonts";
import styled from "styled-components";
const Line = styled(FlexRow)`
position: absolute;
top: -6px;
left: 0;
width: 100%;
background-color: ${({theme}) => theme.colors.dark04};
height: 1px;
`;
const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
const [challengeData, setChallengeData] = React.useState({});
React.useEffect(() => {
challengeDataRequest();
});
const challengeDataRequest = () => {
getChallengeSubmissions(setChallengeData, props.challengeName);
}
const renderSubmissions = () => {
const submissions = challengeData.submissions;
if (submissions) {
return (
<FlexColumn as='tbody'>
{submissions.map((submission, index) => {
return (
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' margin='10px 0 0 0' position='relative'>
<Line/>
<Body as='td'>
{index}
</Body>
<Body as='td'>
{submission.submitter}
</Body>
<Body as='td'>
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
</Body>
<Body as='td'>
{submission.evaluations[0].score}
</Body>
<Body as='td' textAlign='right' padding='0 2px 0 0'>
{submission.version.length}
</Body>
</Grid>
);
})}
</FlexColumn>
);
}
}
return (
<>
<FlexColumn as='table'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' width='100%'>
{headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
<Medium as='th'>{elem}</Medium>
</FlexRow>
)
})}
</Grid>
{renderSubmissions()}
</FlexColumn>
</>
);
}
export default Table;

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

@ -0,0 +1,63 @@
import React from "react";
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
import getChallengeSubmissions from "../../../api/getChallengeSubmissions";
import {Medium} from "../../../utils/fonts";
import _renderSubmissions from "./_renderSubmissions";
import Pager from "../Pager";
import {CALC_PAGES} from "../../../utils/globals";
const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
const [challengeData, setChallengeData] = React.useState({});
const [pageNr, setPageNr] = React.useState(1);
React.useEffect(() => {
challengeDataRequest();
});
const challengeDataRequest = () => {
getChallengeSubmissions(setChallengeData, props.challengeName);
}
const renderSubmissions = () => {
return _renderSubmissions(pageNr, challengeData.submissions
? challengeData.submissions : []);
}
const nextPage = () => {
if (pageNr !== CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])) {
let newPage = pageNr + 1;
setPageNr(newPage);
}
}
const previousPage = () => {
if (pageNr !== 1) {
let newPage = pageNr - 1;
setPageNr(newPage);
}
}
return (
<>
<FlexColumn as='table' margin='0 0 32px 0'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' width='100%'>
{headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
<Medium as='th'>{elem}</Medium>
</FlexRow>
)
})}
</Grid>
{renderSubmissions()}
</FlexColumn>
<Pager pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
</>
);
}
export default Table;

48
src/components/elements/Table/_renderSubmissions.js Normal file
View File

@ -0,0 +1,48 @@
import {ELEMENTS_PER_PAGE} from "../../../utils/globals";
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
import {Body} from "../../../utils/fonts";
import styled from "styled-components";
const Line = styled(FlexRow)`
position: absolute;
top: -6px;
left: 0;
width: 100%;
background-color: ${({theme}) => theme.colors.dark04};
height: 1px;
`;
const _renderSubmissions = (pageNr, submissions) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (submissions) {
return (
<FlexColumn as='tbody'>
{submissions.slice(n, n + ELEMENTS_PER_PAGE).map((submission, index) => {
return (
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' margin='10px 0 0 0' position='relative'>
<Line as='td'/>
<Body as='td'>
{index + n + 1}
</Body>
<Body as='td'>
{submission.submitter}
</Body>
<Body as='td'>
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
</Body>
<Body as='td'>
{submission.evaluations[0].score}
</Body>
<Body as='td' textAlign='right' padding='0 2px 0 0'>
{submission.version.length}
</Body>
</Grid>
);
})}
</FlexColumn>
);
}
}
export default _renderSubmissions;

1
src/components/elements/Table/index.js Normal file
View File

@ -0,0 +1 @@
export {default} from './Table';

12
src/pages/Challanges/Challenges.js
View File

@ -3,7 +3,6 @@ import {Body, H1} from "../../utils/fonts";
import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
import Search from "../../components/elements/Search";
import Pager from "../../components/elements/Pager";
import {ELEMENTS_PER_PAGE} from "../../utils/globals";
import FiltersMenu from "../../components/elements/FiltersMenu";
import _searchQueryHandler from "./_searchQueryHandler";
import _renderChallenges from "./_renderChallenges";
@ -11,6 +10,7 @@ import Media from "react-media";
import theme from "../../utils/theme";
import cupIco from '../../assets/cup_ico.svg';
import getChallenges from "../../api/getChallenges";
import {CALC_PAGES} from "../../utils/globals";
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
@ -47,16 +47,12 @@ const Challenges = () => {
setCommercial(value);
}
const calcPages = () => {
return Math.ceil(challenges.length / ELEMENTS_PER_PAGE);
}
const searchQueryHandler = (event) => {
_searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
}
const nextPage = () => {
if (pageNr !== calcPages(challenges)) {
if (pageNr !== CALC_PAGES(challenges)) {
let newPage = pageNr + 1;
setPageNr(newPage);
}
@ -97,7 +93,7 @@ const Challenges = () => {
{renderChallenges()}
</FlexColumn>
</FlexColumn>
<Pager pageNr={pageNr} pages={calcPages()}
<Pager pageNr={pageNr} pages={CALC_PAGES(challenges)}
nextPage={nextPage} previousPage={previousPage}/>
</FlexColumn>
</>
@ -131,7 +127,7 @@ const Challenges = () => {
{renderChallenges()}
</FlexColumn>
</FlexColumn>
<Pager pageNr={pageNr} pages={calcPages()}
<Pager pageNr={pageNr} pages={CALC_PAGES(challenges)}
nextPage={nextPage} previousPage={previousPage}/>
</FlexColumn>
</>

7
src/utils/globals.js
View File

@ -45,6 +45,10 @@ const RENDER_ICO = (type) => {
}
}
const CALC_PAGES = (objects) => {
return Math.ceil(objects.length / ELEMENTS_PER_PAGE);
}
export {
ELEMENTS_PER_PAGE,
API,
@ -52,5 +56,6 @@ export {
CHALLENGE_PAGE,
MINI_DESCRIPTION_LENGTH,
MINI_DESCRIPTION_RENDER,
RENDER_ICO
RENDER_ICO,
CALC_PAGES
};