build(webpack): install 'copy-webpack-plugin' to copy 'assets' folder

remove 'movies' props from being passed in Main.jsx and retrieve those via AJAX in the
'componentWillMount' lifecycle hook

config/webpack.common.js

@@ -1,5 +1,6 @@
 const { setupPath } = require('./helpers');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
 
@@ -78,6 +79,16 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       template: setupPath('../src/index.html')
-    })
+    }),
+    // copy files and folders to specific paths.
+    new CopyWebpackPlugin([{
+      // Copy `assets` contents to {output}/assets/
+      from: 'src/assets',
+      to: 'assets',
+      ignore: [
+        // Doesn't copy any files with a scss extension
+        '*.scss'
+      ],
+    }])
   ]
 };

package.json

@@ -57,11 +57,12 @@
     "babel-plugin-transform-es2015-unicode-regex": "6.24.1",
     "babel-plugin-transform-es5-property-mutators": "6.24.1",
     "babel-plugin-transform-regenerator": "6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-plugin-transform-runtime": "6.23.0",
     "babel-preset-env": "1.6.0",
     "babel-preset-react": "6.24.1",
     "babel-register": "6.26.0",
     "commitizen": "2.9.6",
+    "copy-webpack-plugin": "4.3.1",
     "css-loader": "0.28.7",
     "cz-conventional-changelog": "2.0.0",
     "enzyme": "3.2.0",

src/Main.jsx

@@ -12,7 +12,6 @@ import store from './store';
 
 // import main CSS styles
 import './assets/scss/styles.scss';
-import movies from './assets/json/movies.json';
 
 import RmLanding from 'Containers/RmLanding/RmLanding';
 import RmMovies from 'Containers/RmMovies/RmMovies';
@@ -30,7 +29,7 @@ class MainComponent extends React.Component {
               <Route exact path="/" component={RmLanding} />
               <Route
                 path="/movies"
-                component={props => <RmMovies movies={movies} {...props} />}
+                component={props => <RmMovies {...props} />}
               />
               <Route
                 path="/details/:id"

src/actions/index.js

@@ -3,6 +3,7 @@
  */
 
 import * as types from '../constants/ActionTypes';
+import api from 'api';
 
 /**
  *
@@ -26,4 +27,12 @@ export function setSelectedCountry(selectedCountry) {
     type: types.SET_SELECTED_COUNTRY,
     selectedCountry
   };
-}
+}
+
+
+export function setCountries(countries) {
+  return {
+    type: types.SET_COUNTRIES,
+    countries
+  };
+}

src/constants/ActionTypes.js

@@ -2,4 +2,6 @@
  * @module constants/ActionTypes
  */
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
-export const SET_SELECTED_COUNTRY = 'SET_SELECTED_COUNTRY';
+export const SET_SELECTED_COUNTRY = 'SET_SELECTED_COUNTRY';
+export const SET_COUNTRIES = 'GET_COUNTRIES';
+export const GET_MOVIES = 'GET_MOVIES';

src/containers/RmMovies/RmMovies.jsx

@@ -5,6 +5,7 @@ import { arrayOf, shape, string, number } from 'prop-types';
 import { setSearchTerm } from '../../actions';
 import RmHeader from 'Components/RmHeader/RmHeader';
 import MovieCard from 'Components/RmMovieCard/RmMovieCard';
+import api from 'api';
 
 class RmMovies extends Component {
 
@@ -13,11 +14,30 @@ class RmMovies extends Component {
 
     this.searchTermHandler = this.searchTermHandler.bind(this);
 
+    this.state = {
+      movies: []
+    };
+
+  }
+
+  /**
+   * @async
+   * @return {Promise<void>}
+   */
+  async componentWillMount() {
+    try {
+      const { data } = await api.get(`../../assets/json/movies.json`);
+      this.setState({movies: data});
+    } catch (err) {
+      throw new Error('ReactMovies: ', err);
+    }
   }
 
   render() {
 
-    const { movies, searchTerm } = this.props;
+    const { searchTerm } = this.props;
+
+    const { movies } = this.state;
 
     return (
       <section>
@@ -56,15 +76,15 @@ class RmMovies extends Component {
 
 }
 
-RmMovies.propTypes = {
+/*RmMovies.propTypes = {
   movies: arrayOf(shape({
     id: number,
     movieTitle: string,
     country: string,
     description: string,
     movieGenre: string
   }))
-};
+};*/
 
 const mapStateToProps = (state) => ({
   searchTerm: state.searchTerm