toggle bug fixed

This commit is contained in:
andres alcocer
2018-11-19 17:03:04 -05:00
parent 5385c9e1d1
commit 013e11eeeb
3 changed files with 12 additions and 11 deletions

View File

@@ -4,8 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
"start": "node",
"start::server": "webpack-dev-server --open --mode development",
"start": "webpack-dev-server --open --mode development",
"build": "webpack -p"
},
"engines": {

View File

@@ -1,7 +1,7 @@
import React, { Component } from 'react';
class movieGenre extends Component {
class MovieGenre extends Component {
render() {
@@ -13,7 +13,7 @@ class movieGenre extends Component {
return (
<div onClick={this.props.movieDetails}
<div onClick={this.props.movieDetailsModal}
className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
</div>
@@ -22,4 +22,4 @@ class movieGenre extends Component {
}
}
export default movieGenre;
export default MovieGenre;

View File

@@ -17,7 +17,7 @@ class MovieGenreRow extends Component {
animatedMovieRow: [],
documentaryRow: [],
romanceMovieRow: [],
movieDetails: {},
movieOverview: {},
toggleModal: false,
}
@@ -39,8 +39,10 @@ class MovieGenreRow extends Component {
@param {object} movieObject - A single movie object
*/
getMovieDetails = (movieObject) => {
this.setState({toggleModal: true})
this.setState({ movieDetails: movieObject });
console.log(movieObject);
this.setState({ toggleModal: true });
this.setState({ movieOverview: movieObject });
}
closeModal = () => {
@@ -62,7 +64,7 @@ class MovieGenreRow extends Component {
if (movie.poster_path && movie.backdrop_path !== null) {
const movieComponent = <MovieGenre
movieDetails={() => this.getMovieDetails(movie)}
movieDetailsModal={() => this.getMovieDetails(movie)}
key={movie.id}
url={url}
posterUrl={movieImageUrl}
@@ -258,8 +260,8 @@ class MovieGenreRow extends Component {
{this.state.documentaryRow}
</div>
<Modal show={this.state.toggle} modalClosed={this.closeModal} movie={this.state.movieDetails}>
<MovieDetails movie={this.state.movieDetails}/>
<Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview}/>
</Modal>
</div>
);