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

new merge

Browse Source
This commit is contained in:
andres alcocer
2020-07-10 19:20:43 -04:00
parent 4d3655e576 0daf75f804
commit 50d815299a
49 changed files with 5889 additions and 2707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+2
View File
@@ -0,0 +1,2 @@
client/dist/
node_modules/
.eslintrc.json
+25
View File
@@ -0,0 +1,25 @@
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"plugins": [
"react",
"react-hooks"
],
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2018
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"linebreak-style": ["error", "unix"]
}
}
.prettierignore
+3
View File
@@ -0,0 +1,3 @@
package-lock.json
.next
node_modules/
.prettierrc
+3
View File
@@ -0,0 +1,3 @@
{
"singleQuote": true
}
README.md
+7 -1
View File
@@ -5,12 +5,17 @@
This project is a simplified front end clone of Netflix. It was created with React and CSS (Grid and Flexbox). It uses [The MovieDB Api](https://www.themoviedb.org/documentation/api) to search for movies and display details. Feel free to contribute!
### Tools used:
- Webpack
- Webpack
- Axios
- Redux & React
- Sass (grid & flexbox)
- Media queries
### Runing Project Locally
- Install dependencies: run `npm install` in root project
- Get API key from [here](https://www.themoviedb.org/documentation/api)
- Create .env file in root project and add: `API_KEY=YOUR_API_KEY_HERE`
- Run project: `npm run dev`
### User Stories:
@@ -27,3 +32,4 @@ This project is a simplified front end clone of Netflix. It was created with Rea
Please feel free to create a pull request and submit any issues!
Currently looking for backend developers. If you would to contribute to support a backend, reach out, all ideas are welcomed!
package-lock.json
Generated
+5204 -2210
View File
File diff suppressed because it is too large Load Diff
package.json
+22 -8
View File
@@ -4,17 +4,20 @@
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack -p"
"dev": "webpack-dev-server --mode development --config webpack.config.js --open",
"build": "webpack -p",
"lint": "eslint --fix . && echo 'Lint complete.'"
},
"engines": {
"node": "10.1.0",
"npm": "6.4.1"
"npm": "6.4.1",
"watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src"
},
"author": "Andres Alcocer",
"license": "ISC",
"dependencies": {
"axios": "^0.18.0",
"axios": "^0.18.1",
"lodash": "^4.17.19",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
@@ -38,21 +41,32 @@
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1",
"dotenv": "^6.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.5.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.10.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^2.0.5",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"svg-react-loader": "^0.4.6",
"tap-nirvana": "^1.1.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
"watch": "^1.0.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
src/axios-movies.js
+3 -3
View File
@@ -1,8 +1,8 @@
import axios from 'axios';
import axios from 'axios';
/** base url to make requests to the the movie database */
const instance = axios.create({
baseURL: "https://api.themoviedb.org/3"
baseURL: 'https://api.themoviedb.org/3',
});
export default instance;
export default instance;
src/components/DropdownContent.js
-4
View File
@@ -1,8 +1,6 @@
import React from 'react';
const dropdownContent = () => (
<div className="dropdownContainer">
<div className="navigation__container--userLogo">
<div className="dropdownContent">
@@ -19,7 +17,6 @@ const dropdownContent = () => (
<p className="dropdownContent--user-text">Luis</p>
</div>
<p className="dropdownContent-text">Manage Profiles</p>
</div>
<div className="dropdownContent dropdownContent--2">
<p className="dropdownContent-textOutside">Account</p>
@@ -31,4 +28,3 @@ const dropdownContent = () => (
);
export default dropdownContent;
src/components/Footer.js
+10 -6
View File
@@ -1,11 +1,15 @@
import React from 'react';
const footer = () => (
<footer className="footer">
<div className="footer__copyright">
&copy; 2018 Made with ❤️ by <a className="footer__copyright--link" href="http://andresio.com"> Andres Alcocer</a></div>
</footer>
<footer className="footer">
<div className="footer__copyright">
&copy; 2018 Made with ❤️ by{' '}
<a className="footer__copyright--link" href="http://andresio.com">
{' '}
Andres Alcocer
</a>
</div>
</footer>
);
export default footer;
export default footer;
src/components/Header.js
+9 -7
View File
@@ -3,19 +3,21 @@ import React from 'react';
import PlayLogo from '../static/images/play-button.svg';
import AddLogo from '../static/images/add.svg';
export default function Header(props) {
const backgroundStyle = {
backgroundSize: "cover",
backgroundSize: 'cover',
backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`,
backgroundPosition: "center",
}
backgroundPosition: 'center',
};
return (
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{props.movie.name}</h1>
<button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
<button
onClick={() => alert('not a movie!')}
className="header__container-btnPlay"
>
<PlayLogo className="header__container-btnMyList-play" />
Play
</button>
@@ -28,5 +30,5 @@ export default function Header(props) {
</div>
<div className="header--fadeBottom"></div>
</header>
)
}
);
}
src/components/Movie/Movie.js
+6 -6
View File
@@ -1,11 +1,11 @@
import React from 'react';
const Movie = (props) => (
<div className="movie">
<div onClick={props.movieDetails} className="movie__column-poster">
<img src={props.movieImage} alt="" className="movie__poster" />
</div>
</div>
<div className="movie">
<div onClick={props.movieDetails} className="movie__column-poster">
<img src={props.movieImage} alt="" className="movie__poster" />
</div>
</div>
);
export default Movie;
export default Movie;
src/components/Movie/MovieDetails.js
+10 -5
View File
@@ -13,13 +13,18 @@ export default function MovieDetails(props) {
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {props.movie.vote_average * 10}%{" "}
Rating: {props.movie.vote_average * 10}%{' '}
</span>
Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m
Release date: {props.movie.release_date || props.movie.first_air_date}{' '}
Runtime: {props.movie.runtime || props.movie.episode_run_time}m
</p>
<p className="modal__episode">
{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
{props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
{props.movie.number_of_episodes
? ' Episodes: ' + props.movie.number_of_episodes
: ''}
{props.movie.number_of_seasons
? ' Seasons: ' + props.movie.number_of_seasons
: ''}
</p>
<p className="modal__overview">{props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
@@ -33,4 +38,4 @@ export default function MovieDetails(props) {
</div>
</Aux>
);
}
}
src/components/MovieGenre.js
+1 -1
View File
@@ -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;
}
src/components/MovieGenreImage.js
+22 -12
View File
@@ -1,16 +1,26 @@
import React from 'react'
import React from 'react';
export default function MovieGenreImage(props) {
let netflixUrl = false;
let netflixUrl = false;
if (props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
netflixUrl = true;
}
if (
props.url ===
`https://api.themoviedb.org/3/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
netflixUrl = true;
}
return (
<div onClick={props.movieDetailsModal}
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={props.posterUrl} className="movieShowcase__container--movie-image" />
</div>
);
}
return (
<div
onClick={props.movieDetailsModal}
className={
'movieShowcase__container--movie' + (netflixUrl ? '__netflix' : '')
}
>
<img
src={props.posterUrl}
className="movieShowcase__container--movie-image"
/>
</div>
);
}
src/components/NavigationItem.js
+12 -7
View File
@@ -1,9 +1,14 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
// import React from 'react';
// import { NavLink } from 'react-router-dom';
const navigationItem = (props) => (
<NavLink className="navigation__container-link" exact={props.exact}
to={props.link}>{props.children}</NavLink>
)
// const navigationItem = (props) => (
// <NavLink
// // className="navigation__container-link"
// exact={props.exact}
// to={props.link}
// >
// {props.children}
// </NavLink>
// );
export default navigationItem;
// export default navigationItem;
src/components/UI/Backdrop.js
+5 -6
View File
@@ -1,9 +1,8 @@
import React from 'react';
const backdrop = (props) => (
props.show ? <div
onClick={props.toggleBackdrop}
className="backdrop"></div> : null
);
const backdrop = (props) =>
props.show ? (
<div onClick={props.toggleBackdrop} className="backdrop"></div>
) : null;
export default backdrop;
export default backdrop;
src/components/UI/Modal.js
+19 -17
View File
@@ -1,23 +1,25 @@
import React from 'react'
import React from 'react';
import Aux from '../../hoc/Aux';
import Backdrop from './Backdrop'
import Backdrop from './Backdrop';
export default function Modal(props) {
const backgroundStyle = {
backgroundSize: "cover",
backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path || props.movie.poster_path})`,
}
const backgroundStyle = {
backgroundSize: 'cover',
backgroundImage: `url(https://image.tmdb.org/t/p/original/${
props.movie.backdrop_path || props.movie.poster_path
})`,
};
return (
<Aux>
<Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
<div
style={backgroundStyle}
className={(props.show ? "modal show" : "modal hide")}>
{props.children}
</div>
</Aux>
)
return (
<Aux>
<Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
<div
style={backgroundStyle}
className={props.show ? 'modal show' : 'modal hide'}
>
{props.children}
</div>
</Aux>
);
}
src/containers/ActionMovies.js
+13 -16
View File
@@ -1,41 +1,38 @@
import React, { Component } from 'react'
import { bindActionCreators } from "redux";
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchActionMovies } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class ActionMovies extends Component {
componentWillMount() {
this.props.fetchActionMovies();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { actionMovies: state.action }
}
return { actionMovies: state.action };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchActionMovies }, dispatch)
}
return bindActionCreators({ fetchActionMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(ActionMovies);
export default connect(mapStateToProps, mapDispatchToProps)(ActionMovies);
src/containers/App.js
+4 -13
View File
@@ -1,14 +1,5 @@
import React, { Component } from 'react';
import Layout from './Layout';
import React from 'react';
import AppRouter from './AppRouter';
class App extends Component {
render() {
return (
<Layout />
)
}
}
export default App;
const App = () => <AppRouter />;
export default App;
src/containers/AppRouter.js
+22
View File
@@ -0,0 +1,22 @@
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import NotFound from './NotFound';
import Search from './Search';
import Navbar from './Navbar';
const AppRouter = () => (
<BrowserRouter>
<>
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/search" component={Search} />
<Route component={NotFound} />
</Switch>
</>
</BrowserRouter>
);
export default AppRouter;
src/containers/ComedyMovies.js
+12 -16
View File
@@ -1,42 +1,38 @@
import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchComedyMovies } from '../store/actions/index';
class ComedyMovies extends Component {
componentWillMount() {
this.props.fetchComedyMovies();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { movies: state.comedy }
}
return { movies: state.comedy };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchComedyMovies }, dispatch)
}
return bindActionCreators({ fetchComedyMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(ComedyMovies);
export default connect(mapStateToProps, mapDispatchToProps)(ComedyMovies);
src/containers/Documentaries.js
+12 -16
View File
@@ -1,42 +1,38 @@
import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchDocumentaries } from '../store/actions/index';
class Documentaries extends Component {
componentWillMount() {
this.props.fetchDocumentaries();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { movies: state.documentary }
}
return { movies: state.documentary };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchDocumentaries }, dispatch)
}
return bindActionCreators({ fetchDocumentaries }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(Documentaries);
export default connect(mapStateToProps, mapDispatchToProps)(Documentaries);
src/containers/Home.js
+66
View File
@@ -0,0 +1,66 @@
import React, { Component } from 'react';
import axios from "../axios-movies";
import Navbar from './Navbar';
import MainContent from './MainContent';
import Movie from '../components/Movie/Movie';
import Modal from '../components/UI/Modal';
import MovieDetails from '../components/Movie/MovieDetails';
class Home extends Component {
state = {
/** Toggles the movie list when the user starts typing. */
toggleMovieList: true,
/** An array that will hold all of our movie Components. */
// MovieList: [],
/** Toggles the modal when a movie is clicked. */
toggleModal: false,
/** Holds the movie information for a single movie. */
movieOverview: {},
}
/* Get the appropriate details for a specific movie that was clicked */
selectMovieHandler = (movie) => {
this.setState({ toggleModal: true });
let url;
/** 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=${process.env.API_KEY}`;
} else if (movie.media_type === "tv") {
const tvId = movie.id
url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`;
}
axios.get(url)
.then(res => {
const movieData = res.data;
this.setState({ movieOverview: movieData });
}).catch(error => {
console.log(error);
});
}
closeModal = () => {
this.setState({ toggleModal: false });
}
render() {
return (
<div>
<MainContent />
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}
movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} />
</Modal>
</div>
);
}
}
export default Home;
src/containers/HorrorMovies.js
+12 -16
View File
@@ -1,42 +1,38 @@
import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchHorrorMovies } from '../store/actions/index';
class HorrorMovies extends Component {
componentWillMount() {
this.props.fetchHorrorMovies();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { movies: state.horror }
}
return { movies: state.horror };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchHorrorMovies }, dispatch)
}
return bindActionCreators({ fetchHorrorMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(HorrorMovies);
export default connect(mapStateToProps, mapDispatchToProps)(HorrorMovies);
src/containers/Layout.js
-130
View File
@@ -1,130 +0,0 @@
import React, { Component } from 'react';
import axios from "axios";
import Navbar from './Navbar';
import MainContent from './MainContent';
import Movie from '../components/Movie/Movie';
import Modal from '../components/UI/Modal';
import MovieDetails from '../components/Movie/MovieDetails';
class Layout extends Component {
state = {
/** Toggles the movie list when the user starts typing. */
toggleMovieList: true,
/** An array that will hold all of our movie Components. */
MovieList: [],
/** Toggles the modal when a movie is clicked. */
toggleModal: false,
/** Holds the movie information for a single movie. */
movieOverview: {},
}
/** 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}`;
axios.get(url)
.then(res => {
const results = res.data.results;
let movieImageUrl;
/** Will hold all our movies Components */
let movieRows = [];
/** Loop through all the movies */
results.forEach((movie) => {
/** Manually build our image url and set it on the Movie component. */
if (movie.poster_path !== null && movie.media_type !== "person") {
movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
/** Set the movie object to our Movie component */
const movieComponent = <Movie
movieDetails={() => this.selectMovieHandler(movie)}
key={movie.id}
movieImage={movieImageUrl}
movie={movie} />
/** Push our movie component to our movieRows array */
movieRows.push(movieComponent);
}
})
/** Set our MovieList array to the movieRows array */
this.setState({ MovieList: movieRows });
}).catch(error => {
console.log(error);
});
}
/** Get the user input */
onSearchHandler = (event) => {
/** Display the movie list. */
this.setState({
toggleMovieList: false
});
const userInput = event.target.value;
/** Pass in the user input to make the API call. */
this.makeAipCall(userInput);
/** If the input is empty don't display the movie list. */
if (userInput === "") {
this.setState({
toggleMovieList: true
});
}
}
/* Get the appropriate details for a specific movie that was clicked */
selectMovieHandler = (movie) => {
this.setState({ toggleModal: true });
let url;
/** 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`;
} else if (movie.media_type === "tv") {
const tvId = movie.id
url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
}
axios.get(url)
.then(res => {
const movieData = res.data;
this.setState({ movieOverview: movieData });
}).catch(error => {
console.log(error);
});
}
closeModal = () => {
this.setState({ toggleModal: false });
}
render() {
return (
<div>
<Navbar showMovies={this.onSearchHandler} />
{
this.state.toggleMovieList ? <MainContent /> : <div
className="search-container">{this.state.MovieList}</div>
}
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}
movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} />
</Modal>
</div>
);
}
}
export default Layout;
src/containers/MainContent.js
+1 -4
View File
@@ -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 {
<TopRated />
<ActionMovies />
<ComedyMovies />
{/* <HorrorMovies /> */}
<Documentaries />
</div>
<Footer />
src/containers/Navbar.js
+73 -13
View File
@@ -1,15 +1,26 @@
import React, { Component } from 'react';
import NavigationItem from '../components/NavigationItem'
import { NavLink } from 'react-router-dom';
import _ from 'lodash';
import { withRouter } from 'react-router-dom';
import axios from '../axios-movies';
import Movie from '../components/Movie/Movie';
import SearchLogo from '../static/images/search-icon.svg';
import NetflixLogo from '../static/images/Netflix_Logo_RGB.png';
import BellLogo from '../static/images/bell-logo.svg';
import DropdownArrow from '../static/images/drop-down-arrow.svg';
import DropdownContent from "../components/DropdownContent";
class navigation extends Component {
state = {
scrolling: false
class Navbar extends Component {
constructor(props) {
super(props)
this.state = {
scrolling: false,
movieList: [],
userInput: ''
}
// use to debounce api call
this.makeAipCall = _.debounce(this.makeAipCall, 1000)
}
componentDidMount() {
@@ -30,15 +41,67 @@ class navigation extends Component {
}
}
onChange = async (event) => {
await this.setState({ userInput: event.target.value })
const { userInput } = this.state
await this.makeAipCall(userInput);
}
/** Make API call as soon as the user starts typing. */
makeAipCall = async (searchItem) => {
if (searchItem.length === 0) {
this.props.history.push('/')
return
}
const url = `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchItem}`;
const response = await axios.get(url);
const results = response.data.results;
let movieImageUrl;
/** Will hold all our movies Components */
let movieRows = [];
/** Loop through all the movies */
results.forEach((movie) => {
/** Manually build our image url and set it on the Movie component. */
if (movie.poster_path !== null && movie.media_type !== "person") {
movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
/** Set the movie object to our Movie component */
const movieComponent = <Movie
movieDetails={() => this.selectMovieHandler(movie)}
key={movie.id}
movieImage={movieImageUrl}
movie={movie} />
/** Push our movie component to our movieRows array */
movieRows.push(movieComponent);
}
})
/** Set our MovieList array to the movieRows array */
await this.setState({ movieList: movieRows });
this.props.history.push({
pathname: '/search',
movieRows: this.state.movieList,
userInput: searchItem
});
}
onLogoClick = () => {
// reset state
this.setState({ userInput: '' })
}
render() {
const { scrolling } = this.state;
const { showMovies } = this.props;
return (
<nav className={"navigation " + (scrolling ? "black" : "")} >
<ul className="navigation__container">
<NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt="" /></NavigationItem>
<NavLink to="/" onClick={() => this.onLogoClick()}>
<img className="navigation__container--logo" src={NetflixLogo} alt="" />
</NavLink>
<DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
<div className="navigation__container-link pseudo-link">Home</div>
<div className="navigation__container-link pseudo-link">TV Shows</div>
@@ -46,16 +109,14 @@ class navigation extends Component {
<div className="navigation__container-link pseudo-link">Recently Added</div>
<div className="navigation__container-link pseudo-link">My List</div>
<div className="navigation__container--left">
<SearchLogo className="logo" />
<input
onChange={showMovies}
value={this.state.userInput}
onChange={() => this.onChange(event)}
className="navigation__container--left__input"
type="text"
placeholder="Title, genres, people" />
</div>
<div className="navigation__container-link pseudo-link">KIDS</div>
@@ -64,11 +125,10 @@ class navigation extends Component {
<DropdownContent />
<DropdownArrow className="navigation__container--downArrow" />
</ul>
</nav>
)
}
}
export default navigation;
export default withRouter(Navbar);
src/containers/NetflixOriginals.js
+11 -15
View File
@@ -1,42 +1,38 @@
import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchNetflixOriginals } from '../store/actions/index';
class NetflixOriginals extends Component {
componentWillMount() {
this.props.fetchNetflixOriginals();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { movies: state.netflixOriginals }
}
return { movies: state.netflixOriginals };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchNetflixOriginals }, dispatch)
}
return bindActionCreators({ fetchNetflixOriginals }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(NetflixOriginals);
src/containers/NotFound.js
+9
View File
@@ -0,0 +1,9 @@
import React from 'react';
export default function NotFound() {
return (
<div>
<h1>NOT FOUND</h1>
</div>
);
}
src/containers/RomanceMovies.js
+12 -16
View File
@@ -1,42 +1,38 @@
import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchRomanceMovies } from '../store/actions/index';
class RomanceMovies extends Component {
componentWillMount() {
this.props.fetchRomanceMovies();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { movies: state.romance }
}
return { movies: state.romance };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchRomanceMovies }, dispatch)
}
return bindActionCreators({ fetchRomanceMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(RomanceMovies);
export default connect(mapStateToProps, mapDispatchToProps)(RomanceMovies);
src/containers/Search.js
+55
View File
@@ -0,0 +1,55 @@
import React, { Component } from 'react';
export default class Search extends Component {
constructor(props) {
super(props)
this.state = {
movies: []
}
}
componentDidMount = async () => {
const { movieRows } = this.props.history.location;
if (movieRows)
await this.setState({ movies: movieRows });
}
componentDidUpdate = async (prevProps) => {
if (
prevProps.location.movieRows.length !==
this.props.location.movieRows.length
) {
await this.setState({ movies: this.props.location.movieRows });
}
}
render() {
const { movies } = this.state
const { userInput } = this.props.location
return (
<>
{
this.state.movies.length > 0 ? (
<div className="search-container">
{this.state.movies}
</div>
) : (
<div className="no-results">
<div className="no-results__text">
<p>Your search for "{userInput}" did not have any matches.</p>
<p>Suggestions:</p>
<ul>
<li>Try different keywords</li>
<li>Looking for a movie or TV show?</li>
<li>Try using a movie, TV show title, an actor or director</li>
<li>Try a genre, like comedy, romance, sports, or drama</li>
</ul>
</div>
</div>
)
}
</>
);
}
}
src/containers/TopRated.js
+13 -16
View File
@@ -1,41 +1,38 @@
import React, { Component } from 'react'
import { bindActionCreators } from "redux";
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTopRated } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class TopRated extends Component {
componentWillMount() {
this.props.fetchTopRated();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { topRated: state.topRated }
}
return { topRated: state.topRated };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchTopRated }, dispatch)
}
return bindActionCreators({ fetchTopRated }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(TopRated);
export default connect(mapStateToProps, mapDispatchToProps)(TopRated);
src/containers/TrendingMovies.js
+12 -15
View File
@@ -1,41 +1,38 @@
import React, { Component } from 'react'
import { bindActionCreators } from "redux";
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTrending } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class TrendingMovies extends Component {
componentWillMount() {
this.props.fetchTrending();
}
render() {
let movies
// Call getMoviesRows function only when we get the data back
// from the API through redux
let movies;
// 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 (
<>
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">
{movies}
</div>
<div className="movieShowcase__container">{movies}</div>
</>
)
);
}
}
const mapStateToProps = (state) => {
return { trending: state.trending }
}
return { trending: state.trending };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchTrending }, dispatch)
}
return bindActionCreators({ fetchTrending }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(TrendingMovies);
src/getMovie.js
+17 -10
View File
@@ -3,21 +3,28 @@ import React from 'react';
export function getMovieRows(movies, url) {
const movieRow = movies.map((movie) => {
let movieImageUrl = "https://image.tmdb.org/t/p/w500/" + movie.backdrop_path;
if (url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
if (
url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
}
if (movie.poster_path && movie.backdrop_path !== null) {
const movieComponent = <MovieGenre
key={movie.id}
url={url}
posterUrl={movieImageUrl}
movie={movie} />
const movieComponent = (
<MovieGenre
key={movie.id}
url={url}
posterUrl={movieImageUrl}
movie={movie}
/>
);
return movieComponent;
}
});
return movieRow
}
return movieRow;
}
src/hoc/Aux.js
+1 -1
View File
@@ -1,3 +1,3 @@
const aux = (props) => props.children;
export default aux;
export default aux;
src/index.js
+9 -7
View File
@@ -1,10 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './store/reducers';
import promise from 'redux-promise';
import '@babel/polyfill';
import App from './containers/App';
// Import main sass file to apply global styles
@@ -12,12 +12,14 @@ import './static/sass/style.scss';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// TODO
// - fix styling issue
// - implement carousel
// - fix modal backdrop bug
const app = (
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
);
ReactDOM.render(app, document.getElementById('app'));
ReactDOM.render(app, document.getElementById('app'));
src/static/sass/components/_search.scss
+28
View File
@@ -8,4 +8,32 @@
height: 150%;
padding-bottom: 10rem;
padding-left: 4rem;
}
.no-results {
display: flex;
justify-content: center;
align-content: center;
color: #c5c5c5;
height: 100%;
padding-top: 25rem;
&__text {
font-size: 1.6rem;
&>* {
padding-bottom: 1.8rem;
}
&>ul {
// color: red;
padding-left: 6.5rem;
list-style: disc;
&>* {
padding-bottom: 0.2rem;
}
}
}
}
src/store/actions/index.js
+41 -27
View File
@@ -9,76 +9,90 @@ 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`);
const request = axios.get(
`/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
);
return {
type: FETCH_TRENDING,
payload: request
}
payload: request,
};
}
export function fetchNetflixOriginals() {
const request = axios.get(`/discover/tv?api_key=${API_KEY}&with_networks=213`);
const request = axios.get(
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
);
return {
type: FETCH_NETFLIX_ORIGINALS,
payload: request
}
payload: request,
};
}
export function fetchTopRated() {
const request = axios.get(`/movie/top_rated?api_key=${API_KEY}&language=en-US`)
const request = axios.get(
`/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
);
return {
type: FETCH_TOP_RATED,
payload: request
}
payload: request,
};
}
export function fetchActionMovies() {
const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=28`)
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
);
return {
type: FETCH_ACTION_MOVIES,
payload: request
}
payload: request,
};
}
export function fetchComedyMovies() {
const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=35`)
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=35`
);
return {
type: FETCH_COMEDY_MOVIES,
payload: request
}
payload: request,
};
}
export function fetchHorrorMovies() {
const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=27`)
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
);
return {
type: FETCH_HORROR_MOVIES,
payload: request
}
payload: request,
};
}
export function fetchRomanceMovies() {
const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=10749`)
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=10749`
);
return {
type: FETCH_ROMANCE_MOVIES,
payload: request
}
payload: request,
};
}
export function fetchDocumentaries() {
const request = axios.get(`/discover/movie?api_key=${API_KEY}&with_genres=99`)
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
);
return {
type: FETCH_DOCUMENTARIES,
payload: request
}
}
payload: request,
};
}
src/store/reducers/index.js
+2 -3
View File
@@ -8,7 +8,6 @@ import HorrorMoviesReducer from './reducerHorrorMovies';
import RomanceMoviesReducer from './reducerRomanceMovies';
import DocumentaryReducer from './reducerDocumentary';
const rootReducer = combineReducers({
trending: TrendingReducer,
netflixOriginals: NetflixOriginalsReducer,
@@ -17,7 +16,7 @@ const rootReducer = combineReducers({
comedy: ComedyMoviesReducer,
horror: HorrorMoviesReducer,
romance: RomanceMoviesReducer,
documentary: DocumentaryReducer
documentary: DocumentaryReducer,
});
export default rootReducer;
export default rootReducer;
src/store/reducers/reducerActionMovies.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_ACTION_MOVIES:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
src/store/reducers/reducerComedyMovies.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_COMEDY_MOVIES:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
src/store/reducers/reducerDocumentary.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_DOCUMENTARIES:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
src/store/reducers/reducerHorrorMovies.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_HORROR_MOVIES:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
src/store/reducers/reducerNetflixOriginals.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_NETFLIX_ORIGINALS:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
src/store/reducers/reducerRomanceMovies.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_ROMANCE_MOVIES:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
src/store/reducers/reducerTopRated.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_TOP_RATED:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
src/store/reducers/reducerTrending.js
+2 -2
View File
@@ -4,8 +4,8 @@ export default function (state = {}, action) {
switch (action.type) {
case FETCH_TRENDING:
const data = action.payload.data.results;
return { ...state, data }
return { ...state, data };
default:
return state;
}
}
}
webpack.config.js
+85 -64
View File
@@ -1,74 +1,95 @@
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const dotenv = require('dotenv');
const webpack = require('webpack');
var path = require('path');
module.exports = () => {
// call dotenv and it will return an Object with a parsed key
const env = dotenv.config().parsed;
module.exports = {
// reduce env variables to an oject
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next]);
return prev;
}, {});
entry: "./src/index.js",
output: {
filename: "bundle.js",
},
module: {
console.log('keys', envKeys);
return {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.svg$/,
exclude: /node_modules/,
use: {
loader: 'svg-react-loader'
}
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader',
'sass-loader'
]
},
{
test: /\.(gif|png|jpe?g)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
},
},
],
}
]
},
node: {
fs: "empty"
},
plugins: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.svg$/,
exclude: /node_modules/,
use: {
loader: 'svg-react-loader',
},
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.(gif|png|jpe?g)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
},
},
],
},
],
},
devServer: {
historyApiFallback: true,
},
node: {
fs: 'empty',
},
plugins: [
new webpack.DefinePlugin(envKeys),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
template: './src/index.html',
filename: './index.html',
}),
new CopyWebpackPlugin([{ from: 'src/static/images', to: 'static/images' }]),
new CopyWebpackPlugin([
{ from: 'src/static/images', to: 'static/images' },
]),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "main.css"
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'main.css',
}),
new CleanWebpackPlugin(['dist']),
]
};
],
};
};