pagination refactor

src/components/specific_challenge/AllEntries/AllEntries.js

@@ -7,6 +7,8 @@ import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   RENDER_WHEN,
+  PREVIOUS_PAGE,
+  NEXT_PAGE,
 } from '../../../utils/globals';
 import Loading from '../../generic/Loading';
 import Pager from '../../generic/Pager';
@@ -66,19 +68,7 @@ const AllEntries = (props) => {
     allEntriesSearchQueryHandler(event, entriesAll, 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 sortByUpdate = (elem, i) => {
     let newEntries = entries;
@@ -188,8 +178,8 @@ const AllEntries = (props) => {
               width="72px"
               borderRadius="64px"
               pages={CALC_PAGES(entries, 2)}
-              nextPage={nextPage}
+              nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
-              previousPage={previousPage}
+              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -11,6 +11,8 @@ import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   RENDER_WHEN,
+  PREVIOUS_PAGE,
+  NEXT_PAGE,
 } from '../../../utils/globals';
 import Search from '../../generic/Search';
 import Pager from '../../generic/Pager';
@@ -49,20 +51,6 @@ const Leaderboard = (props) => {
     leaderboardSearchQueryHandler(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 getPossibleMetrics = () => {
     let metrics = [];
     for (let entry of entriesFromApi) {
@@ -211,8 +199,8 @@ const Leaderboard = (props) => {
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(entries)}
-              nextPage={nextPage}
+              nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
-              previousPage={previousPage}
+              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(entries)}`}
             />
           </>
@@ -265,8 +253,8 @@ const Leaderboard = (props) => {
               width="72px"
               borderRadius="64px"
               pages={CALC_PAGES(entries, 2)}
-              nextPage={nextPage}
+              nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
-              previousPage={previousPage}
+              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -8,6 +8,8 @@ import {
   EVALUATIONS_FORMAT,
   IS_MOBILE,
   RENDER_WHEN,
+  PREVIOUS_PAGE,
+  NEXT_PAGE,
 } from '../../../utils/globals';
 import Media from 'react-media';
 import theme from '../../../utils/theme';
@@ -45,20 +47,6 @@ const MyEntries = (props) => {
     return metrics;
   };
 
-  const nextPage = () => {
-    if (pageNr !== CALC_PAGES(myEntries ? myEntries : [])) {
-      let newPage = pageNr + 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const previousPage = () => {
-    if (pageNr !== 1) {
-      let newPage = pageNr - 1;
-      setPageNr(newPage);
-    }
-  };
-
   const getMyEntriesHeader = () => {
     let header = ['#'];
     if (IS_MOBILE()) header.push('when');
@@ -161,8 +149,8 @@ const MyEntries = (props) => {
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(myEntries)}
-              nextPage={nextPage}
+              nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)}
-              previousPage={previousPage}
+              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
             />
           </>
@@ -211,8 +199,8 @@ const MyEntries = (props) => {
               mobileRender
               borderRadius="64px"
               pages={CALC_PAGES(myEntries, 2)}
-              nextPage={nextPage}
+              nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)}
-              previousPage={previousPage}
+              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`}
             />
           </>

src/pages/Challanges/Challenges.js

@@ -10,7 +10,9 @@ 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 } from '../../utils/globals';
+import { CALC_PAGES,
+  PREVIOUS_PAGE,
+  NEXT_PAGE, } from '../../utils/globals';
 import Loading from '../../components/generic/Loading';
 
 const Challenges = () => {
@@ -58,20 +60,6 @@ const Challenges = () => {
     );
   };
 
-  const nextPage = () => {
-    if (pageNr !== CALC_PAGES(challenges)) {
-      let newPage = pageNr + 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const previousPage = () => {
-    if (pageNr !== 1) {
-      let newPage = pageNr - 1;
-      setPageNr(newPage);
-    }
-  };
-
   const renderChallenges = () => {
     return _renderChallenges(pageNr, challenges);
   };
@@ -124,8 +112,8 @@ const Challenges = () => {
               pageNr={pageNr}
               pages={CALC_PAGES(challenges)}
               width="48px"
-              nextPage={nextPage}
+              nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)}
-              previousPage={previousPage}
+              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               borderRadius="64px"
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />
@@ -193,8 +181,8 @@ const Challenges = () => {
               pageNr={pageNr}
               pages={CALC_PAGES(challenges)}
               borderRadius="64px"
-              nextPage={nextPage}
+              nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)}
-              previousPage={previousPage}
+              previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
               width="72px"
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />

src/utils/globals.js

@@ -87,6 +87,20 @@ const RENDER_DEADLINE_TIME = (time) => {
   return '';
 };
 
+const NEXT_PAGE = (elements, pageNr, setPageNr) => {
+  if (pageNr !== CALC_PAGES(elements ? elements : [])) {
+    let newPage = pageNr + 1;
+    setPageNr(newPage);
+  }
+};
+
+const PREVIOUS_PAGE = (pageNr, setPageNr) => {
+  if (pageNr !== 1) {
+    let newPage = pageNr - 1;
+    setPageNr(newPage);
+  }
+};
+
 const RENDER_WHEN = (when) => {
   return `${when.slice(0, 10)} ${when.slice(11, 16)}`;
 };
@@ -120,4 +134,6 @@ export {
   IS_MOBILE,
   RENDER_WHEN,
   EVALUATIONS_FORMAT,
+  PREVIOUS_PAGE,
+  NEXT_PAGE
 };