From 4145c688e3653680b378b2eb5aec6f2813c16169 Mon Sep 17 00:00:00 2001 From: Adrian Charkiewicz Date: Fri, 14 Apr 2023 11:59:56 +0200 Subject: [PATCH 1/4] 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 }; From fc578e77fe1f5251ec029072d6378c67ba5ea086 Mon Sep 17 00:00:00 2001 From: Adrian Charkiewicz Date: Fri, 14 Apr 2023 13:35:31 +0200 Subject: [PATCH 2/4] 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; From e6955508ef26e37e81ca81f6685663e7e1b66282 Mon Sep 17 00:00:00 2001 From: Adrian Charkiewicz Date: Fri, 14 Apr 2023 13:39:14 +0200 Subject: [PATCH 3/4] delete comments --- src/components/generic/Pager.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/generic/Pager.js b/src/components/generic/Pager.js index e014934..8efea74 100644 --- a/src/components/generic/Pager.js +++ b/src/components/generic/Pager.js @@ -56,24 +56,12 @@ 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' From 705a50ec4817a3a57d45a6d6dfddb900488bc2ba Mon Sep 17 00:00:00 2001 From: Adrian Charkiewicz Date: Fri, 14 Apr 2023 13:46:41 +0200 Subject: [PATCH 4/4] delete eslint-disable --- src/utils/globals.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/globals.js b/src/utils/globals.js index 798a165..6c018a3 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -86,7 +86,6 @@ const RENDER_DEADLINE_TIME = (time) => { } return ''; }; -/* eslint-disable */ const NEXT_PAGE = (elements, pageNr, setPageNr) => { if (pageNr !== CALC_PAGES(elements ? elements : [])) { let newPage = pageNr + 1;