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

set env variables config in webpack file

Browse Source
This commit is contained in:
andres alcocer
2020-05-14 17:38:17 -04:00
parent 4d3655e576
commit 3faffa603a
41 changed files with 2774 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>
);
}
}

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=224ce27b38a3805ecf6f6c36eb3ba9d0&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>
);
}

30
src/containers/ActionMovies.js
View File

@@ -1,41 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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;

29
src/containers/ComedyMovies.js
View File

@@ -1,42 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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);

29
src/containers/Documentaries.js
View File

@@ -1,42 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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);

29
src/containers/HorrorMovies.js
View File

@@ -1,42 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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);

1
src/containers/Layout.js
View File

@@ -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}>

27
src/containers/NetflixOriginals.js
View File

@@ -1,42 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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);

29
src/containers/RomanceMovies.js
View File

@@ -1,42 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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);

30
src/containers/TopRated.js
View File

@@ -1,41 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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);

28
src/containers/TrendingMovies.js
View File

@@ -1,41 +1,39 @@
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=224ce27b38a3805ecf6f6c36eb3ba9d0&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);

28
src/getMovie.js
View File

@@ -3,21 +3,29 @@ 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=224ce27b38a3805ecf6f6c36eb3ba9d0&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;

14
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';
@@ -13,11 +13,11 @@ import './static/sass/style.scss';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
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'));

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

@@ -12,73 +12,89 @@ 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=${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=${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=${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=${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=${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=${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=${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;
}
}
}