1  import React, {Component} from 'react';
  2  import AddIcon from '@material-ui/icons/Add';
  3  import AppBar from '@material-ui/core/AppBar';
  4  import Button from '@material-ui/core/Button';
  5  import Hidden from '@material-ui/core/Hidden';
  6  import Menu from '@material-ui/core/Menu';
  7  import MenuItem from '@material-ui/core/MenuItem';
  8  import MoreVertIcon from '@material-ui/icons/MoreVert';
  9  import PropTypes from 'prop-types';
 10  import Toolbar from '@material-ui/core/Toolbar';
 11  import Typography from '@material-ui/core/Typography';
 12  import {withStyles} from '@material-ui/core/styles';
 13  import SearchBar from './SearchBar';
 14  import logo from '../images/embark-logo.png';
 15  
 16  const styles = {
 17      root: {
 18        flexGrow: 1
 19      },
 20      flex: {
 21        flexGrow: 1
 22      },
 23      logo: {
 24        display: "inline-block",
 25        verticalAlign: "middle",
 26        width: "40px",
 27        marginRight: "10px"
 28      }
 29    };
 30  
 31  const options = [
 32   'Sort by age',
 33   'Sort by rating'
 34  ];
 35  class Header extends Component {
 36  
 37    constructor(props){
 38      super(props);
 39      this.state = {
 40        anchorEl: null,
 41        sortIndex: 0
 42      };
 43    }
 44  
 45    handleClick = event => {
 46      event.preventDefault();
 47      this.setState({anchorEl: event.currentTarget});
 48    };
 49  
 50    handleMenuClick = index => event => {
 51      event.preventDefault();
 52      this.setState({selectedIndex: index, anchorEl: null});
 53      this.props.sortOrder(index === 0 ? 'age' : 'rating');
 54    };
 55  
 56    handleClose = () => {
 57      this.setState({anchorEl: null});
 58    };
 59  
 60    render(){
 61      const {classes, toggleForm, search, onCancelSearch} = this.props;
 62      const {anchorEl, sortIndex} = this.state;
 63      const open = Boolean(anchorEl);
 64  
 65      return (
 66          <div className={classes.root} >
 67            <AppBar position="fixed">
 68              <Toolbar className={classes.toolBar}>
 69                <Hidden xsDown>
 70                  <img src={logo} alt="Logo" className={classes.logo} />
 71                  <Typography variant="h4" color="inherit" className={classes.flex}>
 72                  DReddit
 73                  </Typography>
 74                </Hidden>
 75                <SearchBar
 76                  placeholder="Search..."
 77                  style={{
 78                    margin: '10px 10px',
 79                    maxWidth: 280
 80                  }} 
 81                  onChange={(searchValue) => search(searchValue)}
 82                  onCancelSearch={onCancelSearch}
 83                 />
 84                <Button color="inherit" onClick={toggleForm}>
 85                  <AddIcon />
 86                </Button>
 87                <Button color="inherit" onClick={this.handleClick}>
 88                  <MoreVertIcon />
 89                </Button>
 90                <Menu
 91                  id="long-menu"
 92                  anchorEl={anchorEl}
 93                  open={open}
 94                  onClose={this.handleClose}
 95                  PaperProps={{
 96                    style: {
 97                      width: 200
 98                    }
 99                  }}>
100                  {options.map((option, i) => (
101                    <MenuItem key={option} selected={i === sortIndex} onClick={this.handleMenuClick(i)}>
102                      {option}
103                    </MenuItem>
104                  ))}
105                </Menu>
106              </Toolbar>
107            </AppBar>
108          </div>
109      );
110    }
111  }
112  
113  Header.propTypes = {
114    classes: PropTypes.object.isRequired,
115    toggleForm: PropTypes.func.isRequired,
116    sortOrder: PropTypes.func.isRequired,
117    search: PropTypes.func.isRequired
118  };
119  
120  export default withStyles(styles)(Header);