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

Compare commits

base: s444498:ba0cdb944e128127b68fd45d92b25a4a6a58facd
Branches Tags
s444498:master
s444498:submit_tags
..
compare: s444498:6c65af9bd72f0070ed5cc8ed6a1cabcc987ef115
Branches Tags
s444498:master
s444498:submit_tags

6 Commits
ba0cdb944e ... 6c65af9bd7

Author SHA1 Message Date
Mateusz Tylka
6c65af9bd7 challenges files structure refactor 2023-05-05 11:27:23 +02:00
Mateusz Tylka
84160ce939 Merge branch 'master' of https://github.com/mattyl006/gonito 2023-05-05 11:20:32 +02:00
Mateusz Tylka
ab50b57918 challenges components reducer and useMemo/useCallback refactor 2023-05-05 11:20:23 +02:00
Mateusz Tylka
e6d4e1fc98 Merge branch 'master' of https://github.com/mattyl006/gonito 2023-04-26 20:46:31 +02:00
Mateusz Tylka
da775bda3b fix table style with many metrics 2023-04-26 20:46:16 +02:00
Mateusz Tylka
fb2b9dbe03 Challenges refactor, renderMobile and renderDesktop replaced by separated components 2023-04-18 11:49:25 +02:00
16 changed files with 594 additions and 414 deletions
Show Stats Expand all files Collapse all files

9
src/api/getChallenges.js
View File

@ -1,11 +1,14 @@
import CHALLENGES_ACTION from '../pages/Challanges/model/ChallengesActionEnum';
import { API } from '../utils/globals'; import { API } from '../utils/globals';
const getChallenges = (setDataStates, setLoadingState) => { const getChallenges = (dispatch) => {
fetch(`${API}/list-challenges`) fetch(`${API}/list-challenges`)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
for (let setState of setDataStates) setState(data); dispatch({
if (setLoadingState) setLoadingState(false); type: CHALLENGES_ACTION.LOAD_CHALLENGES_FROM_API,
payload: data,
});
}); });
}; };

83
src/components/challenges_list/FilterBy.js
View File

@ -1,66 +1,75 @@
import React from 'react'; import React from 'react';
import {FlexColumn, Grid, Svg} from '../../utils/containers'; import { FlexColumn, Grid, Svg } from '../../utils/containers';
import Filter from '../generic/Filter'; import Filter from '../generic/Filter';
import {Body, H3, Medium} from '../../utils/fonts'; import { Body, H3, Medium } from '../../utils/fonts';
import arrow from '../../assets/arrow.svg'; import arrow from '../../assets/arrow.svg';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import PropsTypes from 'prop-types';
const FilterBy = (props) => { const FilterBy = (props) => {
const renderFilterOptions = () => { const renderFilterOptions = () => {
return props.options.map((option, index) => {
return ( return (
props.options.map((option, index) => { <Filter
return ( key={`filter_option-${index}`}
<Filter key={`filter_option-${index}`} option={props.option}
option={props.option} handler={props.handler} handler={props.handler}
id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}> id={`${props.header}-${option.name}-${index}`}
<Body as='p'> name={props.header}
{option.name} index={index}
</Body> >
{option.sort ? <Body as="p">{option.name}</Body>
<Svg as='span' src={arrow} rotate={option.rotate ? option.rotate : '0'} {option.sort && (
margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}/> <Svg
: ''} as="span"
src={arrow}
rotate={option.rotate ? option.rotate : '0'}
margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}
/>
)}
</Filter> </Filter>
); );
}) });
);
}; };
return ( return (
<FlexColumn as='fieldset' width='100%' padding='8px' margin={props.margin ? props.margin : '0'} <FlexColumn
alignmentX={props.alignmentX ? props.alignmentX : 'flex-start'}> as="fieldset"
width="100%"
padding="8px"
margin={props.margin ? props.margin : '0'}
alignmentX={props.alignmentX ? props.alignmentX : 'flex-start'}
>
<Media query={theme.mobile}> <Media query={theme.mobile}>
<Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'> <Medium as="legend" textTransform="uppercase" margin="0 0 12px 0">
{props.header} {props.header}
</Medium> </Medium>
</Media> </Media>
<Media query={theme.desktop}> <Media query={theme.desktop}>
<H3 as='legend' textTransform='uppercase' width='100%' <H3
textAlign={props.textAlign ? props.textAlign : 'left'} margin='0 0 24px 0'> as="legend"
textTransform="uppercase"
width="100%"
textAlign={props.textAlign ? props.textAlign : 'left'}
margin="0 0 24px 0"
>
{props.header} {props.header}
</H3> </H3>
</Media> </Media>
<Grid gridTemplateColumns={props.gridTemplateColumns ? props.gridTemplateColumns : 'auto auto'} <Grid
gridTemplateRows={props.gridTemplateRows ? props.gridTemplateRows : 'auto'} gridTemplateColumns={
gridGap='12px' position='relative'> props.gridTemplateColumns ? props.gridTemplateColumns : 'auto auto'
}
gridTemplateRows={
props.gridTemplateRows ? props.gridTemplateRows : 'auto'
}
gridGap="12px"
position="relative"
>
{renderFilterOptions()} {renderFilterOptions()}
</Grid> </Grid>
</FlexColumn> </FlexColumn>
); );
}; };
FilterBy.propTypes = {
options: PropsTypes.arrayOf(PropsTypes.shape({
name: PropsTypes.string,
sort: PropsTypes.bool,
rotate: PropsTypes.string
}))
};
FilterBy.defaultProps = {
options: [],
};
export default FilterBy; export default FilterBy;

