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

correct states in Challenges for filters

Browse Source
This commit is contained in:
mattyl006 2022-07-12 10:47:14 +02:00
parent 350ababe5b
commit 775a83d147
4 changed files with 65 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/elements/Filter.js
View File

@ -10,8 +10,15 @@ const FilterStyle = styled(FlexRow)`
border: 1px solid ${({theme}) => theme.colors.dark}; border: 1px solid ${({theme}) => theme.colors.dark};
box-shadow: ${({theme}) => theme.shadow}; box-shadow: ${({theme}) => theme.shadow};
cursor: pointer; cursor: pointer;
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
background-color: ${({theme, active}) => active ? theme.colors.darj : 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; cursor: pointer;
@ -19,10 +26,21 @@ const FilterStyle = styled(FlexRow)`
`; `;
const Filter = (props) => { const Filter = (props) => {
const onCheckHandler = (e) => {
if (e.target.checked)
props.handler(Number(e.target.value));
}
return ( return (
<FilterStyle as='button' active={props.active}> <>
{props.children} <FilterStyle as='label' htmlFor={props.id}
</FilterStyle> 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)}/>
</>
); );
} }

20
src/components/elements/FiltersMenu/FiltersMenu.js
View File

@ -11,12 +11,10 @@ const FiltersMenuStyle = styled(FlexColumn)`
top: 0; top: 0;
right: 0; right: 0;
overflow-y: scroll; overflow-y: scroll;
width: 240px; width: 260px;
height: 100vh; height: 100vh;
justify-content: space-around; max-height: 650px;
@media (max-height: 626px) { justify-content: flex-start;
justify-content: flex-start;
}
padding: 14px 16px 14px 24px; padding: 14px 16px 14px 24px;
box-shadow: ${({theme}) => theme.filtersShadow}; box-shadow: ${({theme}) => theme.filtersShadow};
background-color: ${({theme}) => theme.colors.white}; background-color: ${({theme}) => theme.colors.white};
@ -30,10 +28,14 @@ const FiltersMenu = (props) => {
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX} <TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
opacity={props.opacity} onClick={props.toggleFiltersMenu}/> opacity={props.opacity} onClick={props.toggleFiltersMenu}/>
<FiltersMenuStyle translateX={props.translateX} gap='16px'> <FiltersMenuStyle translateX={props.translateX} gap='16px'>
<FilterBy header='Sort by' options={filterOptions[0]}/> <FilterBy header='Sort by' options={filterOptions[0]}
<FilterBy header='Status' options={filterOptions[1]}/> handler={props.sortByHandler} option={props.sortBy}/>
<FilterBy header='Challenge type' options={filterOptions[2]}/> <FilterBy header='Status' options={filterOptions[1]}
<FilterBy header='Commercial' options={filterOptions[3]}/> 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'> <FlexRow gap='16px' margin='14px 0 0 0'>
<Button as='button' width='64px' height='28px'> <Button as='button' width='64px' height='28px'>
Done Done

12
src/components/sections/FilterBy.js
View File

@ -10,12 +10,14 @@ const FilterBy = (props) => {
return ( return (
props.options.map((option, index) => { props.options.map((option, index) => {
return ( return (
<Filter key={`filter_option-${index}`}> <Filter key={`filter_option-${index}`} active={props.active}
<Body> option={props.option} handler={props.handler}
id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}>
<Body as='p'>
{option.name} {option.name}
</Body> </Body>
{option.sort ? {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'}/> margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}/>
: ''} : ''}
</Filter> </Filter>
@ -25,8 +27,8 @@ const FilterBy = (props) => {
} }
return ( return (
<FlexColumn width='200px' alignmentX='flex-start' gap='12px'> <FlexColumn as='fieldset' width='220px' alignmentX='flex-start'>
<Medium as='p' textTransform='uppercase'> <Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
{props.header} {props.header}
</Medium> </Medium>
<Grid gridTemplateColumns='auto auto' gridGap='12px'> <Grid gridTemplateColumns='auto auto' gridGap='12px'>

25
src/pages/Challenges.js
View File

@ -12,6 +12,26 @@ const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
const [challenges, setChallenges] = React.useState(challengesResp); const [challenges, setChallenges] = React.useState(challengesResp);
const [filtersMenu, setFiltersMenu] = React.useState(false); 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 = () => { const calcPages = () => {
return Math.ceil(challenges.length / ELEMENTS_PER_PAGE); return Math.ceil(challenges.length / ELEMENTS_PER_PAGE);
@ -70,7 +90,10 @@ const Challenges = () => {
return ( return (
<> <>
<FiltersMenu translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'} <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%' <FlexColumn as='main' alignmentY='flex-start' width='100%'
minHeight='100vh' padding='90px 0 32px 0'> minHeight='100vh' padding='90px 0 32px 0'>
<FlexColumn alignmentX='flex-start' width='80%'> <FlexColumn alignmentX='flex-start' width='80%'>