implement frontend pagination and correct challenge type label
This commit is contained in:
parent
52c4c1a087
commit
7139910b7f
@ -14,7 +14,8 @@ import imageIco from '../../assets/image_ico.svg';
|
|||||||
const HoverLabel = styled(Body)`
|
const HoverLabel = styled(Body)`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -32px;
|
top: -32px;
|
||||||
left: 0;
|
left: ${({type}) => (type === 'text' || type === 'image' || type === 'tabular') ? '-32px' : 0};
|
||||||
|
width: 100px;
|
||||||
display: none;
|
display: none;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -26,7 +27,7 @@ const HoverLabel = styled(Body)`
|
|||||||
|
|
||||||
const renderHoverLabel = (type) => {
|
const renderHoverLabel = (type) => {
|
||||||
const hoverLabel = (label) =>
|
const hoverLabel = (label) =>
|
||||||
<HoverLabel className='HoverLabel'>
|
<HoverLabel className='HoverLabel' type={type}>
|
||||||
{label}
|
{label}
|
||||||
</HoverLabel>;
|
</HoverLabel>;
|
||||||
|
|
||||||
|
@ -17,29 +17,13 @@ const RightArrow = styled(Svg)`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const Pager = (props) => {
|
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 (
|
return (
|
||||||
<FlexRow gap='14px'>
|
<FlexRow gap='14px'>
|
||||||
<LeftArrow as='button' src={polygon} onClick={previousPage}
|
<LeftArrow as='button' src={polygon} onClick={props.previousPage}
|
||||||
backgroundColor={(page === 1) ? 'transparent' : theme.colors.dark}/>
|
backgroundColor={(props.pageNr === 1) ? 'transparent' : theme.colors.dark}/>
|
||||||
<CircleNumber number={page}/>
|
<CircleNumber number={props.pageNr}/>
|
||||||
<RightArrow as='button' src={polygon} onClick={nextPage}
|
<RightArrow as='button' src={polygon} onClick={props.nextPage}
|
||||||
backgroundColor={(page === props.pages) ? 'transparent' : theme.colors.dark}/>
|
backgroundColor={(props.pageNr === props.pages) ? 'transparent' : theme.colors.dark}/>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -4,8 +4,39 @@ import {FlexColumn, Grid} from "../utils/containers";
|
|||||||
import Search from "../components/elements/Search";
|
import Search from "../components/elements/Search";
|
||||||
import MiniChallenge from "../components/elements/MiniChallenge";
|
import MiniChallenge from "../components/elements/MiniChallenge";
|
||||||
import Pager from "../components/elements/Pager";
|
import Pager from "../components/elements/Pager";
|
||||||
|
import challenges from "../prototypeData/challenges";
|
||||||
|
import {ELEMENTS_PER_PAGE} from "../utils/globals";
|
||||||
|
|
||||||
const Challenges = () => {
|
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 (
|
return (
|
||||||
<FlexColumn as='main' alignmentY='flex-start' width='100%'
|
<FlexColumn as='main' alignmentY='flex-start' width='100%'
|
||||||
minHeight='100vh' padding='90px 0 32px 0'>
|
minHeight='100vh' padding='90px 0 32px 0'>
|
||||||
@ -16,16 +47,12 @@ const Challenges = () => {
|
|||||||
<Search/>
|
<Search/>
|
||||||
<FlexColumn width='100%'>
|
<FlexColumn width='100%'>
|
||||||
<Grid margin='32px 0' gridGap='32px 0'>
|
<Grid margin='32px 0' gridGap='32px 0'>
|
||||||
<MiniChallenge title='Challenging America geo prediction' type={'text'}
|
{renderChallenges()}
|
||||||
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.`}/>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
<Pager pages={5}/>
|
<Pager pageNr={pageNr} pages={pages}
|
||||||
|
nextPage={nextPage} previousPage={previousPage}/>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
241
src/prototypeData/challenges.js
vendored
Normal file
241
src/prototypeData/challenges.js
vendored
Normal 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
3
src/utils/globals.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
const ELEMENTS_PER_PAGE = 12
|
||||||
|
|
||||||
|
export {ELEMENTS_PER_PAGE};
|
Loading…
Reference in New Issue
Block a user