{"size": 1552, "ext": "js", "max_stars_repo_path": "app/web/components/moviePoster/index.js", "max_stars_repo_name": "GilbertLS/MovieCircle", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "app/web/components/moviePoster/index.js", "max_issues_repo_name": "GilbertLS/MovieCircle", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "app/web/components/moviePoster/index.js", "max_forks_repo_name": "GilbertLS/MovieCircle", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.6349206349, "max_line_length": 106, "alphanum_fraction": 0.5728092784}
import React from 'react';
import { browserHistory } from 'react-router';
import OnVisible from 'react-on-visible';

import style from './style.scss';

export default class MoviePoster extends OnVisible {
  constructor(props) {
    super(props);

    this.state = {
      loaded: false,
    }

    this.handleImageOnLoad = this.handleImageOnLoad.bind(this);
  }

  handleImageOnLoad(a) {
    this.setState({
      loaded: true,
    });
  }

  handleOnClick(id) {
    browserHistory.push('/movie/' + id);
  }

  render() {
    const movie = this.props.movie;
    const posterClasses = (!!movie.poster_path) ? style.moviePoster : style.moviePoster +' '+ style.empty;

    return (
      <div
        className={posterClasses}
        ref={el => { this.holder = el; }}
        onClick={() => {this.handleOnClick(movie.id)}}>
        {
          this.state.visible &&
          !!movie.poster_path &&
          <div className={this.state.loaded ? style.loaded : style.imageContainer}>
            <img
              onLoad={this.handleImageOnLoad}
              src={'https://image.tmdb.org/t/p/w342/' + movie.poster_path}
              className={style.image}/>
            <div className={style.title}>{movie.title}</div>
          </div>
        }
        {
          this.state.visible &&
          !movie.poster_path &&
          <div className={style.noPoster}>
            <div className={style.title}>{movie.title}</div>
          </div>
        }
      </div>
    );
  }
}

MoviePoster.propTypes = {
  movie: React.PropTypes.object.isRequired,
};
