80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
import axios from 'axios'
|
|
|
|
function MoviePosters(props) {
|
|
const movies = props.movies;
|
|
return (
|
|
<div className="col-xs-5 col-md-8">
|
|
<div className="row">
|
|
{movies.map(function(movie, index) {
|
|
const selected = (index === props.selectedMovieIndex) ? true : false;
|
|
return (
|
|
<MoviePoster
|
|
data={movie}
|
|
key={movie.ID}
|
|
selected={selected}
|
|
onClick={() => props.onClick(index)}
|
|
/>
|
|
)}
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MoviePoster(props) {
|
|
const imgUrl = '/img/movies/' + props.data.imdb_id +'.jpg';
|
|
const selected = props.selected ? ' thumbnail-selected' : '';
|
|
const imgClass = 'thumbnail' + selected;
|
|
return (
|
|
<div className="col-xs-12 col-md-3">
|
|
<a className={imgClass}>
|
|
<img src={imgUrl} onClick={props.onClick}/>
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MovieDetails(props) {
|
|
return (
|
|
<div className="col-xs-7 col-md-4">
|
|
<div className="movie-detail affix">
|
|
<h1 className="hidden-xs">{props.data.title}</h1>
|
|
<h3 className="visible-xs">{props.data.title}</h3>
|
|
<p>
|
|
<i className="fa fa-clock-o"></i>
|
|
{props.data.runtime} min
|
|
</p>
|
|
<p>
|
|
<i className="fa fa-star-o"></i>
|
|
{props.data.rating} <small>({props.data.votes} counts)</small>
|
|
</p>
|
|
<p className="movie-plot">{props.data.plot}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default class MovieList extends React.Component {
|
|
componentWillMount() {
|
|
this.props.fetchMovies();
|
|
}
|
|
render() {
|
|
const movies = this.props.movieStore.movies;
|
|
const index = this.props.movieStore.selectedMovieIndex;
|
|
const selectedMovie = movies[index];
|
|
return (
|
|
<div className="row" id="movie-library">
|
|
<MoviePosters
|
|
movies={this.props.movieStore.movies}
|
|
selectedMovieIndex={index}
|
|
onClick={this.props.selectMovie}
|
|
/>
|
|
{selectedMovie &&
|
|
<MovieDetails data={selectedMovie} />
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|