Compare commits
12 Commits
4d20a97f79
...
c1bb79d0cd
Author | SHA1 | Date | |
---|---|---|---|
c1bb79d0cd | |||
cfc340c4f1 | |||
94292c75e3 | |||
8677080fb8 | |||
39f1cc68f3 | |||
|
3380703408 | ||
|
8b82ddb36c | ||
705a50ec48 | |||
e6955508ef | |||
fc578e77fe | |||
4145c688e3 | |||
dcbbf1ccb6 |
@ -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);
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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;
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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)}`}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
@ -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)}`}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
@ -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)}`}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
50
src/pages/Challanges/ChallengesStyle.js
Normal file
50
src/pages/Challanges/ChallengesStyle.js
Normal 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;
|
@ -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;
|
|
65
src/pages/Challanges/renderChallenges.js
Normal file
65
src/pages/Challanges/renderChallenges.js
Normal 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;
|
55
src/pages/Challanges/statusFilter.js
Normal file
55
src/pages/Challanges/statusFilter.js
Normal 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;
|
@ -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
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user