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

Merge branch 'master' of https://github.com/mattyl006/gonito

Browse Source
This commit is contained in:
Mateusz Tylka 2023-04-14 13:54:45 +02:00
commit 8677080fb8
6 changed files with 40 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,8 @@ import polygon from '../../assets/polygon.svg';
import styled from 'styled-components'; import styled from 'styled-components';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import PropsTypes from 'prop-types'; import PropsTypes from 'prop-types';
import { NEXT_PAGE, PREVIOUS_PAGE } from '../../utils/globals';
const PagerStyle = styled(FlexRow)` const PagerStyle = styled(FlexRow)`
gap: 14px; gap: 14px;
@ -54,30 +56,18 @@ const Pager = (props) => {
return theme.colors.dark; return theme.colors.dark;
}; };
const leftArrowClickable = () => {
if (props.pageNr === 1)
return null;
return props.previousPage;
};
const rightArrowVisible = () => { const rightArrowVisible = () => {
if (props.pageNr === props.pages) if (props.pageNr === props.pages)
return 'transparent'; return 'transparent';
return theme.colors.dark; return theme.colors.dark;
}; };
const rightArrowClickable = () => {
if (props.pageNr === props.pages)
return null;
return props.nextPage;
};
return ( return (
<PagerStyle> <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()}/> backgroundColor={leftArrowVisible()}/>
<CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/> <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()}/> backgroundColor={rightArrowVisible()}/>
</PagerStyle> </PagerStyle>
); );

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

@ -6,6 +6,7 @@ import { H2 } from '../../../utils/fonts';
import { import {
CALC_PAGES, CALC_PAGES,
EVALUATIONS_FORMAT, EVALUATIONS_FORMAT,
RENDER_WHEN
IS_MOBILE, IS_MOBILE,
RENDER_WHEN, RENDER_WHEN,
} from '../../../utils/globals'; } from '../../../utils/globals';
@ -68,19 +69,7 @@ const AllEntries = (props) => {
allEntriesSearchQueryHandler(event, entriesAll, setPageNr, setEntries); 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) => { const sortByUpdate = (elem, i) => {
let newEntries = entries; let newEntries = entries;
@ -228,15 +217,16 @@ const AllEntries = (props) => {
}} }}
pageNr={pageNr} pageNr={pageNr}
elements={entries} elements={entries}
setPageNr={setPageNr}
sortByUpdate={sortByUpdate} sortByUpdate={sortByUpdate}
/> />
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="72px" width="72px"
borderRadius="64px" borderRadius="64px"
pages={CALC_PAGES(entries, 2)} pages={CALC_PAGES(entries, 2)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`} number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/> />
</> </>

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

@ -11,6 +11,7 @@ import {
CALC_PAGES, CALC_PAGES,
EVALUATIONS_FORMAT, EVALUATIONS_FORMAT,
RENDER_WHEN, RENDER_WHEN,
} from '../../../utils/globals'; } from '../../../utils/globals';
import Search from '../../generic/Search'; import Search from '../../generic/Search';
import Pager from '../../generic/Pager'; import Pager from '../../generic/Pager';
@ -49,20 +50,6 @@ const Leaderboard = (props) => {
leaderboardSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries); 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 = () => { const getPossibleMetrics = () => {
let metrics = []; let metrics = [];
for (let entry of entriesFromApi) { for (let entry of entriesFromApi) {
@ -208,11 +195,11 @@ const Leaderboard = (props) => {
/> />
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="48px" width="48px"
borderRadius="64px" borderRadius="64px"
pages={CALC_PAGES(entries)} pages={CALC_PAGES(entries)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries)}`} number={`${pageNr} / ${CALC_PAGES(entries)}`}
/> />
</> </>
@ -258,15 +245,17 @@ const Leaderboard = (props) => {
}} }}
pageNr={pageNr} pageNr={pageNr}
elements={entries} elements={entries}
setPageNr={setPageNr}
sortByUpdate={sortByUpdate} sortByUpdate={sortByUpdate}
/> />
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="72px" width="72px"
borderRadius="64px" borderRadius="64px"
pages={CALC_PAGES(entries, 2)} pages={CALC_PAGES(entries, 2)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`} number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/> />
</> </>

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

@ -45,20 +45,6 @@ const MyEntries = (props) => {
return metrics; 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 = () => { const getMyEntriesHeader = () => {
let header = ['#']; let header = ['#'];
if (IS_MOBILE()) header.push('when'); if (IS_MOBILE()) header.push('when');
@ -158,11 +144,11 @@ const MyEntries = (props) => {
/> />
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
elements={myEntries}
setPageNr={setPageNr}
width="48px" width="48px"
borderRadius="64px" borderRadius="64px"
pages={CALC_PAGES(myEntries)} pages={CALC_PAGES(myEntries)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(myEntries)}`} number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
/> />
</> </>
@ -207,12 +193,12 @@ const MyEntries = (props) => {
/> />
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
elements={myEntries}
setPageNr={setPageNr}
width="72px" width="72px"
mobileRender mobileRender
borderRadius="64px" borderRadius="64px"
pages={CALC_PAGES(myEntries, 2)} pages={CALC_PAGES(myEntries, 2)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`} number={`${pageNr} / ${CALC_PAGES(myEntries, 2)}`}
/> />
</> </>

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

@ -48,20 +48,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 toggleFiltersMenu = () => { const toggleFiltersMenu = () => {
let newFiltersMenu = !filtersMenu; let newFiltersMenu = !filtersMenu;
setFiltersMenu(newFiltersMenu); setFiltersMenu(newFiltersMenu);
@ -125,12 +111,12 @@ const Challenges = () => {
</FlexColumn> </FlexColumn>
{!loading && ( {!loading && (
<Pager <Pager
elements={challenges}
pageNr={pageNr} pageNr={pageNr}
setPageNr={setPageNr}
pages={CALC_PAGES(challenges)} pages={CALC_PAGES(challenges)}
width="48px" width="48px"
borderRadius="64px" borderRadius="64px"
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(challenges)}`} number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/> />
)} )}
@ -164,11 +150,11 @@ const Challenges = () => {
{!loading && ( {!loading && (
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
setPageNr={setPageNr}
elements={challenges}
pages={CALC_PAGES(challenges)} pages={CALC_PAGES(challenges)}
width="72px" width="72px"
borderRadius="64px" borderRadius="64px"
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(challenges)}`} number={`${pageNr} / ${CALC_PAGES(challenges)}`}
/> />
)} )}

16
src/utils/globals.js
View File

@ -92,6 +92,20 @@ const RENDER_DEADLINE_TIME = (time) => {
} }
return ''; 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) => { const RENDER_WHEN = (when) => {
return `${when.slice(0, 10)} ${when.slice(11, 16)}`; return `${when.slice(0, 10)} ${when.slice(11, 16)}`;
@ -127,4 +141,6 @@ export {
IS_MOBILE, IS_MOBILE,
RENDER_WHEN, RENDER_WHEN,
EVALUATIONS_FORMAT, EVALUATIONS_FORMAT,
PREVIOUS_PAGE,
NEXT_PAGE
}; };