pagination refactor
This commit is contained in:
parent
4145c688e3
commit
fc578e77fe
@ -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>
|
||||
);
|
||||
|
@ -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)}`}
|
||||
/>
|
||||
</>
|
||||
|
@ -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)}`}
|
||||
/>
|
||||
</>
|
||||
|
@ -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)}`}
|
||||
/>
|
||||
</>
|
||||
|
@ -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)}`}
|
||||
/>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user