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};
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)}/>
</>
);
}

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

@ -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

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

@ -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'>

25
src/pages/Challenges.js
View File

@ -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%'>