leftpane.js

leftpane.js

import React, { Component, Fragment } from 'react'
import {
  Grid,
  Paper,
  Typography,
  List,
  ListItem,
  ListItemText
} from 'material-ui'

class LeftPane extends Component {
  constructor(props) {
    super(props)
    this.state = {
      styles: this.props.styles,
      exercises: this.props.exercises
    }
  }
  render() {
    const { styles, exercises } = this.state
    return (
      <Grid item sm>
        <Paper style={styles.Paper}>
          {exercises.map(([group, exercises]) => (
            <Fragment key={group}>
              <Typography
                variant="headline"
                style={{ textTransform: 'capitalize' }}
              >
                {group}
              </Typography>
              <List component="ul">
                {exercises.map(({ id, title }) => (
                  <ListItem button key={id}>
                    <ListItemText primary={title} />
                  </ListItem>
                ))}
              </List>
            </Fragment>
          ))}
        </Paper>
      </Grid>
    )
  }
}

export default LeftPane