147
src/components/challenges_list/FiltersMenu/FiltersMenu.js
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import {FlexColumn, FlexRow, TransBack} from '../../../utils/containers'; import { FlexColumn, FlexRow, TransBack } from '../../../utils/containers';
import Button from '../../generic/Button'; import Button from '../../generic/Button';
import theme from '../../../utils/theme'; import theme from '../../../utils/theme';
import styled from 'styled-components'; import styled from 'styled-components';
import FilterBy from '../FilterBy'; import FilterBy from '../FilterBy';
import filterOptions from './filterOptions'; import filterOptions from './filterOptions';
import Media from 'react-media'; import Media from 'react-media';
import PropsTypes from 'prop-types'; import CHALLENGES_ACTION from '../../../pages/Challanges/model/ChallengesActionEnum';
const FiltersMenuStyle = styled(FlexColumn)` const FiltersMenuStyle = styled(FlexColumn)`
position: fixed; position: fixed;
@ -18,8 +18,8 @@ const FiltersMenuStyle = styled(FlexColumn)`
max-height: 650px; max-height: 650px;
justify-content: flex-start; justify-content: flex-start;
padding: 14px 16px 14px 24px; padding: 14px 16px 14px 24px;
box-shadow: ${({theme}) => theme.shadowLeft}; box-shadow: ${({ theme }) => theme.shadowLeft};
background-color: ${({theme}) => theme.colors.white}; background-color: ${({ theme }) => theme.colors.white};
transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out;
z-index: 5; z-index: 5;
@ -27,52 +27,115 @@ const FiltersMenuStyle = styled(FlexColumn)`
display: none; display: none;
} }
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
width: 310px; width: 310px;
max-height: none; max-height: none;
top: 50px; top: 50px;
right: auto; right: auto;
left: 0; left: 0;
box-shadow: ${({theme}) => theme.shadowRight}; box-shadow: ${({ theme }) => theme.shadowRight};
padding: 32px 32px 64px; padding: 32px 32px 64px;
} }
`; `;
const FiltersMenu = (props) => { const FiltersMenu = (props) => {
const sortByHandler = (value) => {
props.dispatch({ type: CHALLENGES_ACTION.SET_SORT_BY, payload: value });
};
const statusHandler = (value) => {
props.dispatch({
type: CHALLENGES_ACTION.SET_STATUS_FILTER,
payload: value,
});
};
const challengeTypeHandler = (value) => {
props.dispatch({
type: CHALLENGES_ACTION.SET_CHALLENGE_TYPE_FILTER,
payload: value,
});
};
const commercialHandler = (value) => {
props.dispatch({
type: CHALLENGES_ACTION.SET_COMMERCIAL_FILTER,
payload: value,
});
};
const resetHandler = () => { const resetHandler = () => {
props.sortByHandler(0); sortByHandler(0);
props.statusHandler(0); statusHandler(0);
props.challengeTypeHandler(0); challengeTypeHandler(0);
props.commercialHandler(0); commercialHandler(0);
}; };
return ( return (
<> <>
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX} <TransBack
opacity={props.opacity} onClick={props.toggleFiltersMenu} backgroundColor={theme.colors.dark03}
display={props.transBackDisplay ? props.transBackDisplay : 'flex'}/> translateX={props.translateX}
<FiltersMenuStyle translateX={props.translateX} gap='16px'> opacity={props.opacity}
<FilterBy header='Sort by' options={filterOptions[0]} onClick={() =>
handler={props.sortByHandler} option={props.sortBy}/> props.dispatch({ type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU })
<FilterBy header='Status' options={filterOptions[1]} }
handler={props.statusHandler} option={props.status}/> display={props.transBackDisplay ? props.transBackDisplay : 'flex'}
<FilterBy header='Challenge type' options={filterOptions[2]} />
handler={props.challengeTypeHandler} option={props.challengeType}/> <FiltersMenuStyle translateX={props.translateX} gap="16px">
<FilterBy header='Commercial' options={filterOptions[3]} <FilterBy
handler={props.commercialHandler} option={props.commercial}/> header="Sort by"
options={filterOptions[0]}
handler={sortByHandler}
option={props.sortBy}
/>
<FilterBy
header="Status"
options={filterOptions[1]}
handler={statusHandler}
option={props.status}
/>
<FilterBy
header="Challenge type"
options={filterOptions[2]}
handler={challengeTypeHandler}
option={props.challengeTypeFilter}
/>
<FilterBy
header="Commercial"
options={filterOptions[3]}
handler={commercialHandler}
option={props.commercialFilter}
/>
<Media query={theme.mobile}> <Media query={theme.mobile}>
<FlexRow gap='16px' margin='14px 0 0 0'> <FlexRow gap="16px" margin="14px 0 0 0">
<Button width='64px' height='28px' handler={props.toggleFiltersMenu}> <Button
width="64px"
height="28px"
handler={() =>
props.dispatch({ type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU })
}
>
Done Done
</Button> </Button>
<Button width='64px' height='28px' backgroundColor={theme.colors.dark} handler={resetHandler}> <Button
width="64px"
height="28px"
backgroundColor={theme.colors.dark}
handler={resetHandler}
>
Reset Reset
</Button> </Button>
</FlexRow> </FlexRow>
</Media> </Media>
<Media query={theme.desktop}> <Media query={theme.desktop}>
<FlexRow margin='8px 0 0 0' width='94%' alignmentX='flex-start'> <FlexRow margin="8px 0 0 0" width="94%" alignmentX="flex-start">
<Button width='72px' height='34px' backgroundColor={theme.colors.green} handler={resetHandler}> <Button
width="72px"
height="34px"
backgroundColor={theme.colors.green}
handler={resetHandler}
>
Reset Reset
</Button> </Button>
</FlexRow> </FlexRow>
@ -82,34 +145,4 @@ const FiltersMenu = (props) => {
); );
}; };
FiltersMenu.propTypes = {
translateX: PropsTypes.string,
opacity: PropsTypes.string,
transBackDisplay: PropsTypes.string,
toggleFiltersMenu: PropsTypes.func,
sortByHandler: PropsTypes.func,
statusHandler: PropsTypes.func,
challengeTypeHandler: PropsTypes.func,
commercialHandler: PropsTypes.func,
sortBy: PropsTypes.number,
status: PropsTypes.number,
challengeType: PropsTypes.number,
commercial: PropsTypes.number,
};
FiltersMenu.defaultProps = {
translateX: '',
opacity: '',
transBackDisplay: 'flex',
toggleFiltersMenu: null,
sortByHandler: null,
statusHandler: null,
challengeTypeHandler: null,
commercialHandler: null,
sortBy: 0,
status: 0,
challengeType: 0,
commercial: 0,
};
export default FiltersMenu; export default FiltersMenu;

