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

challenges components reducer and useMemo/useCallback refactor

Browse Source
This commit is contained in:
Mateusz Tylka 2023-05-05 11:20:23 +02:00
parent fb2b9dbe03
commit ab50b57918
14 changed files with 467 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/getChallenges.js
View File

@ -1,11 +1,14 @@
import CHALLENGES_ACTION from '../pages/Challanges/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,
});
}); });
}; };

121
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 ( return props.options.map((option, index) => {
props.options.map((option, index) => { return (
return ( <Filter
<Filter key={`filter_option-${index}`} key={`filter_option-${index}`}
option={props.option} handler={props.handler} option={props.option}
id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}> handler={props.handler}
<Body as='p'> id={`${props.header}-${option.name}-${index}`}
{option.name} name={props.header}
</Body> index={index}
{option.sort ? >
<Svg as='span' src={arrow} rotate={option.rotate ? option.rotate : '0'} <Body as="p">{option.name}</Body>
margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}/> {option.sort && (
: ''} <Svg
</Filter> as="span"
); src={arrow}
}) rotate={option.rotate ? option.rotate : '0'}
); margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}
}; />
)}
</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"
<Media query={theme.mobile}> width="100%"
<Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'> padding="8px"
{props.header} margin={props.margin ? props.margin : '0'}
</Medium> alignmentX={props.alignmentX ? props.alignmentX : 'flex-start'}
</Media> >
<Media query={theme.desktop}> <Media query={theme.mobile}>
<H3 as='legend' textTransform='uppercase' width='100%' <Medium as="legend" textTransform="uppercase" margin="0 0 12px 0">
textAlign={props.textAlign ? props.textAlign : 'left'} margin='0 0 24px 0'> {props.header}
{props.header} </Medium>
</H3> </Media>
</Media> <Media query={theme.desktop}>
<Grid gridTemplateColumns={props.gridTemplateColumns ? props.gridTemplateColumns : 'auto auto'} <H3
gridTemplateRows={props.gridTemplateRows ? props.gridTemplateRows : 'auto'} as="legend"
gridGap='12px' position='relative'> textTransform="uppercase"
{renderFilterOptions()} width="100%"
</Grid> textAlign={props.textAlign ? props.textAlign : 'left'}
</FlexColumn> margin="0 0 24px 0"
); >
{props.header}
</H3>
</Media>
<Grid
gridTemplateColumns={
props.gridTemplateColumns ? props.gridTemplateColumns : 'auto auto'
}
gridTemplateRows={
props.gridTemplateRows ? props.gridTemplateRows : 'auto'
}
gridGap="12px"
position="relative"
>
{renderFilterOptions()}
</Grid>
</FlexColumn>
);
}; };
FilterBy.propTypes = { export default FilterBy;
options: PropsTypes.arrayOf(PropsTypes.shape({
name: PropsTypes.string,
sort: PropsTypes.bool,
rotate: PropsTypes.string
}))
};
FilterBy.defaultProps = {
options: [],
};
export default FilterBy;

