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

Refactor Table and Leaderboard and correct Search in Challenges

Browse Source
This commit is contained in:
mattyl006 2022-08-30 09:25:45 +02:00
parent 59cb564dac
commit fa1e58ecf0
9 changed files with 139 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,75 @@
import React from 'react';
import {FlexColumn, FlexRow, Grid} from '../../utils/containers';
import {H3, Medium} from '../../utils/fonts';
import Media from 'react-media';
import theme from '../../utils/theme';
import Loading from './Loading';
import PropsTypes from 'prop-types';
const Table = (props) => {
const mobileRender = () => {
return (
<FlexColumn as='table' margin='20px 0 32px 0' minHeight='380px'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
gridGap='10px' width='100%'>
{props.headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
<Medium as='th'>{elem}</Medium>
</FlexRow>
);
})}
</Grid>
{props.renderElements('10px')}
</FlexColumn>
);
};
const desktopRender = () => {
return (
<FlexColumn as='table' margin='32px 0 72px 0' minHeight='438px' width='100%'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
gridGap='32px' width='100%' margin='0 0 28px 0'>
{props.headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
<H3 as='th'>{elem}</H3>
</FlexRow>
);
})}
</Grid>
{props.renderElements('32px')}
</FlexColumn>
);
};
return (
<>
<Loading visible={props.loading}/>
<Media query={theme.mobile}>
{!props.loading ? mobileRender() : ''}
</Media>
<Media query={theme.desktop}>
{!props.loading ? desktopRender() : ''}
</Media>
</>
);
};
Table.propTypes = {
challengeName: PropsTypes.string,
loading: PropsTypes.bool,
renderElements: PropsTypes.func,
headerElements: PropsTypes.arrayOf(PropsTypes.string),
};
Table.defaultProps = {
challengeName: '',
loading: true,
renderElements: null,
headerElements: [],
};
export default Table;

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

@ -1,129 +0,0 @@
import React from 'react';
import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
import {H3, Medium} from '../../../utils/fonts';
import _renderSubmissions from './_renderSubmissions';
import Pager from '../Pager';
import {CALC_PAGES} from '../../../utils/globals';
import Media from 'react-media';
import theme from '../../../utils/theme';
import Loading from '../Loading';
import PropsTypes from 'prop-types';
import _tableSearchQueryHandler from './_tableSearchQueryHandler';
import Search from '../Search';
const Table = (props) => {
const headerElements = ['#', 'submitter', 'result', 'entries', 'when'];
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
challengeDataRequest(props.challengeName);
}, [props.challengeName]);
const challengeDataRequest = (challengeName) => {
getChallengeLeaderboard(setEntriesFromApi, challengeName);
getChallengeLeaderboard(setEntries, challengeName, setLoading);
};
const renderSubmissions = (gridGap) => {
return _renderSubmissions(pageNr, entries
? entries : [], gridGap);
};
const tableSearchQueryHandler = (event) => {
_tableSearchQueryHandler(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 mobileRender = () => {
return (
<>
<Search searchQueryHandler={tableSearchQueryHandler}/>
<FlexColumn as='table' margin='20px 0 32px 0' minHeight='380px'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
gridGap='10px' width='100%'>
{headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
<Medium as='th'>{elem}</Medium>
</FlexRow>
);
})}
</Grid>
{renderSubmissions('10px')}
</FlexColumn>
<Pager pageNr={pageNr} width='48px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])}
nextPage={nextPage} previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
</>
);
};
const desktopRender = () => {
return (
<>
<Search searchQueryHandler={tableSearchQueryHandler}/>
<FlexColumn as='table' margin='32px 0 72px 0' minHeight='438px' width='100%'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
gridGap='32px' width='100%' margin='0 0 28px 0'>
{headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
<H3 as='th'>{elem}</H3>
</FlexRow>
);
})}
</Grid>
{renderSubmissions('32px')}
</FlexColumn>
<Pager pageNr={pageNr} width='72px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])}
nextPage={nextPage} previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
</>
);
};
return (
<>
<Loading visible={loading}/>
<Media query={theme.mobile}>
{!loading ? mobileRender() : ''}
</Media>
<Media query={theme.desktop}>
{!loading ? desktopRender() : ''}
</Media>
</>
);
};
Table.propTypes = {
challengeName: PropsTypes.string,
};
Table.defaultProps = {
challengeName: '',
};
export default Table;

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

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

