diff --git a/src/components/MovieGenre.js b/src/components/MovieGenre.js
index 4b5e248..afb0133 100644
--- a/src/components/MovieGenre.js
+++ b/src/components/MovieGenre.js
@@ -18,7 +18,7 @@ export default class MovieGenre extends Component {
render() {
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;
}
diff --git a/src/components/MovieGenreImage.js b/src/components/MovieGenreImage.js
index e2378aa..533f927 100644
--- a/src/components/MovieGenreImage.js
+++ b/src/components/MovieGenreImage.js
@@ -5,7 +5,7 @@ export default function MovieGenreImage(props) {
if (
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;
}
diff --git a/src/containers/ActionMovies.js b/src/containers/ActionMovies.js
index 9cfb597..2809993 100644
--- a/src/containers/ActionMovies.js
+++ b/src/containers/ActionMovies.js
@@ -15,8 +15,7 @@ class ActionMovies extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.actionMovies.data) {
- const url =
- '/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=28';
+ const url = `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`;
movies = getMovieRows(this.props.actionMovies.data, url);
}
return (
diff --git a/src/containers/ComedyMovies.js b/src/containers/ComedyMovies.js
index 55cfbc6..8290e45 100644
--- a/src/containers/ComedyMovies.js
+++ b/src/containers/ComedyMovies.js
@@ -15,8 +15,7 @@ class ComedyMovies extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
- const url =
- '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=35';
+ const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
diff --git a/src/containers/Documentaries.js b/src/containers/Documentaries.js
index 5f4cc5c..4f1f82b 100644
--- a/src/containers/Documentaries.js
+++ b/src/containers/Documentaries.js
@@ -15,8 +15,7 @@ class Documentaries extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
- const url =
- '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=99';
+ const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
diff --git a/src/containers/HorrorMovies.js b/src/containers/HorrorMovies.js
index e65bb74..164a7fb 100644
--- a/src/containers/HorrorMovies.js
+++ b/src/containers/HorrorMovies.js
@@ -15,8 +15,7 @@ class HorrorMovies extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
- const url =
- '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=27';
+ const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
diff --git a/src/containers/Layout.js b/src/containers/Layout.js
index a552af7..81b5cfa 100644
--- a/src/containers/Layout.js
+++ b/src/containers/Layout.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import axios from "axios";
+import axios from "../axios-movies";
import Navbar from './Navbar';
import MainContent from './MainContent';
@@ -22,7 +22,7 @@ class Layout extends Component {
/** Make API call as soon as the user starts typing. */
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)
.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. */
if (movie.media_type === "movie") {
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") {
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)
diff --git a/src/containers/MainContent.js b/src/containers/MainContent.js
index ea5c6eb..774bc4f 100644
--- a/src/containers/MainContent.js
+++ b/src/containers/MainContent.js
@@ -8,8 +8,6 @@ import NetflixOriginals from './NetflixOriginals';
import TopRated from './TopRated';
import ActionMovies from './ActionMovies';
import ComedyMovies from './ComedyMovies';
-import HorrorMovies from './HorrorMovies';
-import RomanceMovies from './RomanceMovies';
import Documentaries from './Documentaries';
@@ -29,7 +27,7 @@ class MainContent extends Component {
/** Movie Id for the Narcos series */
const movieId = 63351;
/** 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
.get(url)
.then(res => {
@@ -51,7 +49,6 @@ class MainContent extends Component {
- {/* */}
diff --git a/src/containers/NetflixOriginals.js b/src/containers/NetflixOriginals.js
index 45e8c33..8e280a2 100644
--- a/src/containers/NetflixOriginals.js
+++ b/src/containers/NetflixOriginals.js
@@ -15,8 +15,7 @@ class NetflixOriginals extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
- const url =
- '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213';
+ const url = `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
diff --git a/src/containers/RomanceMovies.js b/src/containers/RomanceMovies.js
index 35efacb..af13ff4 100644
--- a/src/containers/RomanceMovies.js
+++ b/src/containers/RomanceMovies.js
@@ -15,8 +15,7 @@ class RomanceMovies extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
- const url =
- '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=10749';
+ const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=10749`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
diff --git a/src/containers/TopRated.js b/src/containers/TopRated.js
index bbe49df..b2d9c50 100644
--- a/src/containers/TopRated.js
+++ b/src/containers/TopRated.js
@@ -15,8 +15,7 @@ class TopRated extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.topRated.data) {
- const url =
- '/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US';
+ const url = `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`;
movies = getMovieRows(this.props.topRated.data, url);
}
return (
diff --git a/src/containers/TrendingMovies.js b/src/containers/TrendingMovies.js
index 1cb58c9..7c14cd1 100644
--- a/src/containers/TrendingMovies.js
+++ b/src/containers/TrendingMovies.js
@@ -15,8 +15,7 @@ class TrendingMovies extends Component {
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.trending.data) {
- const url =
- '/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US';
+ const url = `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`;
movies = getMovieRows(this.props.trending.data, url);
}
return (
diff --git a/src/getMovie.js b/src/getMovie.js
index 094fac6..abff143 100644
--- a/src/getMovie.js
+++ b/src/getMovie.js
@@ -6,8 +6,7 @@ export function getMovieRows(movies, url) {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
if (
- url ===
- '/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213'
+ url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
diff --git a/src/index.js b/src/index.js
index 82eb56e..a0f385f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,12 @@ import './static/sass/style.scss';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
+// TODO
+// - fix styling issue
+// - implemented debouncing
+// - implement carousel
+// - fix modal backdrop bug
+// - add routing and 404 page
const app = (
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index d6f384b..cc4952b 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -9,11 +9,9 @@ export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES';
export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES';
export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES';
-const API_KEY = '224ce27b38a3805ecf6f6c36eb3ba9d0';
-
export function fetchTrending() {
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 {
@@ -35,7 +33,7 @@ export function fetchNetflixOriginals() {
export function fetchTopRated() {
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 {
@@ -46,7 +44,7 @@ export function fetchTopRated() {
export function fetchActionMovies() {
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 {
@@ -57,7 +55,7 @@ export function fetchActionMovies() {
export function fetchComedyMovies() {
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 {
@@ -68,7 +66,7 @@ export function fetchComedyMovies() {
export function fetchHorrorMovies() {
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 {
@@ -79,7 +77,7 @@ export function fetchHorrorMovies() {
export function fetchRomanceMovies() {
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 {
@@ -90,7 +88,7 @@ export function fetchRomanceMovies() {
export function fetchDocumentaries() {
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 {