diff --git a/src/components/generic/Pager.js b/src/components/generic/Pager.js index 8c1390c..8efea74 100644 --- 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 ( - PREVIOUS_PAGE(props.pageNr, props.setPageNr)} size='cover' backgroundColor={leftArrowVisible()}/> - NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)} size='cover' backgroundColor={rightArrowVisible()}/> ); diff --git a/src/components/specific_challenge/AllEntries/AllEntries.js b/src/components/specific_challenge/AllEntries/AllEntries.js index 1760c10..d5661f0 100644 --- 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} /> diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js index 837f613..8a67b25 100644 --- 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) => { /> @@ -258,15 +245,17 @@ const Leaderboard = (props) => { }} pageNr={pageNr} elements={entries} + setPageNr={setPageNr} sortByUpdate={sortByUpdate} /> diff --git a/src/components/specific_challenge/MyEntries/MyEntries.js b/src/components/specific_challenge/MyEntries/MyEntries.js index 8314ed5..0411c63 100644 --- 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) => { /> @@ -207,12 +193,12 @@ const MyEntries = (props) => { /> diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index eb34e97..6310942 100644 --- 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 = () => { {!loading && ( )} @@ -164,11 +150,11 @@ const Challenges = () => { {!loading && ( )} diff --git a/src/utils/globals.js b/src/utils/globals.js index 83f14a9..7a3af91 100644 --- 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 };