60
src/components/generic/Filter.js
View File

@ -1,31 +1,35 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import {FlexRow} from '../../utils/containers'; import { FlexRow } from '../../utils/containers';
import PropsTypes from 'prop-types';
const FilterStyle = styled(FlexRow)` const FilterStyle = styled(FlexRow)`
width: fit-content; width: fit-content;
height: 36px; height: 36px;
padding: 8px 16px; padding: 8px 16px;
border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '32px'}; border-radius: ${({ borderRadius }) =>
border: 1px solid ${({theme}) => theme.colors.dark}; borderRadius ? borderRadius : '32px'};
box-shadow: ${({theme}) => theme.shadow}; border: 1px solid ${({ theme }) => theme.colors.dark};
box-shadow: ${({ theme }) => theme.shadow};
cursor: pointer; cursor: pointer;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; background-color: ${({ theme, active }) =>
active ? theme.colors.dark : theme.colors.white};
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: 2; z-index: 2;
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; color: ${({ theme, active }) =>
active ? theme.colors.white : theme.colors.dark};
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
} }
p { p {
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; color: ${({ theme, active }) =>
active ? theme.colors.white : theme.colors.dark};
} }
span { span {
background-color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; background-color: ${({ theme, active }) =>
active ? theme.colors.white : theme.colors.dark};
} }
* { * {
@ -35,35 +39,31 @@ const FilterStyle = styled(FlexRow)`
const Filter = (props) => { const Filter = (props) => {
const onCheckHandler = (e) => { const onCheckHandler = (e) => {
if (e.target.checked) if (e.target.checked) props.handler(Number(e.target.value));
props.handler(Number(e.target.value));
}; };
return ( return (
<> <>
<FilterStyle as='label' borderRadius={props.borderRadius} htmlFor={props.id} <FilterStyle
active={props.option === props.index}> as="label"
borderRadius={props.borderRadius}
htmlFor={props.id}
active={props.option === props.index}
>
{props.children} {props.children}
</FilterStyle> </FilterStyle>
<FlexRow display='none' as='input' type='radio' value={props.index} <FlexRow
id={props.id} name={props.name} checked={props.option === props.index} display="none"
onChange={(e) => onCheckHandler(e)}/> as="input"
type="radio"
value={props.index}
id={props.id}
name={props.name}
checked={props.option === props.index}
onChange={(e) => onCheckHandler(e)}
/>
</> </>
); );
}; };
Filter.propTypes = {
index: PropsTypes.number.isRequired,
option: PropsTypes.number.isRequired,
handler: PropsTypes.func,
id: PropsTypes.string.isRequired,
name: PropsTypes.string.isRequired,
children: PropsTypes.node,
};
Filter.defaultProps = {
handler: null,
children: '',
};
export default Filter; export default Filter;

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

@ -1,37 +1,35 @@
import React from 'react'; import React from 'react';
import {FlexRow, Svg} from '../../utils/containers'; import { FlexRow, Svg } from '../../utils/containers';
import CircleNumber from './CircleNumber'; import CircleNumber from './CircleNumber';
import polygon from '../../assets/polygon.svg'; 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 { NEXT_PAGE, PREVIOUS_PAGE } from '../../utils/globals'; import { NEXT_PAGE, PREVIOUS_PAGE } from '../../utils/globals';
const PagerStyle = styled(FlexRow)` const PagerStyle = styled(FlexRow)`
gap: 14px; gap: 14px;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
gap: 20px; gap: 20px;
} }
`; `;
const LeftArrow = styled(Svg)` const LeftArrow = styled(Svg)`
background-color: ${({backgroundColor}) => backgroundColor}; background-color: ${({ backgroundColor }) => backgroundColor};
cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'}; cursor: ${({ backgroundColor }) =>
backgroundColor === 'transparent' ? 'auto' : 'pointer'};
width: 10px; width: 10px;
height: 10px; height: 10px;
transition: background-color, transform 0.3s ease-in-out; transition: background-color, transform 0.3s ease-in-out;
&:hover, &:focus { &:hover,
background-color: ${({ &:focus {
theme, background-color: ${({ theme, backgroundColor }) =>
backgroundColor backgroundColor === 'transparent' ? 'transparent' : theme.colors.green};
}) => (backgroundColor === 'transparent') ? 'transparent' : theme.colors.green};
transform: scale(1.1); transform: scale(1.1);
} }
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
@ -40,57 +38,50 @@ const LeftArrow = styled(Svg)`
const RightArrow = styled(LeftArrow)` const RightArrow = styled(LeftArrow)`
transform: rotate(180deg); transform: rotate(180deg);
&:hover, &:focus { &:hover,
background-color: ${({ &:focus {
theme, background-color: ${({ theme, backgroundColor }) =>
backgroundColor backgroundColor === 'transparent' ? 'transparent' : theme.colors.green};
}) => (backgroundColor === 'transparent') ? 'transparent' : theme.colors.green};
transform: scale(1.1) rotate(180deg); transform: scale(1.1) rotate(180deg);
} }
`; `;
const Pager = (props) => { const Pager = (props) => {
const leftArrowVisible = () => { const leftArrowVisible = () => {
if (props.pageNr === 1) if (props.pageNr === 1) return 'transparent';
return 'transparent';
return theme.colors.dark; return theme.colors.dark;
}; };
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;
}; };
return ( return (
<PagerStyle> <PagerStyle>
<LeftArrow as='a' href='#start' src={polygon} onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPageNr)} size='cover' <LeftArrow
backgroundColor={leftArrowVisible()}/> as="a"
<CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/> href="#start"
<RightArrow as='a' href='#start' src={polygon} onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)} size='cover' src={polygon}
backgroundColor={rightArrowVisible()}/> onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPage)}
size="cover"
backgroundColor={leftArrowVisible()}
/>
<CircleNumber
number={props.number}
width={props.width}
borderRadius={props.borderRadius}
/>
<RightArrow
as="a"
href="#start"
src={polygon}
onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPage)}
size="cover"
backgroundColor={rightArrowVisible()}
/>
</PagerStyle> </PagerStyle>
); );
}; };
Pager.propTypes = {
previousPage: PropsTypes.func,
pageNr: PropsTypes.number,
nextPage: PropsTypes.func,
pages: PropsTypes.number,
number: PropsTypes.string,
width: PropsTypes.string,
borderRadius: PropsTypes.string
};
Pager.defaultProps = {
previousPage: null,
pageNr: 1,
nextPage: null,
pages: 1,
number: '',
width: null,
borderRadius: null
};
export default Pager; export default Pager;

