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

removed hard coded api key

Browse Source
This commit is contained in:
andres alcocer
2020-05-15 15:02:57 -04:00
parent 3faffa603a
commit 50d2c1dfad
15 changed files with 29 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MovieGenre.js
View File

@@ -18,7 +18,7 @@ export default class MovieGenre extends Component {
render() { render() {
let netflixUrl = false; let netflixUrl = false;
if (this.props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { if (this.props.url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`) {
netflixUrl = true; netflixUrl = true;
} }

2
src/components/MovieGenreImage.js
View File

@@ -5,7 +5,7 @@ export default function MovieGenreImage(props) {
if ( if (
props.url === props.url ===
'https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213' `https://api.themoviedb.org/3/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) { ) {
netflixUrl = true; netflixUrl = true;
} }

3
src/containers/ActionMovies.js
View File

@@ -15,8 +15,7 @@ class ActionMovies extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.actionMovies.data) { if (this.props.actionMovies.data) {
const url = const url = `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`;
'/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=28';
movies = getMovieRows(this.props.actionMovies.data, url); movies = getMovieRows(this.props.actionMovies.data, url);
} }
return ( return (

3
src/containers/ComedyMovies.js
View File

@@ -15,8 +15,7 @@ class ComedyMovies extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.movies.data) { if (this.props.movies.data) {
const url = const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`;
'/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=35';
movies = getMovieRows(this.props.movies.data, url); movies = getMovieRows(this.props.movies.data, url);
} }
return ( return (

3
src/containers/Documentaries.js
View File

@@ -15,8 +15,7 @@ class Documentaries extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.movies.data) { if (this.props.movies.data) {
const url = const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`;
'/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=99';
movies = getMovieRows(this.props.movies.data, url); movies = getMovieRows(this.props.movies.data, url);
} }
return ( return (

3
src/containers/HorrorMovies.js
View File

@@ -15,8 +15,7 @@ class HorrorMovies extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.movies.data) { if (this.props.movies.data) {
const url = const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`;
'/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=27';
movies = getMovieRows(this.props.movies.data, url); movies = getMovieRows(this.props.movies.data, url);
} }
return ( return (

8
src/containers/Layout.js
View File

@@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import axios from "axios"; import axios from "../axios-movies";
import Navbar from './Navbar'; import Navbar from './Navbar';
import MainContent from './MainContent'; import MainContent from './MainContent';
@@ -22,7 +22,7 @@ class Layout extends Component {
/** Make API call as soon as the user starts typing. */ /** Make API call as soon as the user starts typing. */
makeAipCall = (searchItem) => { makeAipCall = (searchItem) => {
const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`; const url = `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchItem}`;
axios.get(url) axios.get(url)
.then(res => { .then(res => {
@@ -82,11 +82,11 @@ class Layout extends Component {
/** Make the appropriate API call to get the details for a single movie or tv show. */ /** Make the appropriate API call to get the details for a single movie or tv show. */
if (movie.media_type === "movie") { if (movie.media_type === "movie") {
const movieId = movie.id; const movieId = movie.id;
url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`;
} else if (movie.media_type === "tv") { } else if (movie.media_type === "tv") {
const tvId = movie.id const tvId = movie.id
url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`;
} }
axios.get(url) axios.get(url)

5
src/containers/MainContent.js
View File

@@ -8,8 +8,6 @@ import NetflixOriginals from './NetflixOriginals';
import TopRated from './TopRated'; import TopRated from './TopRated';
import ActionMovies from './ActionMovies'; import ActionMovies from './ActionMovies';
import ComedyMovies from './ComedyMovies'; import ComedyMovies from './ComedyMovies';
import HorrorMovies from './HorrorMovies';
import RomanceMovies from './RomanceMovies';
import Documentaries from './Documentaries'; import Documentaries from './Documentaries';
@@ -29,7 +27,7 @@ class MainContent extends Component {
/** Movie Id for the Narcos series */ /** Movie Id for the Narcos series */
const movieId = 63351; const movieId = 63351;
/** Make Api call to retrieve the details for a single movie */ /** Make Api call to retrieve the details for a single movie */
const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=${process.env.API_KEY}`;
axios axios
.get(url) .get(url)
.then(res => { .then(res => {
@@ -51,7 +49,6 @@ class MainContent extends Component {
<TopRated /> <TopRated />
<ActionMovies /> <ActionMovies />
<ComedyMovies /> <ComedyMovies />
{/* <HorrorMovies /> */}
<Documentaries /> <Documentaries />
</div> </div>
<Footer /> <Footer />

3
src/containers/NetflixOriginals.js
View File

@@ -15,8 +15,7 @@ class NetflixOriginals extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.movies.data) { if (this.props.movies.data) {
const url = const url = `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`;
'/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213';
movies = getMovieRows(this.props.movies.data, url); movies = getMovieRows(this.props.movies.data, url);
} }
return ( return (

3
src/containers/RomanceMovies.js
View File

@@ -15,8 +15,7 @@ class RomanceMovies extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.movies.data) { if (this.props.movies.data) {
const url = const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=10749`;
'/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=10749';
movies = getMovieRows(this.props.movies.data, url); movies = getMovieRows(this.props.movies.data, url);
} }
return ( return (

3
src/containers/TopRated.js
View File

@@ -15,8 +15,7 @@ class TopRated extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.topRated.data) { if (this.props.topRated.data) {
const url = const url = `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`;
'/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US';
movies = getMovieRows(this.props.topRated.data, url); movies = getMovieRows(this.props.topRated.data, url);
} }
return ( return (

3
src/containers/TrendingMovies.js
View File

@@ -15,8 +15,7 @@ class TrendingMovies extends Component {
// Call getMoviesRows function only when we get the data back // Call getMoviesRows function only when we get the data back
// from the API through redux // from the API through redux
if (this.props.trending.data) { if (this.props.trending.data) {
const url = const url = `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`;
'/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US';
movies = getMovieRows(this.props.trending.data, url); movies = getMovieRows(this.props.trending.data, url);
} }
return ( return (

3
src/getMovie.js
View File

@@ -6,8 +6,7 @@ export function getMovieRows(movies, url) {
let movieImageUrl = let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path; 'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
if ( if (
url === url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
'/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213'
) { ) {
movieImageUrl = movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path; 'https://image.tmdb.org/t/p/original/' + movie.poster_path;

6
src/index.js
View File

@@ -12,6 +12,12 @@ import './static/sass/style.scss';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore); const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// TODO
// - fix styling issue
// - implemented debouncing
// - implement carousel
// - fix modal backdrop bug
// - add routing and 404 page
const app = ( const app = (
<Provider store={createStoreWithMiddleware(reducers)}> <Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter> <BrowserRouter>

16
src/store/actions/index.js
View File

@@ -9,11 +9,9 @@ export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES';
export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES'; export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES';
export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES'; export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES';
const API_KEY = '224ce27b38a3805ecf6f6c36eb3ba9d0';
export function fetchTrending() { export function fetchTrending() {
const request = axios.get( const request = axios.get(
`/trending/all/week?api_key=${API_KEY}&language=en-US` `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
); );
return { return {
@@ -35,7 +33,7 @@ export function fetchNetflixOriginals() {
export function fetchTopRated() { export function fetchTopRated() {
const request = axios.get( const request = axios.get(
`/movie/top_rated?api_key=${API_KEY}&language=en-US` `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
); );
return { return {
@@ -46,7 +44,7 @@ export function fetchTopRated() {
export function fetchActionMovies() { export function fetchActionMovies() {
const request = axios.get( const request = axios.get(
`/discover/movie?api_key=${API_KEY}&with_genres=28` `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
); );
return { return {
@@ -57,7 +55,7 @@ export function fetchActionMovies() {
export function fetchComedyMovies() { export function fetchComedyMovies() {
const request = axios.get( const request = axios.get(
`/discover/movie?api_key=${API_KEY}&with_genres=35` `/discover/movie?api_key=${process.env.API_KEY}&with_genres=35`
); );
return { return {
@@ -68,7 +66,7 @@ export function fetchComedyMovies() {
export function fetchHorrorMovies() { export function fetchHorrorMovies() {
const request = axios.get( const request = axios.get(
`/discover/movie?api_key=${API_KEY}&with_genres=27` `/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
); );
return { return {
@@ -79,7 +77,7 @@ export function fetchHorrorMovies() {
export function fetchRomanceMovies() { export function fetchRomanceMovies() {
const request = axios.get( const request = axios.get(
`/discover/movie?api_key=${API_KEY}&with_genres=10749` `/discover/movie?api_key=${process.env.API_KEY}&with_genres=10749`
); );
return { return {
@@ -90,7 +88,7 @@ export function fetchRomanceMovies() {
export function fetchDocumentaries() { export function fetchDocumentaries() {
const request = axios.get( const request = axios.get(
`/discover/movie?api_key=${API_KEY}&with_genres=99` `/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
); );
return { return {