implement frontend pagination and correct challenge type label

src/components/elements/IconLabel.js

@@ -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>;
 

src/components/elements/Pager.js

@@ -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}
+            <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>
     );
 }

src/pages/Challenges.js

@@ -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'}
+                        {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>
                 </FlexColumn>
             </FlexColumn>
-            <Pager pages={5}/>
+            <Pager pageNr={pageNr} pages={pages}
+                   nextPage={nextPage} previousPage={previousPage}/>
         </FlexColumn>
     );
 }

src/prototypeData/challenges.js

@@ -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;

src/utils/globals.js

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