From 32b1b48eace2c154268da028e80584949f4d904b Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 29 Jul 2022 09:52:26 +0200
Subject: [PATCH] add reset and done handler to Button on filters menu

---
 src/components/elements/Button.js                |  2 +-
 .../elements/FiltersMenu/FiltersMenu.js          | 16 +++++++++++-----
 src/pages/Challanges/Challenges.js               | 10 +++++-----
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/elements/Button.js b/src/components/elements/Button.js
index 4bdd61a..dadd45c 100644
--- a/src/components/elements/Button.js
+++ b/src/components/elements/Button.js
@@ -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>
diff --git a/src/components/elements/FiltersMenu/FiltersMenu.js b/src/components/elements/FiltersMenu/FiltersMenu.js
index c87813a..8b51350 100644
--- a/src/components/elements/FiltersMenu/FiltersMenu.js
+++ b/src/components/elements/FiltersMenu/FiltersMenu.js
@@ -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>
diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js
index 8014ccf..a63a70b 100644
--- a/src/pages/Challanges/Challenges.js
+++ b/src/pages/Challanges/Challenges.js
@@ -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);