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';
const getChallenges = (setDataStates, setLoadingState) => {
const getChallenges = (dispatch) => {
fetch(`${API}/list-challenges`)
.then((response) => response.json())
.then((data) => {
for (let setState of setDataStates) setState(data);
if (setLoadingState) setLoadingState(false);
dispatch({
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 {FlexColumn, Grid, Svg} from '../../utils/containers';
import { FlexColumn, Grid, Svg } from '../../utils/containers';
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 Media from 'react-media';
import theme from '../../utils/theme';
import PropsTypes from 'prop-types';
const FilterBy = (props) => {
const renderFilterOptions = () => {
return (
props.options.map((option, index) => {
return (
<Filter key={`filter_option-${index}`}
option={props.option} handler={props.handler}
id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}>
<Body as='p'>
{option.name}
</Body>
{option.sort ?
<Svg as='span' src={arrow} rotate={option.rotate ? option.rotate : '0'}
margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}/>
: ''}
</Filter>
);
})
);
};
const renderFilterOptions = () => {
return props.options.map((option, index) => {
return (
<Filter
key={`filter_option-${index}`}
option={props.option}
handler={props.handler}
id={`${props.header}-${option.name}-${index}`}
name={props.header}
index={index}
>
<Body as="p">{option.name}</Body>
{option.sort && (
<Svg
as="span"
src={arrow}
rotate={option.rotate ? option.rotate : '0'}
margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}
/>
)}
</Filter>
);
});
};
return (
<FlexColumn as='fieldset' width='100%' padding='8px' margin={props.margin ? props.margin : '0'}
alignmentX={props.alignmentX ? props.alignmentX : 'flex-start'}>
<Media query={theme.mobile}>
<Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
{props.header}
</Medium>
</Media>
<Media query={theme.desktop}>
<H3 as='legend' textTransform='uppercase' width='100%'
textAlign={props.textAlign ? props.textAlign : 'left'} 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>
);
return (
<FlexColumn
as="fieldset"
width="100%"
padding="8px"
margin={props.margin ? props.margin : '0'}
alignmentX={props.alignmentX ? props.alignmentX : 'flex-start'}
>
<Media query={theme.mobile}>
<Medium as="legend" textTransform="uppercase" margin="0 0 12px 0">
{props.header}
</Medium>
</Media>
<Media query={theme.desktop}>
<H3
as="legend"
textTransform="uppercase"
width="100%"
textAlign={props.textAlign ? props.textAlign : 'left'}
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 = {
options: PropsTypes.arrayOf(PropsTypes.shape({
name: PropsTypes.string,
sort: PropsTypes.bool,
rotate: PropsTypes.string
}))
};
FilterBy.defaultProps = {
options: [],
};
export default FilterBy;
export default FilterBy;

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

@ -1,12 +1,12 @@
import React from 'react';
import {FlexColumn, FlexRow, TransBack} from '../../../utils/containers';
import { FlexColumn, FlexRow, TransBack } from '../../../utils/containers';
import Button from '../../generic/Button';
import theme from '../../../utils/theme';
import styled from 'styled-components';
import FilterBy from '../FilterBy';
import filterOptions from './filterOptions';
import Media from 'react-media';
import PropsTypes from 'prop-types';
import CHALLENGES_ACTION from '../../../pages/Challanges/ChallengesActionEnum';
const FiltersMenuStyle = styled(FlexColumn)`
position: fixed;
@ -18,8 +18,8 @@ const FiltersMenuStyle = styled(FlexColumn)`
max-height: 650px;
justify-content: flex-start;
padding: 14px 16px 14px 24px;
box-shadow: ${({theme}) => theme.shadowLeft};
background-color: ${({theme}) => theme.colors.white};
box-shadow: ${({ theme }) => theme.shadowLeft};
background-color: ${({ theme }) => theme.colors.white};
transition: transform 0.5s ease-in-out;
z-index: 5;
@ -27,89 +27,122 @@ const FiltersMenuStyle = styled(FlexColumn)`
display: none;
}
@media (min-width: ${({theme}) => theme.overMobile}) {
@media (min-width: ${({ theme }) => theme.overMobile}) {
width: 310px;
max-height: none;
top: 50px;
right: auto;
left: 0;
box-shadow: ${({theme}) => theme.shadowRight};
box-shadow: ${({ theme }) => theme.shadowRight};
padding: 32px 32px 64px;
}
`;
const FiltersMenu = (props) => {
const resetHandler = () => {
props.sortByHandler(0);
props.statusHandler(0);
props.challengeTypeHandler(0);
props.commercialHandler(0);
};
const sortByHandler = (value) => {
props.dispatch({ type: CHALLENGES_ACTION.SET_SORT_BY, payload: value });
};
return (
<>
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
opacity={props.opacity} onClick={props.toggleFiltersMenu}
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}/>
<FilterBy header='Status' options={filterOptions[1]}
handler={props.statusHandler} option={props.status}/>
<FilterBy header='Challenge type' options={filterOptions[2]}
handler={props.challengeTypeHandler} option={props.challengeType}/>
<FilterBy header='Commercial' options={filterOptions[3]}
handler={props.commercialHandler} option={props.commercial}/>
<Media query={theme.mobile}>
<FlexRow gap='16px' margin='14px 0 0 0'>
<Button width='64px' height='28px' handler={props.toggleFiltersMenu}>
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>
</>
);
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 = () => {
sortByHandler(0);
statusHandler(0);
challengeTypeHandler(0);
commercialHandler(0);
};
return (
<>
<TransBack
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 = {
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;

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

@ -1,31 +1,35 @@
import React from 'react';
import styled from 'styled-components';
import {FlexRow} from '../../utils/containers';
import PropsTypes from 'prop-types';
import { FlexRow } from '../../utils/containers';
const FilterStyle = styled(FlexRow)`
width: fit-content;
height: 36px;
padding: 8px 16px;
border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '32px'};
border: 1px solid ${({theme}) => theme.colors.dark};
box-shadow: ${({theme}) => theme.shadow};
border-radius: ${({ borderRadius }) =>
borderRadius ? borderRadius : '32px'};
border: 1px solid ${({ theme }) => theme.colors.dark};
box-shadow: ${({ theme }) => theme.shadow};
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;
z-index: 2;
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
color: ${({ theme, active }) =>
active ? theme.colors.white : theme.colors.dark};
&:hover {
transform: scale(1.1);
}
p {
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
color: ${({ theme, active }) =>
active ? theme.colors.white : theme.colors.dark};
}
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 onCheckHandler = (e) => {
if (e.target.checked)
props.handler(Number(e.target.value));
};
const onCheckHandler = (e) => {
if (e.target.checked) props.handler(Number(e.target.value));
};
return (
<>
<FilterStyle as='label' borderRadius={props.borderRadius} htmlFor={props.id}
active={props.option === props.index}>
{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)}/>
</>
);
return (
<>
<FilterStyle
as="label"
borderRadius={props.borderRadius}
htmlFor={props.id}
active={props.option === props.index}
>
{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 = {
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;

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

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

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

@ -4,99 +4,97 @@ import theme from '../../utils/theme';
import getChallenges from '../../api/getChallenges';
import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import statusFilter from './statusFilter';
import statusFilterHandle from './statusFilterHandle';
import ChallengesMobile from './ChallengesMobile';
import ChallengesDesktop from './ChallengesDesktop';
import challengeSearchQueryHandler from './challengeSearchQueryHandler';
import ChallengesReducer from './ChallengesReducer';
import CHALLENGES_ACTION from './ChallengesActionEnum';
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
const [challenges, setChallenges] = React.useState([]);
const [challengesFiltered, setChallengesFiltered] = React.useState([]);
const [filtersMenu, setFiltersMenu] = React.useState(false);
const [sortBy, setSortBy] = React.useState(0);
const [status, setStatus] = React.useState(CHALLENGES_STATUS_FILTER.BOTH);
const [challengeType, setChallengeType] = React.useState(0);
const [commercial, setCommercial] = React.useState(0);
const [loading, setLoading] = React.useState(true);
const [state, dispatch] = React.useReducer(ChallengesReducer, {
pageNr: 1,
challengesFromAPI: [],
challenges: [],
challengesFiltered: [],
filtersMenu: false,
sortBy: 0,
statusFilter: CHALLENGES_STATUS_FILTER.BOTH,
challengeTypeFilter: 0,
commercialFilter: 0,
loading: true,
});
React.useEffect(() => {
challengesRequest();
React.useMemo(() => {
getChallenges(dispatch);
}, []);
React.useEffect(() => {
statusFilter(status, challenges, setChallengesFiltered);
}, [status, challenges]);
statusFilterHandle(state.statusFilter, state.challenges, dispatch);
}, [state.statusFilter, state.challenges]);
const challengesRequest = () => {
getChallenges(
[setChallengesFromAPI, setChallenges, setChallengesFiltered],
setLoading
);
};
const setPage = React.useCallback((value) => {
dispatch({ type: CHALLENGES_ACTION.SET_PAGE, payload: value });
}, []);
const searchQueryHandler = (event) => {
challengeSearchQueryHandler(
event,
challengesFromAPI,
setPageNr,
setChallenges
);
};
const searchQueryHandler = React.useCallback(
(event) =>
challengeSearchQueryHandler(
event,
state.challengesFromAPI,
state.setPageNr,
dispatch
),
[state.challengesFromAPI, state.setPageNr]
);
const toggleFiltersMenu = () => {
let newFiltersMenu = !filtersMenu;
setFiltersMenu(newFiltersMenu);
};
const filtersMenuRender = (
translateX = '0',
opacity = '1',
transBackDisplay = 'none'
) => {
return (
<FiltersMenu
toggleFiltersMenu={toggleFiltersMenu}
sortByHandler={setSortBy}
statusHandler={setStatus}
challengeTypeHandler={setChallengeType}
commercialHandler={setCommercial}
sortBy={sortBy}
status={status}
challengeType={challengeType}
commercial={commercial}
translateX={translateX}
opacity={opacity}
transBackDisplay={transBackDisplay}
/>
);
};
const filtersMenuRender = React.useCallback(
(translateX = '0', opacity = '1', transBackDisplay = 'none') => {
return (
<FiltersMenu
dispatch={dispatch}
sortBy={state.sortBy}
status={state.statusFilter}
challengeTypeFilter={state.challengeTypeFilter}
commercialFilter={state.commercialFilter}
translateX={translateX}
opacity={opacity}
transBackDisplay={transBackDisplay}
/>
);
},
[
state.sortBy,
state.statusFilter,
state.challengeTypeFilter,
state.commercialFilter,
]
);
return (
<>
<Media query={theme.mobile}>
<ChallengesMobile
dispatch={dispatch}
filtersMenuRender={filtersMenuRender}
filtersMenu={filtersMenu}
searchQueryHandler={searchQueryHandler}
toggleFiltersMenu={toggleFiltersMenu}
loading={loading}
pageNr={pageNr}
setPageNr={setPageNr}
challengesFiltered={challengesFiltered}
setPage={setPage}
filtersMenu={state.filtersMenu}
loading={state.loading}
pageNr={state.pageNr}
challengesFiltered={state.challengesFiltered}
/>
</Media>
<Media query={theme.desktop}>
<ChallengesDesktop
dispatch={dispatch}
filtersMenuRender={filtersMenuRender}
filtersMenu={filtersMenu}
searchQueryHandler={searchQueryHandler}
toggleFiltersMenu={toggleFiltersMenu}
loading={loading}
pageNr={pageNr}
setPageNr={setPageNr}
challengesFiltered={challengesFiltered}
setPage={setPage}
filtersMenu={state.filtersMenu}
loading={state.loading}
pageNr={state.pageNr}
challengesFiltered={state.challengesFiltered}
/>
</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 && (
<Pager
pageNr={props.pageNr}
setPageNr={props.setPageNr}
setPage={props.setPage}
elements={props.challengesFiltered}
pages={CALC_PAGES(props.challengesFiltered)}
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 renderChallenges from './renderChallenges';
import Loading from '../../components/generic/Loading';
import CHALLENGES_ACTION from './ChallengesActionEnum';
const ChallengesMobile = (props) => {
return (
@ -22,7 +23,11 @@ const ChallengesMobile = (props) => {
<Search
searchQueryHandler={props.searchQueryHandler}
filterButton
toggleFiltersMenu={props.toggleFiltersMenu}
toggleFiltersMenu={() =>
props.dispatch({
type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU,
})
}
/>
<FlexColumn width="100%">
<Loading visible={props.loading} />
@ -31,12 +36,12 @@ const ChallengesMobile = (props) => {
</FlexColumn>
{!props.loading && (
<Pager
elements={props.challengesFiltered}
pageNr={props.pageNr}
setPageNr={props.setPageNr}
pages={CALC_PAGES(props.challengesFiltered)}
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)}`}
/>
)}

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) => {
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);
import CHALLENGES_ACTION from './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;
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;
if (challenges && challenges !== []) {
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_ACTION from './ChallengesActionEnum';
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;
@ -19,7 +18,7 @@ const getDeadlineTime = (deadline) => {
}
};
const statusFilter = (status, challenges, setChallengesFiltered) => {
const statusFilterHandle = (status, challenges, dispatch) => {
let result = challenges;
const date = new Date();
const currentDate = {
@ -49,7 +48,10 @@ const statusFilter = (status, challenges, setChallengesFiltered) => {
result = challenges;
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 '';
};
const NEXT_PAGE = (elements, pageNr, setPageNr) => {
const NEXT_PAGE = (elements, pageNr, setPage) => {
if (pageNr !== CALC_PAGES(elements ? elements : [])) {
let newPage = pageNr + 1;
setPageNr(newPage);
setPage(newPage);
}
};
const PREVIOUS_PAGE = (pageNr, setPageNr) => {
const PREVIOUS_PAGE = (pageNr, setPage) => {
if (pageNr !== 1) {
let newPage = pageNr - 1;
setPageNr(newPage);
setPage(newPage);
}
};
@ -142,5 +141,5 @@ export {
RENDER_WHEN,
EVALUATIONS_FORMAT,
PREVIOUS_PAGE,
NEXT_PAGE
NEXT_PAGE,
};