From 775a83d147a930b0b2f0b8ba355444ebcd6275e9 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Tue, 12 Jul 2022 10:47:14 +0200
Subject: [PATCH] correct states in Challenges for filters

---
 src/components/elements/Filter.js             | 28 +++++++++++++++----
 .../elements/FiltersMenu/FiltersMenu.js       | 20 +++++++------
 src/components/sections/FilterBy.js           | 12 ++++----
 src/pages/Challenges.js                       | 25 ++++++++++++++++-
 4 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/src/components/elements/Filter.js b/src/components/elements/Filter.js
index 2f5696c..85d9b76 100644
--- a/src/components/elements/Filter.js
+++ b/src/components/elements/Filter.js
@@ -10,8 +10,15 @@ const FilterStyle = styled(FlexRow)`
   border: 1px solid ${({theme}) => theme.colors.dark};
   box-shadow: ${({theme}) => theme.shadow};
   cursor: pointer;
-  color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
-  background-color: ${({theme, active}) => active ? theme.colors.darj : theme.colors.white};
+  background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
+
+  p {
+    color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
+  }
+
+  span {
+    background-color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
+  }
 
   * {
     cursor: pointer;
@@ -19,10 +26,21 @@ const FilterStyle = styled(FlexRow)`
 `;
 
 const Filter = (props) => {
+
+    const onCheckHandler = (e) => {
+        if (e.target.checked)
+            props.handler(Number(e.target.value));
+    }
+
     return (
-        <FilterStyle as='button' active={props.active}>
-            {props.children}
-        </FilterStyle>
+        <>
+            <FilterStyle as='label' 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} onChange={(e) => onCheckHandler(e)}/>
+        </>
     );
 }
 
diff --git a/src/components/elements/FiltersMenu/FiltersMenu.js b/src/components/elements/FiltersMenu/FiltersMenu.js
index 4c5d3a2..2680dc8 100644
--- a/src/components/elements/FiltersMenu/FiltersMenu.js
+++ b/src/components/elements/FiltersMenu/FiltersMenu.js
@@ -11,12 +11,10 @@ const FiltersMenuStyle = styled(FlexColumn)`
   top: 0;
   right: 0;
   overflow-y: scroll;
-  width: 240px;
+  width: 260px;
   height: 100vh;
-  justify-content: space-around;
-  @media (max-height: 626px) {
-    justify-content: flex-start;
-  }
+  max-height: 650px;
+  justify-content: flex-start;
   padding: 14px 16px 14px 24px;
   box-shadow: ${({theme}) => theme.filtersShadow};
   background-color: ${({theme}) => theme.colors.white};
@@ -30,10 +28,14 @@ const FiltersMenu = (props) => {
             <TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
                        opacity={props.opacity} onClick={props.toggleFiltersMenu}/>
             <FiltersMenuStyle translateX={props.translateX} gap='16px'>
-                <FilterBy header='Sort by' options={filterOptions[0]}/>
-                <FilterBy header='Status' options={filterOptions[1]}/>
-                <FilterBy header='Challenge type' options={filterOptions[2]}/>
-                <FilterBy header='Commercial' options={filterOptions[3]}/>
+                <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}/>
                 <FlexRow gap='16px' margin='14px 0 0 0'>
                     <Button as='button' width='64px' height='28px'>
                         Done
diff --git a/src/components/sections/FilterBy.js b/src/components/sections/FilterBy.js
index 8640a13..d5cb815 100644
--- a/src/components/sections/FilterBy.js
+++ b/src/components/sections/FilterBy.js
@@ -10,12 +10,14 @@ const FilterBy = (props) => {
         return (
             props.options.map((option, index) => {
                 return (
-                    <Filter key={`filter_option-${index}`}>
-                        <Body>
+                    <Filter key={`filter_option-${index}`} active={props.active}
+                            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 src={arrow} rotate={option.rotate ? option.rotate : '0'}
+                            <Svg as='span' src={arrow} rotate={option.rotate ? option.rotate : '0'}
                                  margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}/>
                             : ''}
                     </Filter>
@@ -25,8 +27,8 @@ const FilterBy = (props) => {
     }
 
     return (
-        <FlexColumn width='200px' alignmentX='flex-start' gap='12px'>
-            <Medium as='p' textTransform='uppercase'>
+        <FlexColumn as='fieldset' width='220px' alignmentX='flex-start'>
+            <Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
                 {props.header}
             </Medium>
             <Grid gridTemplateColumns='auto auto' gridGap='12px'>
diff --git a/src/pages/Challenges.js b/src/pages/Challenges.js
index f891447..754134a 100644
--- a/src/pages/Challenges.js
+++ b/src/pages/Challenges.js
@@ -12,6 +12,26 @@ const Challenges = () => {
     const [pageNr, setPageNr] = React.useState(1);
     const [challenges, setChallenges] = React.useState(challengesResp);
     const [filtersMenu, setFiltersMenu] = React.useState(false);
+    const [sortBy, setSortBy] = React.useState(0);
+    const [status, setStatus] = React.useState(0);
+    const [challengeType, setChallengeType] = React.useState(0);
+    const [commercial, setCommercial] = React.useState(0);
+
+    const sortByHandler = (value) => {
+        setSortBy(value);
+    }
+
+    const statusHandler = (value) => {
+        setStatus(value)
+    }
+
+    const challengeTypeHandler = (value) => {
+        setChallengeType(value);
+    }
+
+    const commercialHandler = (value) => {
+        setCommercial(value);
+    }
 
     const calcPages = () => {
         return Math.ceil(challenges.length / ELEMENTS_PER_PAGE);
@@ -70,7 +90,10 @@ const Challenges = () => {
     return (
         <>
             <FiltersMenu translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'}
-                         toggleFiltersMenu={toggleFiltersMenu}/>
+                         toggleFiltersMenu={toggleFiltersMenu}
+                         sortByHandler={sortByHandler} statusHandler={statusHandler}
+                         challengeTypeHandler={challengeTypeHandler} commercialHandler={commercialHandler}
+                         sortBy={sortBy} status={status} challengeType={challengeType} commercial={commercial}/>
             <FlexColumn as='main' alignmentY='flex-start' width='100%'
                         minHeight='100vh' padding='90px 0 32px 0'>
                 <FlexColumn alignmentX='flex-start' width='80%'>