15
src/components/specific_challenge/Table.js
View File

@ -7,6 +7,10 @@ import { Body, Medium } from '../../utils/fonts';
import styled from 'styled-components'; import styled from 'styled-components';
import ColumnFilterIcon from './ColumnFilterIcon'; import ColumnFilterIcon from './ColumnFilterIcon';
const TableStyle = styled(FlexColumn)`
overflow-x: ${({metrics}) => metrics > 10 ? 'scroll' : 'auto'};
`;
const Line = styled(FlexRow)` const Line = styled(FlexRow)`
position: absolute; position: absolute;
top: ${({ top }) => (top ? top : 'auto')}; top: ${({ top }) => (top ? top : 'auto')};
@ -105,7 +109,7 @@ const Table = (props) => {
as="td" as="td"
order={props.iterableColumnElement.order} order={props.iterableColumnElement.order}
textAlign={props.iterableColumnElement.align} textAlign={props.iterableColumnElement.align}
minWidth="72px" minWidth="88px"
margin="auto 0" margin="auto 0"
overflowWrap="anywhere" overflowWrap="anywhere"
> >
@ -133,6 +137,7 @@ const Table = (props) => {
order={elemName.order} order={elemName.order}
textAlign={elemName.align} textAlign={elemName.align}
margin="auto 0" margin="auto 0"
minWidth="88px"
overflowWrap="anywhere" overflowWrap="anywhere"
> >
{IS_MOBILE() && ( {IS_MOBILE() && (
@ -153,7 +158,7 @@ const Table = (props) => {
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2); let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2);
if (elementsToMap.length > 0) { if (elementsToMap.length > 0) {
return ( return (
<FlexColumn as="table" margin="32px 0 72px 0" width="100%"> <TableStyle as="table" margin="32px 0 72px 0" width="100%">
<FlexColumn as="tbody" width="100%"> <FlexColumn as="tbody" width="100%">
<Grid <Grid
as="tr" as="tr"
@ -190,7 +195,9 @@ const Table = (props) => {
width={elem === 'when' ? '100%' : 'auto'} width={elem === 'when' ? '100%' : 'auto'}
padding="0 4px 0 0" padding="0 4px 0 0"
overflowWrap="anywhere" overflowWrap="anywhere"
minWidth={elem === 'result' ? '72px' : 'none'} minWidth="72px"
// minWidth={elem === 'result' ? '72px' : 'none'}
> >
{elem.replace('.', ' ')} {elem.replace('.', ' ')}
</Medium> </Medium>
@ -233,7 +240,7 @@ const Table = (props) => {
); );
})} })}
</FlexColumn> </FlexColumn>
</FlexColumn> </TableStyle>
); );
} }
return <Medium margin="72px 0">No results ;c</Medium>; return <Medium margin="72px 0">No results ;c</Medium>;

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

