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

Merge pull request #16 from AndresXI/setup-run-script

Browse Source 
Setup run script
This commit is contained in:
Andres Alcocer
2020-05-15 15:19:10 -04:00
committed by GitHub
parent 0b7dc698e3 0c36c7ee10
commit 933ffb51d4
43 changed files with 2783 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore Normal file
View File

@@ -0,0 +1,2 @@
client/dist/
node_modules/

25
.eslintrc.json Normal file
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"]
}
}

3
.prettierignore Normal file
View File

@@ -0,0 +1,3 @@
package-lock.json
.next
node_modules/

3
.prettierrc Normal file
View File

@@ -0,0 +1,3 @@
{
"singleQuote": true
}

8
README.md
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!

2389
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@@ -4,12 +4,14 @@
"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",
@@ -38,6 +40,14 @@
"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",
@@ -46,13 +56,16 @@
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.10.0",
"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",
"watch": "^1.0.2",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
}

6
src/axios-movies.js
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;

4
src/components/DropdownContent.js
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;

16
src/components/Footer.js
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;

16
src/components/Header.js
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>
)
}
);
}

12
src/components/Movie/Movie.js
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;

15
src/components/Movie/MovieDetails.js
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>
);
}
}

2
src/components/MovieGenre.js
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;
}

34
src/components/MovieGenreImage.js
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>
);
}

13
src/components/NavigationItem.js
View File

@@ -2,8 +2,13 @@ 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>
)
<NavLink
className="navigation__container-link"
exact={props.exact}
to={props.link}
>
{props.children}
</NavLink>
);
export default navigationItem;
export default navigationItem;

11
src/components/UI/Backdrop.js
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;

36
src/components/UI/Modal.js
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>
);
}

29
src/containers/ActionMovies.js
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);

8
src/containers/App.js
View File

@@ -1,14 +1,10 @@
import React, { Component } from 'react';
import Layout from './Layout';
class App extends Component {
render() {
return (
<Layout />
)
return <Layout />;
}
}
export default App;
export default App;

28
src/containers/ComedyMovies.js
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);

28
src/containers/Documentaries.js
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);

28
src/containers/HorrorMovies.js
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);

9
src/containers/Layout.js
View File

@@ -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)
@@ -113,7 +113,6 @@ class Layout extends Component {
this.state.toggleMovieList ? <MainContent /> : <div
className="search-container">{this.state.MovieList}</div>
}
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}
movie={this.state.movieOverview}>

5
src/containers/MainContent.js
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 />

26
src/containers/NetflixOriginals.js
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);

28
src/containers/RomanceMovies.js
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);

29
src/containers/TopRated.js
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);

27
src/containers/TrendingMovies.js
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);

27
src/getMovie.js
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;
}

2
src/hoc/Aux.js
View File

@@ -1,3 +1,3 @@
const aux = (props) => props.children;
export default aux;
export default aux;

20
src/index.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './store/reducers';
@@ -12,12 +12,18 @@ 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 = (
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById('app'));
ReactDOM.render(app, document.getElementById('app'));

68
src/store/actions/index.js
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,
};
}

5
src/store/reducers/index.js
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;

4
src/store/reducers/reducerActionMovies.js
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;
}
}
}

4
src/store/reducers/reducerComedyMovies.js
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;
}
}
}

4
src/store/reducers/reducerDocumentary.js
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;
}
}
}

4
src/store/reducers/reducerHorrorMovies.js
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;
}
}
}

4
src/store/reducers/reducerNetflixOriginals.js
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;
}
}
}

4
src/store/reducers/reducerRomanceMovies.js
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;
}
}
}

4
src/store/reducers/reducerTopRated.js
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;
}
}
}

4
src/store/reducers/reducerTrending.js
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;
}
}
}

143
webpack.config.js
View File

@@ -1,74 +1,89 @@
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');
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: {
filename: 'bundle.js',
},
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
},
},
],
},
],
},
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']),
]
};
],
};
};