From 4145c688e3653680b378b2eb5aec6f2813c16169 Mon Sep 17 00:00:00 2001 From: Adrian Charkiewicz Date: Fri, 14 Apr 2023 11:59:56 +0200 Subject: [PATCH] pagination refactor --- .../AllEntries/AllEntries.js | 20 ++++---------- .../Leaderboard/Leaderboard.js | 24 +++++------------ .../specific_challenge/MyEntries/MyEntries.js | 24 +++++------------ src/pages/Challanges/Challenges.js | 26 +++++-------------- src/utils/globals.js | 16 ++++++++++++ 5 files changed, 40 insertions(+), 70 deletions(-) diff --git a/src/components/specific_challenge/AllEntries/AllEntries.js b/src/components/specific_challenge/AllEntries/AllEntries.js index 5050fc1..45c1a82 100644 --- a/src/components/specific_challenge/AllEntries/AllEntries.js +++ b/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} - previousPage={previousPage} + nextPage={NEXT_PAGE(entries, pageNr, setPageNr)} + previousPage={PREVIOUS_PAGE(pageNr, setPageNr)} number={`${pageNr} / ${CALC_PAGES(entries, 2)}`} /> diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js index 3309153..b31d7db 100644 --- a/src/components/specific_challenge/Leaderboard/Leaderboard.js +++ b/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} - previousPage={previousPage} + nextPage={NEXT_PAGE(entries, pageNr, setPageNr)} + 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} - previousPage={previousPage} + nextPage={NEXT_PAGE(entries, pageNr, setPageNr)} + previousPage={PREVIOUS_PAGE(pageNr, setPageNr)} number={`${pageNr} / ${CALC_PAGES(entries, 2)}`} /> diff --git a/src/components/specific_challenge/MyEntries/MyEntries.js b/src/components/specific_challenge/MyEntries/MyEntries.js index 2398b73..2f2145a 100644 --- a/src/components/specific_challenge/MyEntries/MyEntries.js +++ b/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} - previousPage={previousPage} + nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)} + 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} - previousPage={previousPage} + nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)} + previousPage={PREVIOUS_PAGE(pageNr, setPageNr)} number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`} /> diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index b9d63ad..37b171f 100644 --- a/src/pages/Challanges/Challenges.js +++ b/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} - previousPage={previousPage} + nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)} + 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} - previousPage={previousPage} + nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)} + previousPage={PREVIOUS_PAGE(pageNr, setPageNr)} width="72px" number={`${pageNr} / ${CALC_PAGES(challenges)}`} /> diff --git a/src/utils/globals.js b/src/utils/globals.js index 019b8f4..bd7fca6 100644 --- a/src/utils/globals.js +++ b/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 };