status-im/visual-identity
2
0
Fork 0
mirror of https://github.com/status-im/visual-identity.git synced 2025-02-12 20:46:35 +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 Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide'; 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 = { const styles = {
appBar: { appBar: {
position: 'relative', position: 'relative',
@ -28,10 +30,15 @@ function Transition(props) {
return <Slide direction="up" {...props} />; return <Slide direction="up" {...props} />;
} }
const ListButton = ({ name }) => ( const ListButton = ({ name, setPollOrder, selected }) => (
<Fragment> <Fragment>
<ListItem button> <ListItem button onClick={() => setPollOrder(name)}>
<ListItemText primary={name} /> <Checkbox
checked={selected}
color="primary"
disableRipple
/>
<ListItemText primary={constants[name]} />
</ListItem> </ListItem>
<Divider /> <Divider />
</Fragment> </Fragment>
@ -53,32 +60,36 @@ class OrderingDialog extends PureComponent {
render() { render() {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<div> <VotingContext.Consumer>
<Button color="inherit" variant="outlined" onClick={this.handleClickOpen}>Open Filters</Button> {({ setPollOrder, pollOrder }) =>
<Dialog <div>
fullScreen <Button color="inherit" variant="outlined" onClick={this.handleClickOpen}>Open Filters</Button>
open={this.state.open} <Dialog
onClose={this.handleClose} fullScreen
TransitionComponent={Transition} open={this.state.open}
> onClose={this.handleClose}
<AppBar className={classes.appBar}> TransitionComponent={Transition}
<Toolbar> >
<IconButton color="inherit" onClick={this.handleClose} aria-label="Close"> <AppBar className={classes.appBar}>
<CloseIcon /> <Toolbar>
</IconButton> <IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
<Typography variant="title" color="inherit" className={classes.flex}> <CloseIcon />
close </IconButton>
</Typography> <Typography variant="title" color="inherit" className={classes.flex}>
<Button color="inherit" onClick={this.handleClose}> close
save </Typography>
</Button> <Button color="inherit" onClick={this.handleClose}>
</Toolbar> save
</AppBar> </Button>
<List> </Toolbar>
{options.map((name, i) => <ListButton key={i} name={name} />)} </AppBar>
</List> <List>
</Dialog> {Object.keys(constants).map((name, i) => <ListButton key={i} name={name} setPollOrder={setPollOrder} selected={pollOrder === name}/>)}
</div> </List>
</Dialog>
</div>
}
</VotingContext.Consumer>
); );
} }
} }

8
app/dapp.js
View File

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