add reset and done handler to Button on filters menu

This commit is contained in:
mattyl006 2022-07-29 09:52:26 +02:00
parent 4a7fe8f9d5
commit 32b1b48eac
3 changed files with 17 additions and 11 deletions

View File

@ -23,7 +23,7 @@ const ButtonStyle = styled(Medium)`
const Button = (props) => {
return (
<ButtonStyle onClick={props.handler} width={props.width} height={props.height}
<ButtonStyle as='button' onClick={props.handler} width={props.width} height={props.height}
color={props.color} backgroundColor={props.backgroundColor}>
{props.children}
</ButtonStyle>

View File

@ -39,6 +39,14 @@ const FiltersMenuStyle = styled(FlexColumn)`
`;
const FiltersMenu = (props) => {
const resetHandler = () => {
console.log('siema');
props.sortByHandler(0);
props.statusHandler(0);
props.challengeTypeHandler(0);
props.commercialHandler(0);
}
return (
<>
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
@ -55,19 +63,17 @@ const FiltersMenu = (props) => {
handler={props.commercialHandler} option={props.commercial}/>
<Media query={theme.mobile}>
<FlexRow gap='16px' margin='14px 0 0 0'>
<Button as='button' width='64px' height='28px'>
<Button width='64px' height='28px' handler={props.toggleFiltersMenu}>
Done
</Button>
<Button as='button' width='64px' height='28px'
backgroundColor={theme.colors.dark}>
<Button width='64px' height='28px' backgroundColor={theme.colors.dark} handler={resetHandler}>
Reset
</Button>
</FlexRow>
</Media>
<Media query={theme.desktop}>
<FlexRow margin='20px 0 0 0' width='94%' alignmentX='flex-start'>
<Button as='button' width='72px' height='34px'
backgroundColor={theme.colors.green}>
<Button width='72px' height='34px' backgroundColor={theme.colors.green} handler={resetHandler}>
Reset
</Button>
</FlexRow>

View File

@ -31,23 +31,23 @@ const Challenges = () => {
const challengesRequest = () => {
getChallenges(setChallengesFromAPI);
getChallenges(setChallenges, setLoading);
}
};
const sortByHandler = (value) => {
setSortBy(value);
}
};
const statusHandler = (value) => {
setStatus(value)
}
};
const challengeTypeHandler = (value) => {
setChallengeType(value);
}
};
const commercialHandler = (value) => {
setCommercial(value);
}
};
const searchQueryHandler = (event) => {
_searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);