@ -1,163 +1,102 @@
import React from 'react'; import React from 'react';
import { Body, H1 } from '../../utils/fonts';
import { FlexColumn, FlexRow, Svg } from '../../utils/containers';
import Search from '../../components/generic/Search';
import Pager from '../../components/generic/Pager';
import challengeSearchQueryHandler from './challengeSearchQueryHandler';
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 getChallenges from '../../api/getChallenges'; import getChallenges from '../../api/getChallenges';
import { CALC_PAGES, CHALLENGES_STATUS_FILTER } from '../../utils/globals'; import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import Loading from '../../components/generic/Loading';
import ChallengesStyle from './ChallengesStyle';
import FiltersMenu from '../../components/challenges_list/FiltersMenu'; import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import statusFilter from './statusFilter'; import statusFilterHandle from './functions/statusFilterHandle';
import ChallengesMobile from './components/ChallengesMobile';
import ChallengesDesktop from './components/ChallengesDesktop';
import challengeSearchQueryHandler from './functions/challengeSearchQueryHandler';
import ChallengesReducer from './model/ChallengesReducer';
import CHALLENGES_ACTION from './model/ChallengesActionEnum';
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [state, dispatch] = React.useReducer(ChallengesReducer, {
const [challengesFromAPI, setChallengesFromAPI] = React.useState([]); pageNr: 1,
const [challenges, setChallenges] = React.useState([]); challengesFromAPI: [],
const [challengesFiltered, setChallengesFiltered] = React.useState([]); challenges: [],
const [filtersMenu, setFiltersMenu] = React.useState(false); challengesFiltered: [],
const [sortBy, setSortBy] = React.useState(0); filtersMenu: false,
const [status, setStatus] = React.useState(CHALLENGES_STATUS_FILTER.BOTH); sortBy: 0,
const [challengeType, setChallengeType] = React.useState(0); statusFilter: CHALLENGES_STATUS_FILTER.BOTH,
const [commercial, setCommercial] = React.useState(0); challengeTypeFilter: 0,
const [loading, setLoading] = React.useState(true); commercialFilter: 0,
loading: true,
});
React.useEffect(() => { React.useMemo(() => {
challengesRequest(); getChallenges(dispatch);
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
statusFilter(status, challenges, setChallengesFiltered); statusFilterHandle(state.statusFilter, state.challenges, dispatch);
}, [status, challenges]); }, [state.statusFilter, state.challenges]);
const challengesRequest = () => { const setPage = React.useCallback((value) => {
getChallenges( dispatch({ type: CHALLENGES_ACTION.SET_PAGE, payload: value });
[setChallengesFromAPI, setChallenges, setChallengesFiltered], }, []);
setLoading
);
};
const searchQueryHandler = (event) => { const searchQueryHandler = React.useCallback(
(event) =>
challengeSearchQueryHandler( challengeSearchQueryHandler(
event, event,
challengesFromAPI, state.challengesFromAPI,
setPageNr, state.setPageNr,
setChallenges dispatch
),
[state.challengesFromAPI, state.setPageNr]
); );
};
const toggleFiltersMenu = () => { const filtersMenuRender = React.useCallback(
let newFiltersMenu = !filtersMenu; (translateX = '0', opacity = '1', transBackDisplay = 'none') => {
setFiltersMenu(newFiltersMenu);
};
const filtersMenuRender = (
translateX = '0',
opacity = '1',
transBackDisplay = 'none'
) => {
return ( return (
<FiltersMenu <FiltersMenu
toggleFiltersMenu={toggleFiltersMenu} dispatch={dispatch}
sortByHandler={setSortBy} sortBy={state.sortBy}
statusHandler={setStatus} status={state.statusFilter}
challengeTypeHandler={setChallengeType} challengeTypeFilter={state.challengeTypeFilter}
commercialHandler={setCommercial} commercialFilter={state.commercialFilter}
sortBy={sortBy}
status={status}
challengeType={challengeType}
commercial={commercial}
translateX={translateX} translateX={translateX}
opacity={opacity} opacity={opacity}
transBackDisplay={transBackDisplay} transBackDisplay={transBackDisplay}
/> />
); );
}; },
[
state.sortBy,
state.statusFilter,
state.challengeTypeFilter,
state.commercialFilter,
]
);
const mobileRender = () => {
return ( return (
<> <>
{filtersMenuRender( <Media query={theme.mobile}>
filtersMenu ? '0' : '100vw', <ChallengesMobile
filtersMenu ? '1' : '0', dispatch={dispatch}
'flex' filtersMenuRender={filtersMenuRender}
)}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<H1 as="h1">Challenges</H1>
<Search
searchQueryHandler={searchQueryHandler} searchQueryHandler={searchQueryHandler}
filterButton setPage={setPage}
toggleFiltersMenu={toggleFiltersMenu} filtersMenu={state.filtersMenu}
loading={state.loading}
pageNr={state.pageNr}
challengesFiltered={state.challengesFiltered}
/> />
<FlexColumn width="100%"> </Media>
<Loading visible={loading} /> <Media query={theme.desktop}>
{renderChallenges(pageNr, challengesFiltered)} <ChallengesDesktop
</FlexColumn> dispatch={dispatch}
</FlexColumn> filtersMenuRender={filtersMenuRender}
{!loading && ( searchQueryHandler={searchQueryHandler}
<Pager setPage={setPage}
elements={challengesFiltered} filtersMenu={state.filtersMenu}
pageNr={pageNr} loading={state.loading}
setPageNr={setPageNr} pageNr={state.pageNr}
pages={CALC_PAGES(challengesFiltered)} challengesFiltered={state.challengesFiltered}
width="48px"
borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
/> />
)} </Media>
</ChallengesStyle>
</>
);
};
const desktopRender = () => {
return (
<>
{filtersMenuRender()}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<FlexRow className="ChallengesStyle__page-header-container">
<FlexColumn className="ChallengesStyle__page-header">
<H1 as="h1">Challenges</H1>
<Body className="ChallengesStyle__header-content">
Increase your machine learning skills by competing in our
exciting challenges.
</Body>
<Search searchQueryHandler={searchQueryHandler} />
</FlexColumn>
<Svg src={cupIco} className="ChallengesStyle__main-image" />
</FlexRow>
<FlexColumn width="100%">
<Loading visible={loading} />
{renderChallenges(pageNr, challengesFiltered)}
</FlexColumn>
</FlexColumn>
{!loading && (
<Pager
pageNr={pageNr}
setPageNr={setPageNr}
elements={challengesFiltered}
pages={CALC_PAGES(challengesFiltered)}
width="72px"
borderRadius="64px"
number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
/>
)}
</ChallengesStyle>
</>
);
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</> </>
); );
}; };

