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

2023-04-14 13:54:45 +02:00 · 2023-04-14 13:54:45 +02:00 · 8677080fb8
commit 8677080fb8
parent 39f1cc68f3 3380703408
6 changed files with 40 additions and 83 deletions
--- a/src/components/generic/Pager.js
+++ b/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>
    );
--- a/src/components/specific_challenge/AllEntries/AllEntries.js
+++ b/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)}`}
            />
          </>
--- a/src/components/specific_challenge/Leaderboard/Leaderboard.js
+++ b/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)}`}
            />
          </>
--- a/src/components/specific_challenge/MyEntries/MyEntries.js
+++ b/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)}`}
            />
          </>
--- a/src/pages/Challanges/Challenges.js
+++ b/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)}`}
            />
          )}
--- a/src/utils/globals.js
+++ b/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
 };