status-im/visual-identity
2
0
Fork 0
mirror of https://github.com/status-im/visual-identity.git synced 2025-02-08 10:44:33 +00:00
Code Issues Projects Releases Wiki Activity

set filter for global state

Browse Source
This commit is contained in:
Barry Gitarts 2018-06-29 13:51:49 -04:00
parent c9c5ce7d4a
commit c8b22e737d
2 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
app/components/simple-voting/OrderingFilter.js
View File

@ -13,8 +13,10 @@ import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
import Checkbox from '@material-ui/core/Checkbox';
import { VotingContext } from '../../context';
const options = ['Most Votes', 'Most Voters', 'Newest Added', 'Ending Soonest', ]
export const constants = { MOST_VOTES: 'Most Votes', MOST_VOTERS: 'Most Voters', NEWEST_ADDED: 'Newest Added', ENDING_SOONEST: 'Ending Soonest' };
const styles = {
appBar: {
position: 'relative',
@ -28,10 +30,15 @@ function Transition(props) {
return <Slide direction="up" {...props} />;
}
const ListButton = ({ name }) => (
const ListButton = ({ name, setPollOrder, selected }) => (
<Fragment>
<ListItem button>
<ListItemText primary={name} />
<ListItem button onClick={() => setPollOrder(name)}>
<Checkbox
checked={selected}
color="primary"
disableRipple
/>
<ListItemText primary={constants[name]} />
</ListItem>
<Divider />
</Fragment>
@ -53,32 +60,36 @@ class OrderingDialog extends PureComponent {
render() {
const { classes } = this.props;
return (
<div>
<Button color="inherit" variant="outlined" onClick={this.handleClickOpen}>Open Filters</Button>
<Dialog
fullScreen
open={this.state.open}
onClose={this.handleClose}
TransitionComponent={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
<CloseIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
close
</Typography>
<Button color="inherit" onClick={this.handleClose}>
save
</Button>
</Toolbar>
</AppBar>
<List>
{options.map((name, i) => <ListButton key={i} name={name} />)}
</List>
</Dialog>
</div>
<VotingContext.Consumer>
{({ setPollOrder, pollOrder }) =>
<div>
<Button color="inherit" variant="outlined" onClick={this.handleClickOpen}>Open Filters</Button>
<Dialog
fullScreen
open={this.state.open}
onClose={this.handleClose}
TransitionComponent={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
<CloseIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
close
</Typography>
<Button color="inherit" onClick={this.handleClose}>
save
</Button>
</Toolbar>
</AppBar>
<List>
{Object.keys(constants).map((name, i) => <ListButton key={i} name={name} setPollOrder={setPollOrder} selected={pollOrder === name}/>)}
</List>
</Dialog>
</div>
}
</VotingContext.Consumer>
);
}
}

8
app/dapp.js
View File

@ -63,6 +63,8 @@ class App extends React.Component {
this.setState({ rawPolls: newPolls });
}
setPollOrder = pollOrder => { this.setState({ pollOrder }) }
_renderStatus(title, available) {
let className = available ? 'pull-right status-online' : 'pull-right status-offline';
return <Fragment>
@ -72,10 +74,10 @@ class App extends React.Component {
}
render(){
const { admin, rawPolls, snt } = this.state;
const { _getPolls, updatePoll } = this;
const { admin } = this.state;
const { _getPolls, updatePoll, setPollOrder } = this;
const toggleAdmin = () => this.setState({ admin: true });
const votingContext = { getPolls: _getPolls, rawPolls, toggleAdmin, updatePoll, snt };
const votingContext = { getPolls: _getPolls, toggleAdmin, updatePoll, setPollOrder, ...this.state };
return (
<VotingContext.Provider value={votingContext}>
<Fragment>