Merge branch 'master' of https://github.com/mattyl006/gonito

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,30 +56,18 @@ const Pager = (props) => {
         return theme.colors.dark;
     };
 
-    const leftArrowClickable = () => {
-        if (props.pageNr === 1)
-            return null;
-        return props.previousPage;
-    };
-
     const rightArrowVisible = () => {
         if (props.pageNr === props.pages)
             return 'transparent';
         return theme.colors.dark;
     };
 
-    const rightArrowClickable = () => {
-        if (props.pageNr === props.pages)
-            return null;
-        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,6 +6,7 @@ import { H2 } from '../../../utils/fonts';
 import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
+  RENDER_WHEN
   IS_MOBILE,
   RENDER_WHEN,
 } from '../../../utils/globals';
@@ -68,19 +69,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;
@@ -228,15 +217,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={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -11,6 +11,7 @@ import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   RENDER_WHEN,
+
 } from '../../../utils/globals';
 import Search from '../../generic/Search';
 import Pager from '../../generic/Pager';
@@ -49,20 +50,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) {
@@ -208,11 +195,11 @@ const Leaderboard = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={entries}
+              setPageNr={setPageNr}
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(entries)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(entries)}`}
             />
           </>
@@ -258,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={nextPage}
-              previousPage={previousPage}
+              
               number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
             />
           </>

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -45,20 +45,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');
@@ -158,11 +144,11 @@ const MyEntries = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={myEntries}
+              setPageNr={setPageNr}
               width="48px"
               borderRadius="64px"
               pages={CALC_PAGES(myEntries)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
             />
           </>
@@ -207,12 +193,12 @@ const MyEntries = (props) => {
             />
             <Pager
               pageNr={pageNr}
+              elements={myEntries}
+              setPageNr={setPageNr}
               width="72px"
               mobileRender
               borderRadius="64px"
               pages={CALC_PAGES(myEntries, 2)}
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`}
             />
           </>

src/pages/Challanges/Challenges.js

@@ -48,20 +48,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 toggleFiltersMenu = () => {
     let newFiltersMenu = !filtersMenu;
     setFiltersMenu(newFiltersMenu);
@@ -125,12 +111,12 @@ const Challenges = () => {
           </FlexColumn>
           {!loading && (
             <Pager
+              elements={challenges}
               pageNr={pageNr}
+              setPageNr={setPageNr}
               pages={CALC_PAGES(challenges)}
               width="48px"
               borderRadius="64px"
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />
           )}
@@ -164,11 +150,11 @@ const Challenges = () => {
           {!loading && (
             <Pager
               pageNr={pageNr}
+              setPageNr={setPageNr}
+              elements={challenges}
               pages={CALC_PAGES(challenges)}
               width="72px"
               borderRadius="64px"
-              nextPage={nextPage}
-              previousPage={previousPage}
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />
           )}

src/utils/globals.js

@@ -92,6 +92,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)}`;
@@ -127,4 +141,6 @@ export {
   IS_MOBILE,
   RENDER_WHEN,
   EVALUATIONS_FORMAT,
+  PREVIOUS_PAGE,
+  NEXT_PAGE
 };