in amplify-video-frontend/src/App.js [195:241]
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<VideocamIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Video Streaming
</Typography>
<Button color="inherit" onClick={this.onClickSignout}>Sign out</Button>
</Toolbar>
</AppBar>
<Container className={classes.myContent}>
<Toolbar>
<Typography variant="h5" component="h1" gutterBottom>
Channels
</Typography>
<div className={classes.grow} />
<Button variant="contained" color="secondary" className={classes.margin} onClick={this.handleClickOpenAdd}>
<AddIcon className={classes.extendedIcon} />
Add Channel
</Button>
</Toolbar>
<Grid item xs={12} md={12}>
<div className={classes.demo}>
<List dense={false}>
{ this.state.channels.map(item => (
<div key={item.id}>
<ListItem button onClick={() => this.handleClickChannel(item)} >
<ListItemAvatar>
<Avatar>
<VideocamIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={item.name}
/>
<ListItemSecondaryAction className={classes.actionButtons}>
<IconButton edge="end" aria-label="delete" onClick={() => this.handleEditChannel(item)}>