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

implement frontend pagination and correct challenge type label

Browse Source
This commit is contained in:
mattyl006 2022-07-08 14:09:33 +02:00
parent 52c4c1a087
commit 7139910b7f
5 changed files with 286 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/elements/IconLabel.js
View File

@ -14,7 +14,8 @@ import imageIco from '../../assets/image_ico.svg';
const HoverLabel = styled(Body)`
position: absolute;
top: -32px;
left: 0;
left: ${({type}) => (type === 'text' || type === 'image' || type === 'tabular') ? '-32px' : 0};
width: 100px;
display: none;
justify-content: center;
align-items: center;
@ -26,7 +27,7 @@ const HoverLabel = styled(Body)`
const renderHoverLabel = (type) => {
const hoverLabel = (label) =>
<HoverLabel className='HoverLabel'>
<HoverLabel className='HoverLabel' type={type}>
{label}
</HoverLabel>;

26
src/components/elements/Pager.js
View File

@ -17,29 +17,13 @@ const RightArrow = styled(Svg)`
`;
const Pager = (props) => {
const [page, setPage] = React.useState(1);
const nextPage = () => {
if (page !== props.pages) {
let newPage = page + 1;
setPage(newPage);
}
}
const previousPage = () => {
if (page !== 1) {
let newPage = page - 1;
setPage(newPage);
}
}
return (
<FlexRow gap='14px'>
<LeftArrow as='button' src={polygon} onClick={previousPage}
backgroundColor={(page === 1) ? 'transparent' : theme.colors.dark}/>
<CircleNumber number={page}/>
<RightArrow as='button' src={polygon} onClick={nextPage}
backgroundColor={(page === props.pages) ? 'transparent' : theme.colors.dark}/>
<LeftArrow as='button' src={polygon} onClick={props.previousPage}
backgroundColor={(props.pageNr === 1) ? 'transparent' : theme.colors.dark}/>
<CircleNumber number={props.pageNr}/>
<RightArrow as='button' src={polygon} onClick={props.nextPage}
backgroundColor={(props.pageNr === props.pages) ? 'transparent' : theme.colors.dark}/>
</FlexRow>
);
}

41
src/pages/Challenges.js
View File

@ -4,8 +4,39 @@ import {FlexColumn, Grid} from "../utils/containers";
import Search from "../components/elements/Search";
import MiniChallenge from "../components/elements/MiniChallenge";
import Pager from "../components/elements/Pager";
import challenges from "../prototypeData/challenges";
import {ELEMENTS_PER_PAGE} from "../utils/globals";
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
const pages = Math.ceil(challenges.length / ELEMENTS_PER_PAGE);
const nextPage = () => {
if (pageNr !== pages) {
let newPage = pageNr + 1;
setPageNr(newPage);
}
}
const previousPage = () => {
if (pageNr !== 1) {
let newPage = pageNr - 1;
setPageNr(newPage);
}
}
const renderChallenges = () => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
return (
challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
return (
<MiniChallenge key={index} title={challenge.title} type={challenge.type}
describe={challenge.describe}/>
);
})
)
}
return (
<FlexColumn as='main' alignmentY='flex-start' width='100%'
minHeight='100vh' padding='90px 0 32px 0'>
@ -16,16 +47,12 @@ const Challenges = () => {
<Search/>
<FlexColumn width='100%'>
<Grid margin='32px 0' gridGap='32px 0'>
<MiniChallenge title='Challenging America geo prediction' type={'text'}
describe={`Guess publication location for a piece of text.`}/>
<MiniChallenge title='Challenging America geo prediction' type={'image'}
describe={`Guess publication location for a piece of text.`}/>
<MiniChallenge title='Challenging America geo prediction' type={'tabular'}
describe={`Guess publication location for a piece of text.`}/>
{renderChallenges()}
</Grid>
</FlexColumn>
</FlexColumn>
<Pager pages={5}/>
<Pager pageNr={pageNr} pages={pages}
nextPage={nextPage} previousPage={previousPage}/>
</FlexColumn>
);
}

241
src/prototypeData/challenges.js vendored Normal file
View File

@ -0,0 +1,241 @@
const challenges = [
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'image',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'tabular',
},
{
title: 'Example 1',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'text',
},
{
title: 'Example 2',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 3',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 4',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Example 5',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 6',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 7',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'text',
},
{
title: 'Example 8',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 9',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Example 10',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 11',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'image',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'tabular',
},
{
title: 'Example 1',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'text',
},
{
title: 'Example 2',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 3',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 4',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Example 5',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 6',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 7',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'text',
},
{
title: 'Example 8',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 9',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Example 10',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 11',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'image',
},
{
title: 'Challenging America geo prediction',
describe: 'Guess publication location for a piece of text',
type: 'tabular',
},
{
title: 'Example 1',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'text',
},
{
title: 'Example 2',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 3',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 4',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Example 5',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 6',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 7',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'text',
},
{
title: 'Example 8',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
},
{
title: 'Example 9',
describe: 'Guess publication location for a piece of text',
type: 'text',
},
{
title: 'Example 10',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'image',
},
{
title: 'Example 11',
describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio,
ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`,
type: 'tabular',
}
]
export default challenges;

3
src/utils/globals.js Normal file
View File

@ -0,0 +1,3 @@
const ELEMENTS_PER_PAGE = 12
export {ELEMENTS_PER_PAGE};