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 13:35:31 +02:00
parent 4145c688e3
commit fc578e77fe
6 changed files with 36 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/generic/Pager.js
View File

@ -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 (
<PagerStyle>
<LeftArrow as='a' href='#start' src={polygon} onClick={leftArrowClickable()} size='cover'
<LeftArrow as='a' href='#start' src={polygon} onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPageNr)} size='cover'
backgroundColor={leftArrowVisible()}/>
<CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/>
<RightArrow as='a' href='#start' src={polygon} onClick={rightArrowClickable()} size='cover'
<RightArrow as='a' href='#start' src={polygon} onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)} size='cover'
backgroundColor={rightArrowVisible()}/>
</PagerStyle>
);

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

@ -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}
/>
<Pager
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="72px"
borderRadius="64px"
pages={CALC_PAGES(entries, 2)}
nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/>
</>

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

@ -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) => {
/>
<Pager
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="48px"
borderRadius="64px"
pages={CALC_PAGES(entries)}
nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
number={`${pageNr} / ${CALC_PAGES(entries)}`}
/>
</>
@ -246,15 +245,17 @@ const Leaderboard = (props) => {
}}
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
sortByUpdate={sortByUpdate}
/>
<Pager
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="72px"
borderRadius="64px"
pages={CALC_PAGES(entries, 2)}
nextPage={NEXT_PAGE(entries, pageNr, setPageNr)}
previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/>
</>

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

@ -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) => {
/>
<Pager
pageNr={pageNr}
elements={myEntries}
setPageNr={setPageNr}
width="48px"
borderRadius="64px"
pages={CALC_PAGES(myEntries)}
nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)}
previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
/>
</>
@ -195,12 +193,12 @@ const MyEntries = (props) => {
/>
<Pager
pageNr={pageNr}
elements={myEntries}
setPageNr={setPageNr}
width="72px"
mobileRender
borderRadius="64px"
pages={CALC_PAGES(myEntries, 2)}
nextPage={NEXT_PAGE(myEntries, pageNr, setPageNr)}
previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`}
/>
</>

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

@ -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 = () => {
</FlexColumn>
{!loading ? (
<Pager
elements={challenges}
pageNr={pageNr}
setPageNr={setPageNr}
pages={CALC_PAGES(challenges)}
width="48px"
nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)}
previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/>
@ -179,10 +177,10 @@ const Challenges = () => {
{!loading ? (
<Pager
pageNr={pageNr}
setPageNr={setPageNr}
elements={challenges}
pages={CALC_PAGES(challenges)}
borderRadius="64px"
nextPage={NEXT_PAGE(challenges, pageNr, setPageNr)}
previousPage={PREVIOUS_PAGE(pageNr, setPageNr)}
width="72px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/>

3
src/utils/globals.js
View File

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