Make code more clear and easy to follow

Author: Rizchel Dayao

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "React Redux API Example",
+  "name": "MovieFinder",
   "version": "0.0.1",
   "description": "React Redux application that calls the OMDb api to get information on a specific movie",
   "repository": "git+https://github.com/rizcheldayao/react-redux-api-example",

src/actions/index.js

@@ -1,13 +1,6 @@
 import fetch from 'isomorphic-fetch';
 import ActionTypes from '../constants';
 
-export const setResults = (result) => ({
-  type: ActionTypes.SET_RESULTS,
-  payload: {
-    result
-  },
-});
-
 function retrieveMoviesStart() {
   return {
     type: ActionTypes.RETRIEVE_MOVIES_START,
@@ -17,24 +10,21 @@ function retrieveMoviesStart() {
 function retrieveMoviesError(error) {
   return {
     type: ActionTypes.RETRIEVE_MOVIES_ERROR,
-    payload: {
-      error
-    }
+    payload: error
   };
 }
 
 function retrieveMoviesSuccess(response) {
   return {
     type: ActionTypes.RETRIEVE_MOVIES_SUCCESS,
-    payload:
-      response
+    payload: response
   };
 }
 
 export function retrieveMovies(userInput) {
   return dispatch => {
   // Insert your api key on line 30
-  const URL = `http://www.omdbapi.com/?apikey=[apiKey]&t=${userInput}`;
+  const URL = `http://www.omdbapi.com/?apikey=d8c6a83b&t=${userInput}`;
   let request = new Request(URL, {
     method: 'GET',
   });

src/components/ListItem.js

@@ -0,0 +1,22 @@
+import React, { PropTypes, Component } from 'react';
+import { connect } from 'react-redux';
+import '../style/main.css';
+
+class ListItem extends Component {
+  render() {
+    const { list } = this.props;
+    return (
+      <div className="list-item">
+        <ul>
+          {list}
+        </ul>
+    </div>
+    );
+  }
+}
+
+ListItem.PropTypes = {
+  list: PropTypes.array,
+}
+
+export default ListItem;

src/constants/index.js

@@ -1,6 +1,5 @@
 export default {
   RETRIEVE_MOVIES_START:'RETRIEVE_MOVIES_START',
   RETRIEVE_MOVIES_ERROR:'RETRIEVE_MOVIES_ERROR',
-  RETRIEVE_MOVIES_SUCCESS:'RETRIEVE_MOVIES_SUCCESS',
-  SET_RESULTS:'SET_RESULTS'
+  RETRIEVE_MOVIES_SUCCESS:'RETRIEVE_MOVIES_SUCCESS'
 };

src/containers/App.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import List from '../components/List'
+import List from './List'
 import InputSet from './InputSet';
 import * as MoviesAction from '../actions'
 import { bindActionCreators } from 'redux'
@@ -11,9 +11,9 @@ class App extends Component {
   render() {
     return (
       <div className="container">
-        <h1>Find That Movie</h1>
+        <h1>Movie Finder</h1>
         <InputSet />
-        <List movies={this.props.movies} />
+        <List />
       </div>
     );
   }

src/containers/InputSet.js

@@ -10,7 +10,6 @@ class InputSet extends Component {
     super(props)
     this.state = {
       input: '',
-      // result: {}
     }
 
     this.handleKeyPress = this.handleKeyPress.bind(this)
@@ -19,12 +18,8 @@ class InputSet extends Component {
   }
 
   handleResponse(input) {
-    const { retrieveMovies, setResults } = this.props;
+    const { retrieveMovies } = this.props;
     const result = retrieveMovies(input);
-    // this.setState({
-    //   result: result
-    // })
-    setResults(result);
   }
 
   handleChange(e) {
@@ -51,8 +46,7 @@ class InputSet extends Component {
 
 InputSet.propTypes = {
   movies: PropTypes.object,
-  retrieveMovies: PropTypes.func,
-  setResults: PropTypes.func,
+  retrieveMovies: PropTypes.func
 }
 
 function mapStateToProps(state) {

src/components/List.js src/containers/List.jssrc/components/List.js renamed to src/containers/List.js

@@ -1,20 +1,16 @@
 import React, { PropTypes, Component } from 'react';
 import { connect } from 'react-redux';
 import '../style/main.css';
+import ListItem from '../components/ListItem';
+import createList from '../utils';
 
 class List extends Component {
   render() {
-    var myList = [];
-    for (var prop in this.props.movies.items) {
-      if(myList.length < 13) {
-        myList.push(<li key={prop}><p>{`${prop}: ${this.props.movies.items[prop]}`}</p></li>);
-      }
-  }
+    const { movies } = this.props;
+    const myList = createList(movies);
     return (
       <div className="list">
-        <ul>
-          {myList}
-        </ul>
+        {myList.length > 0 && <ListItem list={myList} />}
     </div>
     );
   }

src/reducers/index.js

@@ -1,44 +1,13 @@
-// import { combineReducers } from 'redux'
-import ActionTypes from '../constants'
 import { combineReducers } from 'redux';
 import { routerStateReducer } from 'redux-router';
+import ActionTypes from '../constants'
 
 const initialState = {
   isFetching: false,
   items: [],
-  errorDetails: '',
-  result: ''
+  errorDetails: ''
 };
 
-// export const handlers = {
-//   [ActionTypes.RETRIEVE_MOVIES_START](state, action) {
-//     return {
-//       ...state,
-//       isFetching: true,
-//     };
-//   },
-//   [ActionTypes.RETRIEVE_MOVIES_ERROR](state, action) {
-//     return {
-//       ...state,
-//       isFetching: false,
-//       errorDetails: action.payload.error,
-//     };
-//   },
-//   [ActionTypes.RETRIEVE_MOVIES_SUCCESS](state, action) {
-//     return {
-//       ...state,
-//       isFetching: false,
-//       items: action.payload.response,
-//     };
-//   },
-//   [ActionTypes.RETRIEVE_MOVIES_SUCCESS](state, action) {
-//     return {
-//       ...state,
-//       results: action.payload.response,
-//     };
-//   },
-// };
-
 function movies(state = initialState, action) {
   switch (action.type) {
     case ActionTypes.RETRIEVE_MOVIES_START:
@@ -55,10 +24,6 @@ function movies(state = initialState, action) {
         isFetching: false,
         items: action.payload
       })
-      case ActionTypes.SET_RESULTS:
-      return Object.assign({}, state, {
-        results: action.payload,
-      })
     default:
       return state
   }

src/style/main.css

@@ -61,11 +61,14 @@ input[type=text]:focus {
 
 .list {
   width: 100%;
-  margin-top: 2em;
+  margin: 2rem 0; }
+
+.list-item {
+  width: 100%;
   background: #fff;
   min-height: 500px;
   border-radius: 5px;
-  margin-bottom: 2em; }
+  padding: 0.5rem 0; }
 
 @media only screen and (min-width: 992px) {
   .container {

src/style/main.scss

@@ -74,11 +74,15 @@ input[type=text]:focus {
 
 .list {
   width: 100%;
-  margin-top: 2em;
+  margin: 2rem 0;
+}
+
+.list-item {
+  width: 100%;
   background: $white;
   min-height: 500px;
   border-radius: 5px;
-  margin-bottom: 2em;
+  padding: 0.5rem 0;
 }
 
 @media only screen and (min-width: 992px) {