text: import React, { useEffect } from 'react'
  import { connect } from 'react-redux'
  import { withStyles } from '@material-ui/core/styles'
  import Grid from '@material-ui/core/Grid'
  import Card from '@material-ui/core/Card'
  import CardContent from '@material-ui/core/CardContent'
  import Typography from '@material-ui/core/Typography'
  import Divider from '@material-ui/core/Divider'
  import Content from 'components/Content'
  import PrettyJson from 'components/PrettyJson'
  import RegionalNav from './RegionalNav'
  import { fetchJob, createJobRun } from 'actionCreators'
  import jobSelector from 'selectors/job'
  import matchRouteAndMapDispatchToProps from 'utils/matchRouteAndMapDispatchToProps'
  import jobSpecDefinition from 'utils/jobSpecDefinition'
  
  const styles = theme => ({
    definitionTitle: {
      marginTop: theme.spacing.unit * 2,
      marginBottom: theme.spacing.unit * 2,
    },
    divider: {
      marginTop: theme.spacing.unit,
      marginBottom: theme.spacing.unit * 3,
    },
  })
  
  const renderDetails = ({ job, classes }) => {
    const definition = job && jobSpecDefinition(job)
  
    if (definition) {
      return (
        <Grid container spacing={0}>
          <Grid item xs={12}>
            <Typography variant="h5" className={classes.definitionTitle}>
              Definition
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <Divider light className={classes.divider} />
          </Grid>
          <Grid item xs={12}>
            <PrettyJson object={definition} />
          </Grid>
        </Grid>
      )
    }
  
    return <React.Fragment>Fetching ...</React.Fragment>
  }
  
  const Definition = props => {
    const { fetchJob, job, jobSpecId } = props
  
    useEffect(() => {
      document.title = 'Job Definition'
      fetchJob(jobSpecId)
    }, [fetchJob, jobSpecId])
  
    return (
      <div>
        <RegionalNav jobSpecId={jobSpecId} job={job} />
        <Content>
          <Card>
            <CardContent>{renderDetails(props)}</CardContent>
          </Card>
        </Content>
      </div>
    )
  }
  
  const mapStateToProps = (state, ownProps) => {
    const jobSpecId = ownProps.match.params.jobSpecId
    const job = jobSelector(state, jobSpecId)
  
    return {
      jobSpecId,
      job,
    }
  }
  
  export const ConnectedDefinition = connect(
    mapStateToProps,
    matchRouteAndMapDispatchToProps({ fetchJob, createJobRun }),
  )(Definition)
  
  export default withStyles(styles)(ConnectedDefinition)
  