import React from 'react'
import axios from 'axios'
import Header from './Header'
const { shape, string } = React.PropTypes

const Details = React.createClass({
  propTypes: {
    show: shape({
      title: string.isRequired,
      year: string.isRequired,
      poster: string.isRequired,
      trailer: string.isRequired,
      description: string.isRequired,
      imdbID: string.isRequired
    })
  },
  getInitialState () {
    return {
      omdbData: {}
    }
  },
  componentDidMount () {
    axios.get(`http://www.omdbapi.com/?i=${this.props.show.imdbID}`)
    .then((response) => {
      console.log('response', response)
      this.setState({omdbData: response.data})
    })
    .catch((error) => {
      console.error('axios error', error)
    })
  },
  render () {
    const { title, description, year, poster, trailer } = this.props.show
    let rating
    if (this.state.omdbData.imdbRating) {
      rating = <h3>{this.state.omdbData.imdbRating}</h3>
    } else {
      rating = <img src='../public/img/loading.png' alt='loading indicator' />
    }
    return (
      <div className='details'>
        <Header />
        <section>
          <h1>{title}</h1>
          <h2>({year})</h2>
          {rating}
          <img src={`/public/img/posters/${poster}`} />
          <p>{description}</p>
        </section>
        <div>
          <iframe src={`https://www.youtube-nocookie.com/embed/${trailer}?rel=0&amp;controls=0&amp;showinfo=0`} frameBorder='0' allowFullScreen />
        </div>
      </div>
    )
  }
})

export default Details

@@ -30,24 +30,86 @@
 ort 
-axios from 'axio
+%7B connect %7D from 'react-redux'%0Aimport %7B getOMDBDetails %7D from './actionCreator
 s'%0Ai
@@ -158,16 +158,22 @@
 , string
+, func
  %7D = Rea
@@ -465,366 +465,224 @@
   %7D)
+,
 %0A  
-%7D,%0A  getInitialState () %7B%0A    return %7B%0A      omdbData: %7B%7D%0A    %7D%0A  %7D,%0A  componentDidMount () %7B%0A    axios.get(%60http://www.omdbapi.com/?i=$%7Bthis.props.show.imdbID%7D%60)%0A    .then((response) =%3E %7B%0A      console.log('response', response)%0A      this.setState(%7BomdbData: response.data%7D)%0A    %7D)%0A    .catch((error) =%3E %7B%0A      console.error('axios error', error
+  omdbData: shape(%7B%0A      imdbID: string%0A    %7D),%0A    dispatch: func%0A  %7D,%0A  componentDidMount () %7B%0A    if (!this.props.omdbData.imdbRating) %7B%0A      this.props.dispatch(getOMDBDetails(this.props.show.imdbID)
 )%0A    %7D
-)
 %0A  %7D
@@ -795,29 +795,29 @@
    if (this.
-state
+props
 .omdbData.im
@@ -857,13 +857,13 @@
 his.
-state
+props
 .omd
@@ -1452,27 +1452,231 @@
 %7D)%0A%0A
-export default 
+const mapStateToProps = (state, ownProps) =%3E %7B%0A  const omdbData = state.omdbData%5BownProps.show.imdbID%5D ? state.omdbData%5BownProps.show.imdbID%5D : %7B%7D%0A  return %7B%0A    omdbData%0A  %7D%0A%7D%0A%0Aexport default connect(mapStateToProps)(
 Details
+)
 %0A

Refactor Details.js to use redux to get the imdb rating