diff --git a/src/actions/index.js b/src/actions/index.js index 91fba78b..0be7363a 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -29,7 +29,11 @@ export function setSelectedCountry(selectedCountry) { }; } - +/** + * + * @param {Array.} movies + * @return {Object.} + */ export function setMovies(movies) { return { type: types.SET_MOVIES, @@ -40,7 +44,7 @@ export function setMovies(movies) { /** * * @param {String} url - * @return {Object.} action + * @return {Function} async function */ export function getMovies(url) { /** @@ -58,4 +62,40 @@ export function getMovies(url) { } }; -} \ No newline at end of file +} + +/** + * + * @param {Array.} countries + * @return {Object.} + */ +export function setCountries(countries) { + return { + type: types.SET_COUNTRIES, + countries + }; +} + +/** + * + * @param {String} url + * @return {Function} async function + */ +export function getCountries(url) { + /** + * 'dispatch' is the same one that we use to dispatch actions to Redux + * + * 'getState' is a function that if you need to do something based on + * the Redux store's data, you can call it to get the current state. + */ + return async function (dispatch, getState) { + try { + const { data } = await api.get(url); + dispatch(setCountries(data)); + } catch (err) { + throw new Error('ReactMovies: ', err); + } + }; + +} + diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index 3c4bfcbc..d7800035 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -3,6 +3,7 @@ */ export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; export const SET_SELECTED_COUNTRY = 'SET_SELECTED_COUNTRY'; +export const SET_COUNTRIES = 'SET_COUNTRIES'; export const GET_COUNTRIES = 'GET_COUNTRIES'; export const GET_MOVIES = 'GET_MOVIES'; export const SET_MOVIES = 'SET_MOVIES'; \ No newline at end of file diff --git a/src/containers/RmLanding/RmLanding.jsx b/src/containers/RmLanding/RmLanding.jsx index a4c5a603..f68fa7c3 100644 --- a/src/containers/RmLanding/RmLanding.jsx +++ b/src/containers/RmLanding/RmLanding.jsx @@ -3,37 +3,31 @@ import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; import { COUNTRIES } from '../../constants/Urls'; -import api from 'api'; -import { setSelectedCountry } from '../../actions'; +import { getCountries, setSelectedCountry } from '../../actions'; class RmLanding extends Component { - constructor() { - super(); - - this.state = { - countries: [] - }; + constructor(props) { + super(props); this.handleChange = this.handleChange.bind(this); } /** - * @async - * @return {Promise} + * + * @return {void} */ - async componentWillMount() { - try { - const { data } = await api.get(`${COUNTRIES}/all`); - this.setState({countries: data}); - } catch (err) { - throw new Error('ReactMovies: ', err); + componentWillMount() { + + if (!this.props.countries.length) { + this.props.dispatch(getCountries(`${COUNTRIES}/all`)); } + } render () { - const { countries } = this.state; - const { selectedCountry } = this.props; + + const { selectedCountry, countries } = this.props; return (
@@ -78,7 +72,8 @@ class RmLanding extends Component { } const mapStateToProps = (state) => ({ - selectedCountry: state.selectedCountry + selectedCountry: state.selectedCountry, + countries: state.countries }); export default connect(mapStateToProps)(RmLanding); \ No newline at end of file diff --git a/src/reducers/countries.js b/src/reducers/countries.js new file mode 100644 index 00000000..37429497 --- /dev/null +++ b/src/reducers/countries.js @@ -0,0 +1,25 @@ +/** + * @module reducers/movies + */ + +import { SET_COUNTRIES } from '../constants/ActionTypes'; + +/** + * + * @param state + * @param action + * @return {*} + */ +export default function countries(state = [], action) { + + switch (action.type) { + + case SET_COUNTRIES: + + return [...action.countries]; + + default: + return state; + } + +} \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 046dc777..e2b8877b 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -3,12 +3,14 @@ */ import { combineReducers } from 'redux'; +import movies from './movies'; import searchTerm from './searchTerm'; import selectedCountry from './selectedCountry'; -import movies from './movies'; +import countries from './countries'; export default combineReducers({ + movies, searchTerm, selectedCountry, - movies + countries }); \ No newline at end of file