67
src/components/sections/Leaderboard.js → src/components/sections/Leaderboard/Leaderboard.js
View File

@ -1,11 +1,17 @@
import React from 'react';
import Media from 'react-media';
import theme from '../../utils/theme';
import {FlexColumn, FlexRow} from '../../utils/containers';
import {H2, H3} from '../../utils/fonts';
import Table from '../elements/Table';
import theme from '../../../utils/theme';
import {FlexColumn, FlexRow} from '../../../utils/containers';
import {H2, H3} from '../../../utils/fonts';
import Table from '../../elements/Table';
import styled from 'styled-components';
import PropsTypes from 'prop-types';
import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
import _renderSubmissions from './_renderSubmissions';
import _tableSearchQueryHandler from './_tableSearchQueryHandler';
import {CALC_PAGES} from '../../../utils/globals';
import Search from '../../elements/Search';
import Pager from '../../elements/Pager';
const BoardVariantMobile = styled(FlexRow)`
transition: color, background-color 0.3s ease-in-out;
@ -46,6 +52,43 @@ const BoardVariantDesktop = styled(FlexRow)`
const Leaderboard = (props) => {
const [variant, setVariant] = React.useState(0);
const headerElements = ['#', 'submitter', 'result', 'entries', 'when'];
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
challengeDataRequest(props.challengeName);
}, [props.challengeName]);
const challengeDataRequest = (challengeName) => {
getChallengeLeaderboard(setEntriesFromApi, challengeName);
getChallengeLeaderboard(setEntries, challengeName, setLoading);
};
const renderSubmissions = (gridGap) => {
return _renderSubmissions(pageNr, entries
? entries : [], gridGap);
};
const tableSearchQueryHandler = (event) => {
_tableSearchQueryHandler(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 mobileRender = () => {
return (
@ -61,7 +104,13 @@ const Leaderboard = (props) => {
By metric
</BoardVariantMobile>
</FlexRow>
<Table challengeName={props.challengeName}/>
<Search searchQueryHandler={tableSearchQueryHandler}/>
<Table challengeName={props.challengeName} loading={loading}
renderElements={renderSubmissions} headerElements={headerElements}/>
<Pager pageNr={pageNr} width='48px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])}
nextPage={nextPage} previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
</FlexColumn>
);
};
@ -86,7 +135,13 @@ const Leaderboard = (props) => {
</H3>
</BoardVariantDesktop>
</FlexRow>
<Table challengeName={props.challengeName}/>
<Search searchQueryHandler={tableSearchQueryHandler}/>
<Table challengeName={props.challengeName} loading={loading}
renderElements={renderSubmissions} headerElements={headerElements}/>
<Pager pageNr={pageNr} width='72px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])}
nextPage={nextPage} previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
</FlexColumn>
);
};

0
src/components/elements/Table/_renderSubmissions.js → src/components/sections/Leaderboard/_renderSubmissions.js
View File

0
src/components/elements/Table/_tableSearchQueryHandler.js → src/components/sections/Leaderboard/_tableSearchQueryHandler.js
View File

1
src/components/sections/Leaderboard/index.js Normal file
View File

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

2
src/pages/Challanges/_searchQueryHandler.js
View File

@ -8,7 +8,7 @@ const _searchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges)
for (let challenge of challengesFromAPI) {
const {title, description, type, mainMetric, bestScore, deadline, baseline, prize} = challenge;
const str = `${title} ${description} ${type} ${mainMetric} ${bestScore}
${deadline.slice(11, 16)} ${deadline.slice(0, 10)} ${baseline} ${prize}`;
${deadline ? deadline.slice(11, 16) : ''} ${deadline ? deadline.slice(0, 10) : ''} ${baseline} ${prize}`;
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
challengesToRender.push(challenge);
}

2
src/pages/Challenge.js
View File

@ -4,7 +4,7 @@ import {useParams} from 'react-router-dom';
import {H1, Medium} from '../utils/fonts';
import theme from '../utils/theme';
import MobileChallengeMenu from '../components/elements/MobileChallengeMenu';
import Leaderboard from '../components/sections/Leaderboard';
import Leaderboard from '../components/sections/Leaderboard/Leaderboard';
import Readme from '../components/sections/Readme';
import HowTo from '../components/sections/HowTo';
import MyEntries from '../components/sections/MyEntries';