19
src/pages/Challanges/challengeSearchQueryHandler.js
View File

@ -1,19 +0,0 @@
const challengeSearchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges) => {
let searchQuery = event.target.value;
let challengesToRender = [];
setPageNr(1);
if (searchQuery === '')
setChallenges(challengesFromAPI);
else {
for (let challenge of challengesFromAPI) {
const {title, description, type, mainMetric, bestScore, deadline, baseline, prize} = challenge;
const str = `${title} ${description} ${type} ${mainMetric} ${bestScore}
${deadline ? deadline.slice(11, 16) : ''} ${deadline ? deadline.slice(0, 10) : ''} ${baseline} ${prize}`;
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
challengesToRender.push(challenge);
}
setChallenges(challengesToRender);
}
};
export default challengeSearchQueryHandler;

51
src/pages/Challanges/components/ChallengesDesktop.js Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import ChallengesStyle from '../ChallengesStyle';
import { FlexColumn, FlexRow } from '../../../utils/containers';
import Pager from '../../../components/generic/Pager';
import { H1, Body } from '../../../utils/fonts';
import Search from '../../../components/generic/Search';
import { CALC_PAGES } from '../../../utils/globals';
import renderChallenges from '../functions/renderChallenges';
import Loading from '../../../components/generic/Loading';
import cupIco from '../../../assets/cup_ico.svg';
import { Svg } from '../../../utils/containers';
const ChallengesDesktop = (props) => {
return (
<>
{props.filtersMenuRender()}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<FlexRow className="ChallengesStyle__page-header-container">
<FlexColumn className="ChallengesStyle__page-header">
<H1 as="h1">Challenges</H1>
<Body className="ChallengesStyle__header-content">
Increase your machine learning skills by competing in our
exciting challenges.
</Body>
<Search searchQueryHandler={props.searchQueryHandler} />
</FlexColumn>
<Svg src={cupIco} className="ChallengesStyle__main-image" />
</FlexRow>
<FlexColumn width="100%">
<Loading visible={props.loading} />
{renderChallenges(props.pageNr, props.challengesFiltered)}
</FlexColumn>
</FlexColumn>
{!props.loading && (
<Pager
pageNr={props.pageNr}
setPage={props.setPage}
elements={props.challengesFiltered}
pages={CALC_PAGES(props.challengesFiltered)}
width="72px"
borderRadius="64px"
number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`}
/>
)}
</ChallengesStyle>
</>
);
};
export default ChallengesDesktop;

53
src/pages/Challanges/components/ChallengesMobile.js Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import ChallengesStyle from '../ChallengesStyle';
import { FlexColumn } from '../../../utils/containers';
import Pager from '../../../components/generic/Pager';
import { H1 } from '../../../utils/fonts';
import Search from '../../../components/generic/Search';
import { CALC_PAGES } from '../../../utils/globals';
import renderChallenges from '../functions/renderChallenges';
import Loading from '../../../components/generic/Loading';
import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
const ChallengesMobile = (props) => {
return (
<>
{props.filtersMenuRender(
props.filtersMenu ? '0' : '100vw',
props.filtersMenu ? '1' : '0',
'flex'
)}
<ChallengesStyle as="main" id="start">
<FlexColumn className="ChallengesStyle__page-container">
<H1 as="h1">Challenges</H1>
<Search
searchQueryHandler={props.searchQueryHandler}
filterButton
toggleFiltersMenu={() =>
props.dispatch({
type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU,
})
}
/>
<FlexColumn width="100%">
<Loading visible={props.loading} />
{renderChallenges(props.pageNr, props.challengesFiltered)}
</FlexColumn>
</FlexColumn>
{!props.loading && (
<Pager
width="48px"
borderRadius="64px"
elements={props.challengesFiltered}
pageNr={props.pageNr}
setPage={props.setPage}
pages={CALC_PAGES(props.challengesFiltered)}
number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`}
/>
)}
</ChallengesStyle>
</>
);
};
export default ChallengesMobile;

