this.getMovieDetails(movie)}
+ key={movie.id}
+ url={url}
+ posterUrl={movieImageUrl}
+ movie={movie} />
+ movieRows.push(movieComponent);
+ }
+
})
// update state
return movieRows;
@@ -58,15 +75,32 @@ class MovieShowcase extends Component {
}
/**
- * Send request for movies that are popular
+ * Send request for movies that are popular right now
*/
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/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
+
+ axios.get(url)
+ .then(res => {
+
+ const movieRows = this.getMovieRows(res, url);
+ this.setState({ trendingMovieRow: movieRows });
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+
+ /**
+ * Send request for movies that are top rated
+ */
+ getTopRated = () => {
+ const url = "https://api.themoviedb.org/3/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
axios.get(url)
.then(res => {
const movieRows = this.getMovieRows(res, url);
- this.setState({ trendingMovieRows: movieRows });
+ this.setState({ topRatedRow: movieRows });
}).catch(error => {
console.log(error);
})
@@ -76,20 +110,103 @@ class MovieShowcase extends Component {
* Get Netflix originals
*/
getNetflixMovies = () => {
-
const url = "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213";
axios.get(url)
.then(res => {
- console.log(res);
+
const movieRows = this.getMovieRows(res, url);
- this.setState({ netflixOriginalsRows: movieRows });
+ this.setState({ netflixOriginalsRow: movieRows });
})
.catch(error => {
console.log(error);
})
}
+ getActionMovies = () => {
+ const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=28";
+
+ axios.get(url)
+ .then(res => {
+ console.log(res);
+ const movieRows = this.getMovieRows(res, url);
+ this.setState({ actionMovieRow: movieRows });
+ })
+ .catch(error => {
+ console.log(error);
+ })
+ }
+
+ getComedyMovies = () => {
+ const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=35";
+
+ axios.get(url)
+ .then(res => {
+ console.log(res);
+ const movieRows = this.getMovieRows(res, url);
+ this.setState({ comedyMovieRow: movieRows });
+ })
+ .catch(error => {
+ console.log(error);
+ })
+ }
+
+ getHorrorMovies = () => {
+ const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=27";
+
+ axios.get(url)
+ .then(res => {
+ console.log(res);
+ const movieRows = this.getMovieRows(res, url);
+ this.setState({ horrorMovieRow: movieRows });
+ })
+ .catch(error => {
+ console.log(error);
+ })
+ }
+
+ getRomanceMovies = () => {
+ const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=10749";
+
+ axios.get(url)
+ .then(res => {
+ console.log(res);
+ const movieRows = this.getMovieRows(res, url);
+ this.setState({ romanceMovieRow: movieRows });
+ })
+ .catch(error => {
+ console.log(error);
+ })
+ }
+
+ getAnimatedMovies = () => {
+ const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=16";
+
+ axios.get(url)
+ .then(res => {
+ console.log(res);
+ const movieRows = this.getMovieRows(res, url);
+ this.setState({ animatedMovieRow: movieRows });
+ })
+ .catch(error => {
+ console.log(error);
+ })
+ }
+
+ getDocumentaries = () => {
+ const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=99";
+
+ axios.get(url)
+ .then(res => {
+ console.log(res);
+ const movieRows = this.getMovieRows(res, url);
+ this.setState({ documentaryRow: movieRows });
+ })
+ .catch(error => {
+ console.log(error);
+ })
+ }
+
render() {
@@ -98,12 +215,47 @@ class MovieShowcase extends Component {
Netflix Originals
- {this.state.netflixOriginalsRows}
+ {this.state.netflixOriginalsRow}
Trending Now
- {this.state.trendingMovieRows}
+ {this.state.trendingMovieRow}
+
+
+ Top Rated
+
+ {this.state.topRatedRow}
+
+
+ Action Movies
+
+ {this.state.actionMovieRow}
+
+
+ Comedy Movies
+
+ {this.state.comedyMovieRow}
+
+
+ Horror Movies
+
+ {this.state.horrorMovieRow}
+
+
+ Romance Movies
+
+ {this.state.romanceMovieRow}
+
+
+ Animated Films
+
+ {this.state.animatedMovieRow}
+
+
+ Documentaries
+
+ {this.state.documentaryRow}
@@ -114,4 +266,12 @@ class MovieShowcase extends Component {
}
}
-export default MovieShowcase;
\ No newline at end of file
+export default MovieShowcase;
+
+/**
+ * id:
+ * 18 = drama
+ * 878 - science fiction
+ * 80 - crime
+ * 36 - history
+ */
\ No newline at end of file
diff --git a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
index 6632567..2b97c1e 100644
--- a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
+++ b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
@@ -8,7 +8,7 @@ class movieShowcaseRow extends Component {
let netflixUrl = false;
const netflixStyle = {
height: "52rem",
- width: "50%"
+
}
if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss
index f4f38dd..6346395 100644
--- a/src/static/sass/components/_movieShowcase.scss
+++ b/src/static/sass/components/_movieShowcase.scss
@@ -8,9 +8,10 @@
}
&__container {
- overflow-y:hidden;
+ overflow-y: hidden;
transition: transform 450ms;
overflow-x: scroll;
+
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(20, 1fr);
diff --git a/src/static/sass/layout/_navigation.scss b/src/static/sass/layout/_navigation.scss
index 5fc2b95..2501c7c 100644
--- a/src/static/sass/layout/_navigation.scss
+++ b/src/static/sass/layout/_navigation.scss
@@ -1,6 +1,6 @@
.navigation {
background-color: transparent;
-
+ z-index: 100;
grid-column: 1 / 13;
position: fixed;
width: 100%;