add ordering filter component

app/components/simple-voting/OrderingFilter.js

@@ -0,0 +1,90 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@material-ui/core/ListItem';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+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';
+
+const options = ['Most Votes', 'Most Voters', 'Newest Added', 'Ending Soonest', ]
+const styles = {
+  appBar: {
+    position: 'relative',
+  },
+  flex: {
+    flex: 1,
+  },
+};
+
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
+const ListButton = ({ name }) => (
+  <Fragment>
+    <ListItem button>
+      <ListItemText primary={name} />
+    </ListItem>
+    <Divider />
+  </Fragment>
+)
+
+class OrderingDialog extends PureComponent {
+  state = {
+    open: false,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  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>
+    );
+  }
+}
+
+OrderingDialog.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(OrderingDialog);

app/components/standard/AppBar.js

@@ -8,6 +8,7 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Hidden from '@material-ui/core/Hidden';
+import OrderingFilter from '../simple-voting/OrderingFilter';
 import { VotingContext } from '../../context';
 
 const hasSnt = snt => Number(snt.balance) > 0;
@@ -38,7 +39,7 @@ function ButtonAppBar(props) {
       <div className={classes.root} >
         <AppBar position="static">
           <Toolbar className={classes.toolBar}>
-            <Hidden lgDown>
+            <Hidden mdDown>
               <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={toggleAdmin} />
             </Hidden>
             <Hidden smDown>
@@ -46,7 +47,8 @@ function ButtonAppBar(props) {
                 What should we build next?
               </Typography>
             </Hidden>
-            {snt && <Button disabled={!hasSnt(snt)} variant="outlined" color="inherit" style={{ fontSize: '16px' }} onClick={togglePoll}>{hasSnt(snt) ? 'Add Proposal' : 'Your account has no SNT'}</Button>}
+            {snt && <Button disabled={!hasSnt(snt)} variant="outlined" color="inherit" onClick={togglePoll}>{hasSnt(snt) ? 'Add Proposal' : 'Your account has no SNT'}</Button>}
+            <OrderingFilter />
           </Toolbar>
         </AppBar>
       </div>