38
src/pages/Challanges/functions/challengeSearchQueryHandler.js Normal file
View File

@ -0,0 +1,38 @@
import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
const challengeSearchQueryHandler = (event, challengesFromAPI, dispatch) => {
let searchQuery = event.target.value;
let challengesToRender = [];
dispatch({ type: CHALLENGES_ACTION.SET_PAGE, payload: 1 });
if (searchQuery === '')
dispatch({
type: CHALLENGES_ACTION.SET_CHALLENGES,
payload: challengesFromAPI,
});
else {
for (let challenge of challengesFromAPI) {
const {
title,
description,
type,
mainMetric,
bestScore,
deadline,
baseline,
prize,
} = challenge;
const str = `${title} ${description} ${type} ${mainMetric} ${bestScore}
${deadline ? deadline.slice(11, 16) : ''} ${
deadline ? deadline.slice(0, 10) : ''
} ${baseline} ${prize}`;
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
challengesToRender.push(challenge);
}
dispatch({
type: CHALLENGES_ACTION.SET_CHALLENGES,
payload: challengesToRender,
});
}
};
export default challengeSearchQueryHandler;

8
src/pages/Challanges/renderChallenges.js → src/pages/Challanges/functions/renderChallenges.js
View File

@ -1,6 +1,6 @@
import { ELEMENTS_PER_PAGE } from '../../utils/globals'; import { ELEMENTS_PER_PAGE } from '../../../utils/globals';
import MiniChallenge from '../../components/challenges_list/MiniChallenge'; import MiniChallenge from '../../../components/challenges_list/MiniChallenge';
import { Grid } from '../../utils/containers'; import { Grid } from '../../../utils/containers';
import styled from 'styled-components'; import styled from 'styled-components';
const ChallengesGrid = styled(Grid)` const ChallengesGrid = styled(Grid)`
@ -18,7 +18,7 @@ const ChallengesGrid = styled(Grid)`
} }
`; `;
const renderChallenges = (pageNr, challenges, statusFilter) => { const renderChallenges = (pageNr, challenges) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE; const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (challenges && challenges !== []) { if (challenges && challenges !== []) {
return ( return (

14
src/pages/Challanges/statusFilter.js → src/pages/Challanges/functions/statusFilterHandle.js
View File

@ -1,8 +1,7 @@
import { CHALLENGES_STATUS_FILTER } from '../../utils/globals'; import { CHALLENGES_STATUS_FILTER } from '../../../utils/globals';
import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
const dateIsOlder = (newerDate, olderDate) => { const dateIsOlder = (newerDate, olderDate) => {
console.log(newerDate);
console.log(olderDate);
if (newerDate.year > olderDate.year) return true; if (newerDate.year > olderDate.year) return true;
else if (newerDate.month > olderDate.month) return true; else if (newerDate.month > olderDate.month) return true;
else if (newerDate.day > olderDate.day) return true; else if (newerDate.day > olderDate.day) return true;
@ -19,7 +18,7 @@ const getDeadlineTime = (deadline) => {
} }
}; };
const statusFilter = (status, challenges, setChallengesFiltered) => { const statusFilterHandle = (status, challenges, dispatch) => {
let result = challenges; let result = challenges;
const date = new Date(); const date = new Date();
const currentDate = { const currentDate = {
@ -49,7 +48,10 @@ const statusFilter = (status, challenges, setChallengesFiltered) => {
result = challenges; result = challenges;
break; break;
} }
setChallengesFiltered(result); dispatch({
type: CHALLENGES_ACTION.SET_CHALLENGES_FILTERED,
payload: result,
});
}; };
export default statusFilter; export default statusFilterHandle;

16
src/pages/Challanges/model/ChallengesActionEnum.js Normal file
View File

@ -0,0 +1,16 @@
const CHALLENGES_ACTION = {
NEXT_PAGE: 'next_page',
PREVIOUS_PAGE: 'previous_page',
SET_PAGE: 'set_page',
LOAD_CHALLENGES_FROM_API: 'load_challenges_from_api',
SET_CHALLENGES: 'set_challenges',
SET_CHALLENGES_FILTERED: 'set_challenges_filtered',
TOGGLE_FILTERS_MENU: 'toggle_filters_menu',
TOGGLE_LOADING: 'toggle_loading',
SET_SORT_BY: 'set_sort_by',
SET_STATUS_FILTER: 'set_status_filter',
SET_CHALLENGE_TYPE_FILTER: 'set_challenge_type_filter',
SET_COMMERCIAL_FILTER: 'set_commercial_filter',
};
export default CHALLENGES_ACTION;

58
src/pages/Challanges/model/ChallengesReducer.js Normal file
View File

@ -0,0 +1,58 @@
import CHALLENGES_ACTION from './ChallengesActionEnum';
const ChallengesReducer = (state, action) => {
switch (action.type) {
case CHALLENGES_ACTION.NEXT_PAGE:
return { ...state, pageNr: state.pageNr + 1 };
case CHALLENGES_ACTION.PREVIOUS_PAGE:
return { ...state, pageNr: state.pageNr - 1 };
case CHALLENGES_ACTION.SET_PAGE:
return { ...state, pageNr: action.payload };
case CHALLENGES_ACTION.LOAD_CHALLENGES_FROM_API:
return {
...state,
challengesFromAPI: action.payload,
challenges: action.payload,
challengesFiltered: action.payload,
loading: !state.loading,
};
case CHALLENGES_ACTION.SET_CHALLENGES:
return {
...state,
challenges: action.payload,
};
case CHALLENGES_ACTION.SET_CHALLENGES_FILTERED:
return {
...state,
challengesFiltered: action.payload,
};
case CHALLENGES_ACTION.TOGGLE_FILTERS_MENU:
return { ...state, filtersMenu: !state.filtersMenu };
case CHALLENGES_ACTION.TOGGLE_LOADING:
return { ...state, loading: !state.loading };
case CHALLENGES_ACTION.SET_SORT_BY:
return {
...state,
sortBy: action.payload,
};
case CHALLENGES_ACTION.SET_STATUS_FILTER:
return {
...state,
statusFilter: action.payload,
};
case CHALLENGES_ACTION.SET_CHALLENGE_TYPE_FILTER:
return {
...state,
challengeTypeFilter: action.payload,
};
case CHALLENGES_ACTION.SET_COMMERCIAL_FILTER:
return {
...state,
commercialFilter: action.payload,
};
default:
throw new Error('Undefined action in ChallengesReducer!');
}
};
export default ChallengesReducer;

11
src/utils/globals.js
View File

@ -92,18 +92,17 @@ const RENDER_DEADLINE_TIME = (time) => {
} }
return ''; return '';
}; };
const NEXT_PAGE = (elements, pageNr, setPageNr) => { const NEXT_PAGE = (elements, pageNr, setPage) => {
if (pageNr !== CALC_PAGES(elements ? elements : [])) { if (pageNr !== CALC_PAGES(elements ? elements : [])) {
let newPage = pageNr + 1; let newPage = pageNr + 1;
setPageNr(newPage); setPage(newPage);
} }
}; };
const PREVIOUS_PAGE = (pageNr, setPage) => {
const PREVIOUS_PAGE = (pageNr, setPageNr) => {
if (pageNr !== 1) { if (pageNr !== 1) {
let newPage = pageNr - 1; let newPage = pageNr - 1;
setPageNr(newPage); setPage(newPage);
} }
}; };
@ -142,5 +141,5 @@ export {
RENDER_WHEN, RENDER_WHEN,
EVALUATIONS_FORMAT, EVALUATIONS_FORMAT,
PREVIOUS_PAGE, PREVIOUS_PAGE,
NEXT_PAGE NEXT_PAGE,
}; };