psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page

Browse Source
This commit is contained in:
andres alcocer
2018-11-16 13:26:32 -05:00
parent fa3bf3851d
commit 466b115f44
4 changed files with 72 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MovieRow/MovieRow.js
View File

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
const movieRow = (props) => ( const movieRow = (props) => (
<div className="movie"> <div className="movie">
<div onClick={props.movieDetails} className="movie__column-poster"> <div onClick={props.movieDetails} className="movie__column-poster">
<img src={props.movieImage} alt="" className="movie__poster" /> <img src={props.movieImage} alt="" className="movie__poster" />
</div> </div>

52
src/containers/MovieShowcase/MovieShowcase.js
View File

@@ -9,27 +9,28 @@ class MovieShowcase extends Component {
movies: [] movies: []
} }
componentWillMount() { // componentWillMount() {
this.getTrending(); // this.getTrending();
} // }
getTrending = () => { getTrending = () => {
const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1'; const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1';
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res.data.results); console.log(res.data.results[0]);
const results = res.data.results; const movie = res.data.results[0];
let movieRows = []; let movieRows = [];
results.forEach((movie) => { // results.forEach((movie) => {
const movieImageUrl = "url(https://image.tmdb.org/t/p/original/" + movie.poster_path; const movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
const movieComponent = <MovieShowcase console.log(movieImageUrl);
const movieComponent = <MovieShowCaseRow
key={movie.id} key={movie.id}
posterUrl={movieImageUrl} posterUrl={movieImageUrl}
movie={movie}/> movie={movie}/>
movieRows.push(movieComponent); movieRows.push(movieComponent);
}) // })
// update state // update state
this.setState({trendingMovieRows: movieRows}) this.setState({trendingMovieRows: movieRows})
@@ -45,21 +46,27 @@ class MovieShowcase extends Component {
return ( return <div className="movieShowcase">
<div className="movieShowcase"> <h1 onClick={this.getTrending} className="movieShowcase__heading">
<h1 className="movieShowcase__heading">New Releases</h1> New Releases
</h1>
<div className="movieShowcase__container"> <div className="movieShowcase__container">
{/* {this.state.trendingMovieRows} */} {/* {this.state.movies[0].title} */}
{/* {this.state.movies[0].title} */} {/* {/* <div className="movieShowcase__container--movie">movie 1</div> */}
{/* <div className="movieShowcase__container--movie">movie 1</div> {/* <div className="movieShowcase__container--movie"> */}
<div className="movieShowcase__container--movie">movie 2</div> {this.state.trendingMovieRows}
<div className="movieShowcase__container--movie">movie 3</div> {this.state.trendingMovieRows}
{this.state.trendingMovieRows}
{this.state.trendingMovieRows}
{/* </div> */}
{/* <div className="movieShowcase__container--movie">movie 3</div>
<div className="movieShowcase__container--movie">movie 4</div> <div className="movieShowcase__container--movie">movie 4</div>
<div className="movieShowcase__container--movie">movie 5</div> <div className="movieShowcase__container--movie">movie 5</div>
<div className="movieShowcase__container--movie">movie 6</div> */} <div className="movieShowcase__container--movie">
{/* </div> */} movie 6
</div> */}
{/* <h1 className="movieShowcase__heading">Trending Now</h1> {/* </div> */}
{/* <h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container"> <div className="movieShowcase__container">
<div className="movieShowcase__container--movie">movie 1</div> <div className="movieShowcase__container--movie">movie 1</div>
<div className="movieShowcase__container--movie">movie 2</div> <div className="movieShowcase__container--movie">movie 2</div>
@@ -69,8 +76,7 @@ class MovieShowcase extends Component {
<div className="movieShowcase__container--movie">movie 6</div> <div className="movieShowcase__container--movie">movie 6</div>
</div> */} </div> */}
</div> </div>
</div> </div>;
)
} }
} }

10
src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
View File

@@ -4,11 +4,11 @@ import React, { Component } from 'react';
const movieShowcaseRow = (props) => ( const movieShowcaseRow = (props) => (
<div>
<div className="shit"> <div className="movieShowcase__container--movie">
<img src={movieImageUrl} /> <img src={props.posterUrl} className="movieShowcase__container--movie-image"/>
</div> </div>
</div>
); );
export default movieShowcaseRow; export default movieShowcaseRow;

44
src/static/sass/components/_movieShowcase.scss
View File

@@ -3,18 +3,48 @@
grid-column: 2 / 13; grid-column: 2 / 13;
color: #fff; color: #fff;
&__heading {
padding-top: 2rem;
}
&__container { &__container {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
column-gap: .5rem; column-gap: .5rem;
&--movie { &--movie {
padding: 3rem; padding-top: 2rem;
} padding-bottom: 2rem;
height: 35rem;
// width: 20rem;
&:not(:last-child) {
padding-right: .5rem;
}
&-image {
height: 100%;
transition: transform .3s;
&:hover {
transform: scale(1.18);
transition: all .3s;
cursor: pointer;
}
}
}
} }
} }
.shit { // .shit {
width: 20rem; // width: 20rem;
height: 10rem; // height: 10rem;
}
// &__poster {
// height: 20rem;
// width: 15rem;
// }
// &__image {
// height: 100%;
// }
// }