s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pagination refactor

Browse Source
This commit is contained in:
Adrian Charkiewicz 2023-04-14 11:59:56 +02:00
parent ea76b05610
commit 4145c688e3
5 changed files with 40 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/specific_challenge/AllEntries/AllEntries.js
View File

@ -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)}`}
/>
</>

24
src/components/specific_challenge/Leaderboard/Leaderboard.js
View File

@ -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)}`}
/>
</>

24
src/components/specific_challenge/MyEntries/MyEntries.js
View File

@ -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)}`}
/>
</>

26
src/pages/Challanges/Challenges.js
View File

@ -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)}`}
/>

16
src/utils/globals.js
View File

@ -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
};