From fc578e77fe1f5251ec029072d6378c67ba5ea086 Mon Sep 17 00:00:00 2001 From: Adrian Charkiewicz Date: Fri, 14 Apr 2023 13:35:31 +0200 Subject: [PATCH] pagination refactor --- src/components/generic/Pager.js | 26 ++++++++++--------- .../AllEntries/AllEntries.js | 9 +++---- .../Leaderboard/Leaderboard.js | 13 +++++----- .../specific_challenge/MyEntries/MyEntries.js | 10 +++---- src/pages/Challanges/Challenges.js | 12 ++++----- src/utils/globals.js | 3 ++- 6 files changed, 36 insertions(+), 37 deletions(-) diff --git a/src/components/generic/Pager.js b/src/components/generic/Pager.js index 8c1390c..e014934 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,11 +56,11 @@ const Pager = (props) => { return theme.colors.dark; }; - const leftArrowClickable = () => { - if (props.pageNr === 1) - return null; - return props.previousPage; - }; + // const leftArrowClickable = () => { + // if (props.pageNr === 1) + // return null; + // return props.previousPage; + // }; const rightArrowVisible = () => { if (props.pageNr === props.pages) @@ -66,18 +68,18 @@ const Pager = (props) => { return theme.colors.dark; }; - const rightArrowClickable = () => { - if (props.pageNr === props.pages) - return null; - return props.nextPage; - }; + // 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 45c1a82..86639cf 100644 --- a/src/components/specific_challenge/AllEntries/AllEntries.js +++ b/src/components/specific_challenge/AllEntries/AllEntries.js @@ -6,9 +6,7 @@ import { H2 } from '../../../utils/fonts'; import { CALC_PAGES, EVALUATIONS_FORMAT, - RENDER_WHEN, - PREVIOUS_PAGE, - NEXT_PAGE, + RENDER_WHEN } 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} /> diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js index b31d7db..3974a61 100644 --- a/src/components/specific_challenge/Leaderboard/Leaderboard.js +++ b/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) => { /> @@ -246,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 2f2145a..583ab2a 100644 --- a/src/components/specific_challenge/MyEntries/MyEntries.js +++ b/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) => { /> @@ -195,12 +193,12 @@ const MyEntries = (props) => { /> diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index 37b171f..8c3773c 100644 --- a/src/pages/Challanges/Challenges.js +++ b/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, - PREVIOUS_PAGE, - NEXT_PAGE, } from '../../utils/globals'; +import { CALC_PAGES } from '../../utils/globals'; import Loading from '../../components/generic/Loading'; const Challenges = () => { @@ -109,11 +107,11 @@ const Challenges = () => { {!loading ? ( @@ -179,10 +177,10 @@ const Challenges = () => { {!loading ? ( diff --git a/src/utils/globals.js b/src/utils/globals.js index bd7fca6..798a165 100644 --- a/src/utils/globals.js +++ b/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;