pagination refactor

src/components/generic/Pager.js

@@ -5,6 +5,8 @@ import polygon from '../../assets/polygon.svg';
 import styled from 'styled-components';
 import theme from '../../utils/theme';
 import PropsTypes from 'prop-types';
+import { NEXT_PAGE, PREVIOUS_PAGE } from '../../utils/globals';
+
 
 const PagerStyle = styled(FlexRow)`
   gap: 14px;
@@ -54,11 +56,11 @@ const Pager = (props) => {
         return theme.colors.dark;
     };
 
-    const leftArrowClickable = () => {
+    // const leftArrowClickable = () => {
-        if (props.pageNr === 1)
+    //     if (props.pageNr === 1)
-            return null;
+    //         return null;
-        return props.previousPage;
+    //     return props.previousPage;
-    };
+    // };
 
     const rightArrowVisible = () => {
         if (props.pageNr === props.pages)
@@ -66,18 +68,18 @@ const Pager = (props) => {
         return theme.colors.dark;
     };
 
-    const rightArrowClickable = () => {
+    // const rightArrowClickable = () => {
-        if (props.pageNr === props.pages)
+    //     if (props.pageNr === props.pages)
-            return null;
+    //         return null;
-        return props.nextPage;
+    //     return props.nextPage;
-    };
+    // };
 
     return (
         <PagerStyle>
-            <LeftArrow as='a' href='#start' src={polygon} onClick={leftArrowClickable()} size='cover'
+            <LeftArrow as='a' href='#start' src={polygon} onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPageNr)} size='cover'
                        backgroundColor={leftArrowVisible()}/>
             <CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/>
-            <RightArrow as='a' href='#start' src={polygon} onClick={rightArrowClickable()} size='cover'
+            <RightArrow as='a' href='#start' src={polygon} onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)} size='cover'
                         backgroundColor={rightArrowVisible()}/>
         </PagerStyle>
     );

src/components/specific_challenge/AllEntries/AllEntries.js

@@ -6,9 +6,7 @@ import { H2 } from '../../../utils/fonts';
 import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
-  RENDER_WHEN,
+  RENDER_WHEN
-  PREVIOUS_PAGE,
-  NEXT_PAGE,
 } from '../../../utils/globals';
 import Loading from '../../generic/Loading';
 import Pager from '../../generic/Pager';
@@ -171,15 +169,16 @@ const AllEntries = (props) => {
               }}
               pageNr={pageNr}
               elements={entries}
+              setPageNr={setPageNr}
               sortByUpdate={sortByUpdate}
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="72px"
               borderRadius="64px"
               pages={CALC_PAGES(entries, 2)}
-              nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
-              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -11,8 +11,7 @@ import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   RENDER_WHEN,
-  PREVIOUS_PAGE,
+
-  NEXT_PAGE,
 } from '../../../utils/globals';
 import Search from '../../generic/Search';
 import Pager from '../../generic/Pager';
@@ -196,11 +195,11 @@ const Leaderboard = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(entries)}
-              nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
-              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(entries)}`}
             />
           </>
@@ -246,15 +245,17 @@ const Leaderboard = (props) => {
               }}
               pageNr={pageNr}
               elements={entries}
+              setPageNr={setPageNr}
               sortByUpdate={sortByUpdate}
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="72px"
               borderRadius="64px"
               pages={CALC_PAGES(entries, 2)}
-              nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
+              
-              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -8,8 +8,6 @@ import {
   EVALUATIONS_FORMAT,
   IS_MOBILE,
   RENDER_WHEN,
-  PREVIOUS_PAGE,
-  NEXT_PAGE,
 } from '../../../utils/globals';
 import Media from 'react-media';
 import theme from '../../../utils/theme';
@@ -146,11 +144,11 @@ const MyEntries = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={myEntries}
+              setPageNr={setPageNr}
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(myEntries)}
-              nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)}
-              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
             />
           </>
@@ -195,12 +193,12 @@ const MyEntries = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={myEntries}
+              setPageNr={setPageNr}
               width="72px"
               mobileRender
               borderRadius="64px"
               pages={CALC_PAGES(myEntries, 2)}
-              nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)}
-              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`}
             />
           </>

src/pages/Challanges/Challenges.js

@@ -10,9 +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,
+import { CALC_PAGES } from '../../utils/globals';
-  PREVIOUS_PAGE,
-  NEXT_PAGE, } from '../../utils/globals';
 import Loading from '../../components/generic/Loading';
 
 const Challenges = () => {
@@ -109,11 +107,11 @@ const Challenges = () => {
           </FlexColumn>
           {!loading ? (
             <Pager
+              elements={challenges}
               pageNr={pageNr}
+              setPageNr={setPageNr}
               pages={CALC_PAGES(challenges)}
               width="48px"
-              nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)}
-              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               borderRadius="64px"
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />
@@ -179,10 +177,10 @@ const Challenges = () => {
           {!loading ? (
             <Pager
               pageNr={pageNr}
+              setPageNr={setPageNr}
+              elements={challenges}
               pages={CALC_PAGES(challenges)}
               borderRadius="64px"
-              nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)}
-              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               width="72px"
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />

src/utils/globals.js

@@ -86,7 +86,7 @@ const RENDER_DEADLINE_TIME = (time) => {
   }
   return '';
 };
-
+/* eslint-disable */
 const NEXT_PAGE = (elements, pageNr, setPageNr) => {
   if (pageNr !== CALC_PAGES(elements ? elements : [])) {
     let newPage = pageNr + 1;
@@ -94,6 +94,7 @@ const NEXT_PAGE = (elements, pageNr, setPageNr) => {
   }
 };
 
+
 const PREVIOUS_PAGE = (pageNr, setPageNr) => {
   if (pageNr !== 1) {
     let newPage = pageNr - 1;