187
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/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,89 +27,122 @@ 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 resetHandler = () => { const sortByHandler = (value) => {
props.sortByHandler(0); props.dispatch({ type: CHALLENGES_ACTION.SET_SORT_BY, payload: value });
props.statusHandler(0); };
props.challengeTypeHandler(0);
props.commercialHandler(0);
};
return ( const statusHandler = (value) => {
<> props.dispatch({
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX} type: CHALLENGES_ACTION.SET_STATUS_FILTER,
opacity={props.opacity} onClick={props.toggleFiltersMenu} payload: value,
display={props.transBackDisplay ? props.transBackDisplay : 'flex'}/> });
<FiltersMenuStyle translateX={props.translateX} gap='16px'> };
<FilterBy header='Sort by' options={filterOptions[0]}
handler={props.sortByHandler} option={props.sortBy}/> const challengeTypeHandler = (value) => {
<FilterBy header='Status' options={filterOptions[1]} props.dispatch({
handler={props.statusHandler} option={props.status}/> type: CHALLENGES_ACTION.SET_CHALLENGE_TYPE_FILTER,
<FilterBy header='Challenge type' options={filterOptions[2]} payload: value,
handler={props.challengeTypeHandler} option={props.challengeType}/> });
<FilterBy header='Commercial' options={filterOptions[3]} };
handler={props.commercialHandler} option={props.commercial}/>
<Media query={theme.mobile}> const commercialHandler = (value) => {
<FlexRow gap='16px' margin='14px 0 0 0'> props.dispatch({
<Button width='64px' height='28px' handler={props.toggleFiltersMenu}> type: CHALLENGES_ACTION.SET_COMMERCIAL_FILTER,
Done payload: value,
</Button> });
<Button width='64px' height='28px' backgroundColor={theme.colors.dark} handler={resetHandler}> };
Reset
</Button> const resetHandler = () => {
</FlexRow> sortByHandler(0);
</Media> statusHandler(0);
<Media query={theme.desktop}> challengeTypeHandler(0);
<FlexRow margin='8px 0 0 0' width='94%' alignmentX='flex-start'> commercialHandler(0);
<Button width='72px' height='34px' backgroundColor={theme.colors.green} handler={resetHandler}> };
Reset
</Button> return (
</FlexRow> <>
</Media> <TransBack
</FiltersMenuStyle> backgroundColor={theme.colors.dark03}
</> translateX={props.translateX}
); opacity={props.opacity}
onClick={() =>
props.dispatch({ type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU })
}
display={props.transBackDisplay ? props.transBackDisplay : 'flex'}
/>
<FiltersMenuStyle translateX={props.translateX} gap="16px">
<FilterBy
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}>
<FlexRow gap="16px" margin="14px 0 0 0">
<Button
width="64px"
height="28px"
handler={() =>
props.dispatch({ type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU })
}
>
Done
</Button>
<Button
width="64px"
height="28px"
backgroundColor={theme.colors.dark}
handler={resetHandler}
>
Reset
</Button>
</FlexRow>
</Media>
<Media query={theme.desktop}>
<FlexRow margin="8px 0 0 0" width="94%" alignmentX="flex-start">
<Button
width="72px"
height="34px"
backgroundColor={theme.colors.green}
handler={resetHandler}
>
Reset
</Button>
</FlexRow>
</Media>
</FiltersMenuStyle>
</>
);
}; };
FiltersMenu.propTypes = { export default FiltersMenu;
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;

78
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};
} }
* { * {
@ -34,36 +38,32 @@ 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"
{props.children} borderRadius={props.borderRadius}
</FilterStyle> htmlFor={props.id}
<FlexRow display='none' as='input' type='radio' value={props.index} active={props.option === props.index}
id={props.id} name={props.name} checked={props.option === props.index} >
onChange={(e) => onCheckHandler(e)}/> {props.children}
</> </FilterStyle>
); <FlexRow
display="none"
as="input"
type="radio"
value={props.index}
id={props.id}
name={props.name}
checked={props.option === props.index}
onChange={(e) => onCheckHandler(e)}
/>
</>
);
}; };
Filter.propTypes = { export default Filter;
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;

105
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)}
</PagerStyle> 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>
);
}; };
Pager.propTypes = { export default Pager;
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;

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

@ -4,99 +4,97 @@ import theme from '../../utils/theme';
import getChallenges from '../../api/getChallenges'; import getChallenges from '../../api/getChallenges';
import { CHALLENGES_STATUS_FILTER } from '../../utils/globals'; import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import FiltersMenu from '../../components/challenges_list/FiltersMenu'; import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import statusFilter from './statusFilter'; import statusFilterHandle from './statusFilterHandle';
import ChallengesMobile from './ChallengesMobile'; import ChallengesMobile from './ChallengesMobile';
import ChallengesDesktop from './ChallengesDesktop'; import ChallengesDesktop from './ChallengesDesktop';
import challengeSearchQueryHandler from './challengeSearchQueryHandler'; import challengeSearchQueryHandler from './challengeSearchQueryHandler';
import ChallengesReducer from './ChallengesReducer';
import CHALLENGES_ACTION from './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(
challengeSearchQueryHandler( (event) =>
event, challengeSearchQueryHandler(
challengesFromAPI, event,
setPageNr, state.challengesFromAPI,
setChallenges state.setPageNr,
); dispatch
}; ),
[state.challengesFromAPI, state.setPageNr]
);
const toggleFiltersMenu = () => { const filtersMenuRender = React.useCallback(
let newFiltersMenu = !filtersMenu; (translateX = '0', opacity = '1', transBackDisplay = 'none') => {
setFiltersMenu(newFiltersMenu); return (
}; <FiltersMenu
dispatch={dispatch}
const filtersMenuRender = ( sortBy={state.sortBy}
translateX = '0', status={state.statusFilter}
opacity = '1', challengeTypeFilter={state.challengeTypeFilter}
transBackDisplay = 'none' commercialFilter={state.commercialFilter}
) => { translateX={translateX}
return ( opacity={opacity}
<FiltersMenu transBackDisplay={transBackDisplay}
toggleFiltersMenu={toggleFiltersMenu} />
sortByHandler={setSortBy} );
statusHandler={setStatus} },
challengeTypeHandler={setChallengeType} [
commercialHandler={setCommercial} state.sortBy,
sortBy={sortBy} state.statusFilter,
status={status} state.challengeTypeFilter,
challengeType={challengeType} state.commercialFilter,
commercial={commercial} ]
translateX={translateX} );
opacity={opacity}
transBackDisplay={transBackDisplay}
/>
);
};
return ( return (
<> <>
<Media query={theme.mobile}> <Media query={theme.mobile}>
<ChallengesMobile <ChallengesMobile
dispatch={dispatch}
filtersMenuRender={filtersMenuRender} filtersMenuRender={filtersMenuRender}
filtersMenu={filtersMenu}
searchQueryHandler={searchQueryHandler} searchQueryHandler={searchQueryHandler}
toggleFiltersMenu={toggleFiltersMenu} setPage={setPage}
loading={loading} filtersMenu={state.filtersMenu}
pageNr={pageNr} loading={state.loading}
setPageNr={setPageNr} pageNr={state.pageNr}
challengesFiltered={challengesFiltered} challengesFiltered={state.challengesFiltered}
/> />
</Media> </Media>
<Media query={theme.desktop}> <Media query={theme.desktop}>
<ChallengesDesktop <ChallengesDesktop
dispatch={dispatch}
filtersMenuRender={filtersMenuRender} filtersMenuRender={filtersMenuRender}
filtersMenu={filtersMenu}
searchQueryHandler={searchQueryHandler} searchQueryHandler={searchQueryHandler}
toggleFiltersMenu={toggleFiltersMenu} setPage={setPage}
loading={loading} filtersMenu={state.filtersMenu}
pageNr={pageNr} loading={state.loading}
setPageNr={setPageNr} pageNr={state.pageNr}
challengesFiltered={challengesFiltered} challengesFiltered={state.challengesFiltered}
/> />
</Media> </Media>
</> </>

16
src/pages/Challanges/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;

2
src/pages/Challanges/ChallengesDesktop.js
View File

@ -35,7 +35,7 @@ const ChallengesDesktop = (props) => {
{!props.loading && ( {!props.loading && (
<Pager <Pager
pageNr={props.pageNr} pageNr={props.pageNr}
setPageNr={props.setPageNr} setPage={props.setPage}
elements={props.challengesFiltered} elements={props.challengesFiltered}
pages={CALC_PAGES(props.challengesFiltered)} pages={CALC_PAGES(props.challengesFiltered)}
width="72px" width="72px"

15
src/pages/Challanges/ChallengesMobile.js
View File

@ -7,6 +7,7 @@ import Search from '../../components/generic/Search';
import { CALC_PAGES } from '../../utils/globals'; import { CALC_PAGES } from '../../utils/globals';
import renderChallenges from './renderChallenges'; import renderChallenges from './renderChallenges';
import Loading from '../../components/generic/Loading'; import Loading from '../../components/generic/Loading';
import CHALLENGES_ACTION from './ChallengesActionEnum';
const ChallengesMobile = (props) => { const ChallengesMobile = (props) => {
return ( return (
@ -22,7 +23,11 @@ const ChallengesMobile = (props) => {
<Search <Search
searchQueryHandler={props.searchQueryHandler} searchQueryHandler={props.searchQueryHandler}
filterButton filterButton
toggleFiltersMenu={props.toggleFiltersMenu} toggleFiltersMenu={() =>
props.dispatch({
type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU,
})
}
/> />
<FlexColumn width="100%"> <FlexColumn width="100%">
<Loading visible={props.loading} /> <Loading visible={props.loading} />
@ -31,12 +36,12 @@ const ChallengesMobile = (props) => {
</FlexColumn> </FlexColumn>
{!props.loading && ( {!props.loading && (
<Pager <Pager
elements={props.challengesFiltered}
pageNr={props.pageNr}
setPageNr={props.setPageNr}
pages={CALC_PAGES(props.challengesFiltered)}
width="48px" width="48px"
borderRadius="64px" borderRadius="64px"
elements={props.challengesFiltered}
pageNr={props.pageNr}
setPage={props.setPage}
pages={CALC_PAGES(props.challengesFiltered)}
number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`} number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`}
/> />
)} )}

58
src/pages/Challanges/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;

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

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

2
src/pages/Challanges/renderChallenges.js
View File

@ -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 (

12
src/pages/Challanges/statusFilter.js → src/pages/Challanges/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 './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;

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,
}; };