import React from 'react'; import { useEntryContext } from '../context/entry/entryState'; import { sortEntries } from '../context/entry/entryReducer'; import { FormControl, Select, MenuItem, Typography } from '@material-ui/core'; import { useSortStyles } from '../styles/muiStyles'; import SortIcon from '@material-ui/icons/Sort'; const SortMenu = () => { const [{ sortBy }, dispatch] = useEntryContext(); const classes = useSortStyles(); const handleSelectChange = (e) => { dispatch(sortEntries(e.target.value)); }; return ( <div className={classes.root}> <Typography variant="subtitle1" className={classes.label}> <SortIcon className={classes.sortIcon} /> Sort by: </Typography> <form> <FormControl> <Select value={sortBy} displayEmpty onChange={handleSelectChange} className={classes.select} > <MenuItem value="newest">Newest first</MenuItem> <MenuItem value="oldest">Oldest first</MenuItem> <MenuItem value="a-z">Title: A - Z</MenuItem> <MenuItem value="z-a">Title: Z - A</MenuItem> </Select> </FormControl> </form> </div> ); }; export default SortMenu;