Add more movies

src/actions/index.js

@@ -5,8 +5,10 @@ export const GET_TOP_RATED = 'GET_TOP_RATED';
 export const ADD_FILTER = 'ADD_FILTER';
 export const REMOVE_FILTER = 'REMOVE_FILTER';
 export const RESET_FILTER = 'RESET_FILTER';
+export const ADD_MOVIES = 'ADD_MOVIES';
 
 export const loadTrending = movie => ({ type: GET_TRENDING, movie });
+export const addMovies = movies => ({ type: ADD_MOVIES, movies });
 export const loadPopular = movies => ({ type: GET_POPULAR, movies });
 export const loadTopRated = movies => ({ type: GET_TOP_RATED, movies });
 export const loadUpcoming = movies => ({ type: GET_UPCOMING, movies });

src/containers/Popular.js

@@ -2,17 +2,19 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { PopularMovies } from '../helpers/api_methods/api';
-import { loadPopular } from '../actions';
+import { addMovies, loadPopular } from '../actions';
 import Loading from '../components/Loading';
 import '../styles/catalogue/Catalogue.css';
 import MoviePoster from './MoviePoster';
 import filteredMovies from '../helpers/filter';
 
-const PopularCatalogue = ({ movies, loader, filters }) => {
+const PopularCatalogue = ({
+  movies, loader, filters, adder,
+}) => {
   const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
-    PopularMovies(loader, setLoading);
+    PopularMovies(loader, setLoading, adder);
   }, [loader]);
 
   if (isLoading) {
@@ -32,12 +34,14 @@ PopularCatalogue.propTypes = {
   filters: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   movies: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   loader: PropTypes.func.isRequired,
+  adder: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => ({ movies: state.movies, filters: state.filter });
 
 const mapDispatchToProps = dispatch => ({
   loader: movies => dispatch(loadPopular(movies)),
+  adder: movies => dispatch(addMovies(movies)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(PopularCatalogue);

src/containers/TopRated.js

@@ -2,17 +2,19 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { TopRatedMovies } from '../helpers/api_methods/api';
-import { loadTopRated } from '../actions';
+import { addMovies, loadTopRated } from '../actions';
 import Loading from '../components/Loading';
 import '../styles/catalogue/Catalogue.css';
 import MoviePoster from './MoviePoster';
 import filteredMovies from '../helpers/filter';
 
-const PopularCatalogue = ({ movies, loader, filters }) => {
+const PopularCatalogue = ({
+  movies, loader, filters, adder,
+}) => {
   const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
-    TopRatedMovies(loader, setLoading);
+    TopRatedMovies(loader, setLoading, adder);
   }, [loader]);
 
   if (isLoading) {
@@ -32,12 +34,14 @@ PopularCatalogue.propTypes = {
   movies: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   filters: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   loader: PropTypes.func.isRequired,
+  adder: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => ({ movies: state.movies, filters: state.filter });
 
 const mapDispatchToProps = dispatch => ({
   loader: movies => dispatch(loadTopRated(movies)),
+  adder: movies => dispatch(addMovies(movies)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(PopularCatalogue);

src/containers/Upcoming.js

@@ -2,17 +2,19 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { UpcomingMovies } from '../helpers/api_methods/api';
-import { loadUpcoming } from '../actions';
+import { addMovies, loadUpcoming } from '../actions';
 import Loading from '../components/Loading';
 import '../styles/catalogue/Catalogue.css';
 import MoviePoster from './MoviePoster';
 import filteredMovies from '../helpers/filter';
 
-const PopularCatalogue = ({ movies, loader, filters }) => {
+const PopularCatalogue = ({
+  movies, loader, filters, adder,
+}) => {
   const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
-    UpcomingMovies(loader, setLoading);
+    UpcomingMovies(loader, setLoading, adder);
   }, [loader]);
 
   if (isLoading) {
@@ -32,12 +34,14 @@ PopularCatalogue.propTypes = {
   movies: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   filters: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   loader: PropTypes.func.isRequired,
+  adder: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => ({ movies: state.movies, filters: state.filter });
 
 const mapDispatchToProps = dispatch => ({
   loader: movies => dispatch(loadUpcoming(movies)),
+  adder: movies => dispatch(addMovies(movies)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(PopularCatalogue);

src/helpers/api_methods/api.js

@@ -12,26 +12,38 @@ export const topTrending = async (loader, setLoading, setVideoURL) => {
     });
 };
 
-export const PopularMovies = async (loader, setLoading) => {
+export const PopularMovies = async (loader, setLoading, adder) => {
   await axios.get(`${process.env.REACT_APP_POPULAR}?api_key=${process.env.REACT_APP_API_KEY}`)
     .then(response => {
       loader(response.data.results);
+      axios.get(`${process.env.REACT_APP_POPULAR}?api_key=${process.env.REACT_APP_API_KEY}&page=2`)
+        .then(response => adder(response.data.results));
+      axios.get(`${process.env.REACT_APP_POPULAR}?api_key=${process.env.REACT_APP_API_KEY}&page=3`)
+        .then(response => adder(response.data.results));
       setLoading(false);
     });
 };
 
-export const TopRatedMovies = async (loader, setLoading) => {
+export const TopRatedMovies = async (loader, setLoading, adder) => {
   await axios.get(`${process.env.REACT_APP_TOP_RATED}?api_key=${process.env.REACT_APP_API_KEY}`)
     .then(response => {
       loader(response.data.results);
+      axios.get(`${process.env.REACT_APP_TOP_RATED}?api_key=${process.env.REACT_APP_API_KEY}&page=2`)
+        .then(response => adder(response.data.results));
+      axios.get(`${process.env.REACT_APP_TOP_RATED}?api_key=${process.env.REACT_APP_API_KEY}&page=3`)
+        .then(response => adder(response.data.results));
       setLoading(false);
     });
 };
 
-export const UpcomingMovies = async (loader, setLoading) => {
+export const UpcomingMovies = async (loader, setLoading, adder) => {
   await axios.get(`${process.env.REACT_APP_UPCOMING}?api_key=${process.env.REACT_APP_API_KEY}`)
     .then(response => {
       loader(response.data.results);
+      axios.get(`${process.env.REACT_APP_UPCOMING}?api_key=${process.env.REACT_APP_API_KEY}&page=2`)
+        .then(response => adder(response.data.results));
+      axios.get(`${process.env.REACT_APP_UPCOMING}?api_key=${process.env.REACT_APP_API_KEY}&page=3`)
+        .then(response => adder(response.data.results));
       setLoading(false);
     });
 };

src/reducers/movies.js

@@ -1,9 +1,11 @@
 import {
-  GET_UPCOMING, GET_POPULAR, GET_TOP_RATED,
+  GET_UPCOMING, GET_POPULAR, GET_TOP_RATED, ADD_MOVIES,
 } from '../actions';
 
 const moviesReducer = (state = [], action) => {
   switch (action.type) {
+    case ADD_MOVIES:
+      return [...state, ...action.movies];
     case GET_POPULAR:
       return action.movies;
     case GET_TOP_RATED: