Compare commits

...

12 Commits

12 changed files with 380 additions and 325 deletions

View File

@ -1,12 +1,11 @@
import { API } from '../utils/globals'; import { API } from '../utils/globals';
const getChallenges = (setDataState, setLoadingState) => { const getChallenges = (setDataStates, setLoadingState) => {
fetch(`${API}/list-challenges`) fetch(`${API}/list-challenges`)
.then(response => response.json()) .then((response) => response.json())
.then(data => { .then((data) => {
setDataState(data); for (let setState of setDataStates) setState(data);
if (setLoadingState) if (setLoadingState) setLoadingState(false);
setLoadingState(false);
}); });
}; };

View File

@ -3,87 +3,90 @@ const filterOptions = [
{ {
name: 'Closing', name: 'Closing',
sort: true, sort: true,
rotate: '' rotate: '0',
}, },
{ {
name: 'Closing', name: 'Closing',
sort: true, sort: true,
rotate: '180deg' rotate: '180deg',
}, },
{ {
name: 'Hotness', name: 'Hotness',
sort: true, sort: true,
rotate: '' rotate: '0',
}, },
{ {
name: 'Hotness', name: 'Hotness',
sort: true, sort: true,
rotate: '180deg' rotate: '180deg',
}, },
{ {
name: 'Reward', name: 'Reward',
sort: true, sort: true,
rotate: '' rotate: '0',
}, },
{ {
name: 'Reward', name: 'Reward',
sort: true, sort: true,
rotate: '180deg' rotate: '180deg',
} },
], [ ],
[
{ {
name: 'Both', name: 'Both',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
{ {
name: 'Completed', name: 'Closed',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
{ {
name: 'Active', name: 'Active',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
], [ ],
[
{ {
name: 'All', name: 'All',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
{ {
name: 'Tabular', name: 'Tabular',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
{ {
name: 'Text', name: 'Text',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
{ {
name: 'Image', name: 'Image',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
], [ ],
[
{ {
name: 'Both', name: 'Both',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
{ {
name: 'Yes', name: 'Yes',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
{ {
name: 'No', name: 'No',
sort: false, sort: false,
rotate: '' rotate: '0',
}, },
] ],
]; ];
export default filterOptions; export default filterOptions;

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

View File

@ -6,8 +6,8 @@ import { H2 } from '../../../utils/fonts';
import { import {
CALC_PAGES, CALC_PAGES,
EVALUATIONS_FORMAT, EVALUATIONS_FORMAT,
IS_MOBILE,
RENDER_WHEN, RENDER_WHEN,
IS_MOBILE,
} from '../../../utils/globals'; } from '../../../utils/globals';
import Loading from '../../generic/Loading'; import Loading from '../../generic/Loading';
import Pager from '../../generic/Pager'; import Pager from '../../generic/Pager';
@ -68,20 +68,6 @@ 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;
switch (elem) { switch (elem) {
@ -182,11 +168,11 @@ const AllEntries = (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)}`}
/> />
</> </>
@ -228,15 +214,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)}`}
/> />
</> </>

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

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

View File

@ -3,23 +3,26 @@ import { Body, H1 } from '../../utils/fonts';
import { FlexColumn, FlexRow, Svg } from '../../utils/containers'; import { FlexColumn, FlexRow, Svg } from '../../utils/containers';
import Search from '../../components/generic/Search'; import Search from '../../components/generic/Search';
import Pager from '../../components/generic/Pager'; import Pager from '../../components/generic/Pager';
import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import challengeSearchQueryHandler from './challengeSearchQueryHandler'; import challengeSearchQueryHandler from './challengeSearchQueryHandler';
import _renderChallenges from './_renderChallenges'; import renderChallenges from './renderChallenges';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import cupIco from '../../assets/cup_ico.svg'; import cupIco from '../../assets/cup_ico.svg';
import getChallenges from '../../api/getChallenges'; import getChallenges from '../../api/getChallenges';
import { CALC_PAGES } from '../../utils/globals'; import { CALC_PAGES, CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import Loading from '../../components/generic/Loading'; import Loading from '../../components/generic/Loading';
import ChallengesStyle from './ChallengesStyle';
import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import statusFilter from './statusFilter';
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
const [challengesFromAPI, setChallengesFromAPI] = React.useState([]); const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
const [challenges, setChallenges] = React.useState([]); const [challenges, setChallenges] = React.useState([]);
const [challengesFiltered, setChallengesFiltered] = React.useState([]);
const [filtersMenu, setFiltersMenu] = React.useState(false); const [filtersMenu, setFiltersMenu] = React.useState(false);
const [sortBy, setSortBy] = React.useState(0); const [sortBy, setSortBy] = React.useState(0);
const [status, setStatus] = React.useState(0); const [status, setStatus] = React.useState(CHALLENGES_STATUS_FILTER.BOTH);
const [challengeType, setChallengeType] = React.useState(0); const [challengeType, setChallengeType] = React.useState(0);
const [commercial, setCommercial] = React.useState(0); const [commercial, setCommercial] = React.useState(0);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
@ -28,25 +31,15 @@ const Challenges = () => {
challengesRequest(); challengesRequest();
}, []); }, []);
React.useEffect(() => {
statusFilter(status, challenges, setChallengesFiltered);
}, [status, challenges]);
const challengesRequest = () => { const challengesRequest = () => {
getChallenges(setChallengesFromAPI); getChallenges(
getChallenges(setChallenges, setLoading); [setChallengesFromAPI, setChallenges, setChallengesFiltered],
}; setLoading
);
const sortByHandler = (value) => {
setSortBy(value);
};
const statusHandler = (value) => {
setStatus(value);
};
const challengeTypeHandler = (value) => {
setChallengeType(value);
};
const commercialHandler = (value) => {
setCommercial(value);
}; };
const searchQueryHandler = (event) => { const searchQueryHandler = (event) => {
@ -58,57 +51,45 @@ 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);
};
const toggleFiltersMenu = () => { const toggleFiltersMenu = () => {
let newFiltersMenu = !filtersMenu; let newFiltersMenu = !filtersMenu;
setFiltersMenu(newFiltersMenu); setFiltersMenu(newFiltersMenu);
}; };
const mobileRender = () => { const filtersMenuRender = (
translateX = '0',
opacity = '1',
transBackDisplay = 'none'
) => {
return ( return (
<>
<FiltersMenu <FiltersMenu
translateX={filtersMenu ? '0' : '100vw'}
opacity={filtersMenu ? '1' : '0'}
toggleFiltersMenu={toggleFiltersMenu} toggleFiltersMenu={toggleFiltersMenu}
sortByHandler={sortByHandler} sortByHandler={setSortBy}
statusHandler={statusHandler} statusHandler={setStatus}
challengeTypeHandler={challengeTypeHandler} challengeTypeHandler={setChallengeType}
commercialHandler={commercialHandler} commercialHandler={setCommercial}
sortBy={sortBy} sortBy={sortBy}
status={status} status={status}
challengeType={challengeType} challengeType={challengeType}
commercial={commercial} commercial={commercial}
translateX={translateX}
opacity={opacity}
transBackDisplay={transBackDisplay}
/> />
<FlexColumn );
as="main" };
alignmentY="flex-start"
width="100%" const mobileRender = () => {
id="start" return (
minHeight="100vh" <>
padding="90px 0 32px 0" {filtersMenuRender(
> filtersMenu ? '0' : '100vw',
<FlexColumn alignmentX="flex-start" width="80%"> filtersMenu ? '1' : '0',
<H1 as="h1" margin="0 0 20px 0"> 'flex'
Challenges )}
</H1> <ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<H1 as="h1">Challenges</H1>
<Search <Search
searchQueryHandler={searchQueryHandler} searchQueryHandler={searchQueryHandler}
filterButton filterButton
@ -116,23 +97,21 @@ const Challenges = () => {
/> />
<FlexColumn width="100%"> <FlexColumn width="100%">
<Loading visible={loading} /> <Loading visible={loading} />
{renderChallenges()} {renderChallenges(pageNr, challengesFiltered)}
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
{!loading ? ( {!loading && (
<Pager <Pager
elements={challengesFiltered}
pageNr={pageNr} pageNr={pageNr}
pages={CALC_PAGES(challenges)} setPageNr={setPageNr}
pages={CALC_PAGES(challengesFiltered)}
width="48px" width="48px"
nextPage={nextPage}
previousPage={previousPage}
borderRadius="64px" borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`} number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
/> />
) : (
''
)} )}
</FlexColumn> </ChallengesStyle>
</> </>
); );
}; };
@ -140,68 +119,37 @@ const Challenges = () => {
const desktopRender = () => { const desktopRender = () => {
return ( return (
<> <>
<FiltersMenu {filtersMenuRender()}
toggleFiltersMenu={toggleFiltersMenu} <ChallengesStyle as="main" id="start">
transBackDisplay="none" <FlexColumn className="ChallengesStyle__page-container">
sortByHandler={sortByHandler} <FlexRow className="ChallengesStyle__page-header-container">
statusHandler={statusHandler} <FlexColumn className="ChallengesStyle__page-header">
challengeTypeHandler={challengeTypeHandler}
commercialHandler={commercialHandler}
sortBy={sortBy}
status={status}
challengeType={challengeType}
commercial={commercial}
/>
<FlexColumn
as="main"
alignmentY="flex-start"
width="100%"
id="start"
minHeight="100vh"
padding="112px 0 82px 310px"
>
<FlexColumn alignmentX="flex-start" width="80%">
<FlexRow width="100%" gap="32px">
<FlexColumn
alignmentX="flex-start"
gap="32px"
width="75%"
maxWidth="720px"
>
<H1 as="h1">Challenges</H1> <H1 as="h1">Challenges</H1>
<Body margin="0 0 12px 0" maxWidth="400px"> <Body className="ChallengesStyle__header-content">
Increase your machine learning skills by competing in our Increase your machine learning skills by competing in our
exciting challenges. exciting challenges.
</Body> </Body>
<Search searchQueryHandler={searchQueryHandler} /> <Search searchQueryHandler={searchQueryHandler} />
</FlexColumn> </FlexColumn>
<Svg <Svg src={cupIco} className="ChallengesStyle__main-image" />
src={cupIco}
size="contain"
width="25%"
height="160px"
backgroundColor={theme.colors.green}
/>
</FlexRow> </FlexRow>
<FlexColumn width="100%"> <FlexColumn width="100%">
<Loading visible={loading} /> <Loading visible={loading} />
{renderChallenges()} {renderChallenges(pageNr, challengesFiltered)}
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
{!loading ? ( {!loading && (
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
pages={CALC_PAGES(challenges)} setPageNr={setPageNr}
borderRadius="64px" elements={challengesFiltered}
nextPage={nextPage} pages={CALC_PAGES(challengesFiltered)}
previousPage={previousPage}
width="72px" width="72px"
number={`${pageNr} / ${CALC_PAGES(challenges)}`} borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
/> />
) : (
''
)} )}
</FlexColumn> </ChallengesStyle>
</> </>
); );
}; };

View File

@ -0,0 +1,50 @@
import styled from 'styled-components';
import { FlexColumn } from '../../utils/containers';
const ChallengesStyle = styled(FlexColumn)`
justify-content: flex-start;
width: 100%;
min-height: 100vh;
padding: 90px 0 32px 0;
@media (min-width: ${({ theme }) => theme.overMobile}) {
padding: 112px 0 82px 310px;
}
.ChallengesStyle__page-container {
align-items: flex-start;
width: 80%;
h1 {
margin: 0 0 20px 0;
@media (min-width: ${({ theme }) => theme.overMobile}) {
margin: 0;
}
}
}
.ChallengesStyle__page-header-container {
width: 100%;
gap: 32px;
}
.ChallengesStyle__page-header {
align-items: flex-start;
gap: 32px;
width: 75%;
max-width: 720px;
}
.ChallengesStyle__header-content {
margin: 0 0 12px 0;
max-width: 600px;
}
.ChallengesStyle__main-image {
width: 25%;
height: 160px;
background-color: ${({ theme }) => theme.colors.green};
mask-size: contain;
}
`;
export default ChallengesStyle;

View File

@ -1,40 +0,0 @@
import {ELEMENTS_PER_PAGE} from '../../utils/globals';
import MiniChallenge from '../../components/challenges_list/MiniChallenge';
import {Grid} from '../../utils/containers';
import styled from 'styled-components';
const ChallengesGrid = styled(Grid)`
margin: 32px 0;
grid-gap: 32px 0;
@media (min-width: 1200px) {
margin: 96px 0;
grid-gap: 64px;
grid-template-columns: 1fr 1fr;
}
@media (min-width: 1600px) {
grid-template-columns: 1fr 1fr 1fr;
}
`;
const _renderChallenges = (pageNr, challenges) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (challenges && challenges !== []) {
return (
<ChallengesGrid margin='32px 0' gridGap='32px 0'>
{challenges.slice(n, n + ELEMENTS_PER_PAGE).map(
({title, type, description, mainMetric, bestScore, baseline, prize, deadline, name}, index) => {
return (
<MiniChallenge key={`challenge-${index}`} title={title} type={type}
description={description} metric={mainMetric} bestScore={bestScore}
baseline={baseline} prize={prize} deadline={deadline} name={name}/>
);
})}
</ChallengesGrid>
);
}
return '';
};
export default _renderChallenges;

View File

@ -0,0 +1,65 @@
import { ELEMENTS_PER_PAGE } from '../../utils/globals';
import MiniChallenge from '../../components/challenges_list/MiniChallenge';
import { Grid } from '../../utils/containers';
import styled from 'styled-components';
const ChallengesGrid = styled(Grid)`
margin: 32px 0;
grid-gap: 32px 0;
@media (min-width: 1200px) {
margin: 96px 0;
grid-gap: 64px;
grid-template-columns: 1fr 1fr;
}
@media (min-width: 1600px) {
grid-template-columns: 1fr 1fr 1fr;
}
`;
const renderChallenges = (pageNr, challenges, statusFilter) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (challenges && challenges !== []) {
return (
<ChallengesGrid margin="32px 0" gridGap="32px 0">
{challenges
.slice(n, n + ELEMENTS_PER_PAGE)
.map(
(
{
title,
type,
description,
mainMetric,
bestScore,
baseline,
prize,
deadline,
name,
},
index
) => {
return (
<MiniChallenge
key={`challenge-${index}`}
title={title}
type={type}
description={description}
metric={mainMetric}
bestScore={bestScore}
baseline={baseline}
prize={prize}
deadline={deadline}
name={name}
/>
);
}
)}
</ChallengesGrid>
);
}
return '';
};
export default renderChallenges;

View File

@ -0,0 +1,55 @@
import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
const dateIsOlder = (newerDate, olderDate) => {
console.log(newerDate);
console.log(olderDate);
if (newerDate.year > olderDate.year) return true;
else if (newerDate.month > olderDate.month) return true;
else if (newerDate.day > olderDate.day) return true;
else return false;
};
const getDeadlineTime = (deadline) => {
if (deadline) {
return {
year: deadline.slice(0, 10).split('-')[0],
month: deadline.slice(0, 10).split('-')[1],
day: deadline.slice(0, 10).split('-')[2],
};
}
};
const statusFilter = (status, challenges, setChallengesFiltered) => {
let result = challenges;
const date = new Date();
const currentDate = {
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDay(),
};
switch (status) {
case CHALLENGES_STATUS_FILTER.CLOSED:
result = challenges.filter((challenge) =>
dateIsOlder(
currentDate,
challenge.deadline ? getDeadlineTime(challenge.deadline) : false
)
);
break;
case CHALLENGES_STATUS_FILTER.ACTIVE:
result = challenges.filter(
(challenge) =>
!dateIsOlder(
currentDate,
challenge.deadline ? getDeadlineTime(challenge.deadline) : false
)
);
break;
default:
result = challenges;
break;
}
setChallengesFiltered(result);
};
export default statusFilter;

View File

@ -42,6 +42,12 @@ const CHALLENGE_SECTIONS = {
SUBMIT: 5, SUBMIT: 5,
}; };
const CHALLENGES_STATUS_FILTER = {
BOTH: 0,
CLOSED: 1,
ACTIVE: 2,
};
const MINI_DESCRIPTION_RENDER = (description) => { const MINI_DESCRIPTION_RENDER = (description) => {
if (description) { if (description) {
if (description.length <= MINI_DESCRIPTION_LENGTH) return description; if (description.length <= MINI_DESCRIPTION_LENGTH) return description;
@ -86,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)}`;
@ -113,6 +133,7 @@ export {
CHALLENGE_SECTIONS, CHALLENGE_SECTIONS,
MENU_CHALLENGE_SECTIONS_NO_LOGIN, MENU_CHALLENGE_SECTIONS_NO_LOGIN,
MENU_CHALLENGE_SECTIONS_WITH_LOGIN, MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
CHALLENGES_STATUS_FILTER,
MINI_DESCRIPTION_RENDER, MINI_DESCRIPTION_RENDER,
RENDER_ICO, RENDER_ICO,
CALC_PAGES, CALC_PAGES,
@ -120,4 +141,6 @@ export {
IS_MOBILE, IS_MOBILE,
RENDER_WHEN, RENDER_WHEN,
EVALUATIONS_FORMAT, EVALUATIONS_FORMAT,
PREVIOUS_PAGE,
NEXT_PAGE
}; };