Use redux in movie list

src/public/js/actions/actionCreators.js

@@ -1,7 +1,17 @@
+export const ADD_MOVIES = 'ADD_MOVIES'
+export const SELECT_MOVIE = 'SELECT_MOVIE'
+
 // Select Movie
 export function selectMovie(index) {
   return {
-    type: "SELECT_MOVIE",
+    type: SELECT_MOVIE,
     index
   }
 }
+
+export function addMovies(movies) {
+  return {
+    type: ADD_MOVIES,
+    movies
+  }
+}

src/public/js/app.js

@@ -34,7 +34,7 @@ class Main extends React.Component {
 function mapStateToProps(state) {
   return {
     movieStore: state.movieStore,
-  };
+  }
 }
 
 function mapDispatchToProps(dispatch) {

src/public/js/components/movie-list.jsx

@@ -6,13 +6,17 @@ function MoviePosters(props) {
   return (
     <div className="col-xs-5 col-md-8">
       <div className="row">
-        {movies.map((movie, index) =>
+        {movies.map(function(movie, index) {
+          const selected = (index === props.selectedMovieIndex) ? true : false;
+          return (
             <MoviePoster
               data={movie}
               key={movie.ID}
-              onClick={ (e) => props.onClick(e, index) }
+              selected={selected}
+              onClick={() => props.onClick(index)}
             />
           )}
+        )}
       </div>
     </div>
   );
@@ -20,7 +24,7 @@ function MoviePosters(props) {
 
 function MoviePoster(props) {
   const imgUrl = '/img/movies/' + props.data.imdb_id +'.jpg';
-  const selected = props.data.selected ? ' thumbnail-selected' : '';
+  const selected = props.selected ? ' thumbnail-selected' : '';
   const imgClass = 'thumbnail' + selected;
   return (
     <div className="col-xs-12 col-md-3">
@@ -52,55 +56,29 @@ function MovieDetails(props) {
 }
 
 export default class MovieList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      movies: [],
-      currentMovie: {},
-    };
-    this.handleClick = this.handleClick.bind(this);
-  }
-  handleClick(e,i) {
-    e.preventDefault();
-    let movies = this.state.movies.slice();
-    this.setMovies(movies, i);
-  }
-  setMovies(movies, index) {
-    let currentMovie = {};
-    movies.map(function(movie) {
-      movie.selected = false;
-      return {movie: movie};
-    });
-    if (!index && movies.length) {
-      index = 0;
-      currentMovie = movies[0];
-    }
-    if (index !== null) {
-      currentMovie = movies[index];
-      movies[index].selected = true;
-    }
-    this.setState({
-      movies: movies,
-      currentMovie: currentMovie,
-    });
-  }
   componentDidMount() {
     var _this = this;
     this.serverRequest =
       axios
       .get("/movies/explore/popular")
       .then(function(result) {
-        _this.setMovies(result.data.Data.movies);
+        _this.props.addMovies(result.data.Data.movies)
       })
   }
-  componentWillUnmount() {
-    this.serverRequest.abort();
-  }
   render() {
+    const movies = this.props.movieStore.movies;
+    const index = this.props.movieStore.selectedMovieIndex;
+    const selectedMovie = movies[index];
     return (
       <div className="row" id="movie-library">
-        <MoviePosters movies={this.state.movies} onClick={this.handleClick}/>
-        <MovieDetails data={this.state.currentMovie} />
+        <MoviePosters
+          movies={this.props.movieStore.movies}
+          selectedMovieIndex={index}
+          onClick={this.props.selectMovie}
+        />
+        {selectedMovie &&
+          <MovieDetails data={selectedMovie} />
+        }
       </div>
     );
   }

src/public/js/components/navbar.jsx

@@ -17,6 +17,7 @@ export default class NavBar extends React.Component {
         <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul className="nav navbar-nav">
             <li><Link to="/movies/popular">Movies</Link></li>
+            <li><Link to="/users/login">Login</Link></li>
           </ul>
         </div>
       </div>

src/public/js/components/user-login.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+export default class UserLoginForm extends React.Component {
+  render() {
+    return (
+        <div className="container">
+          <div className="content-fluid">
+            <div className="col-md-6 col-md-offset-3 col-xs-12">
+              <h2>Log in</h2>
+              <hr/>
+              <form acceptCharset="UTF-8" action="/users/login" method="POST" className="form-horizontal">
+                <div>
+                  <label htmlFor="user_email">Username</label>
+                  <br/>
+                  <input className="form-control" id="username" name="Username" type="username" value=""/>
+                  <p></p>
+                </div>
+                <div>
+                  <label htmlFor="user_password">Password</label>
+                  <br/>
+                  <input autoComplete="off" className="form-control" id="password" name="Password" type="password"/>
+                  <p></p>
+                </div>
+                <div>
+                  <input className="btn btn-primary pull-right" type="submit" value="Log in"/>
+                  <br/>
+                </div>
+                <a className="btn btn-default btn-sm pull-left" href="/movies/%3cnil%3e">Cancel</a>
+              </form>
+            </div>
+          </div>
+        </div>
+        );
+  }
+}

src/public/js/reducers/movie-store.js

@@ -1,3 +1,21 @@
-export default function movieStore(state = {}, action) {
-  return state;
+import { ADD_MOVIES, SELECT_MOVIE } from '../actions/actionCreators'
+
+const defaultState = {
+  movies: [],
+  selectedMovieIndex: 0,
+};
+
+export default function movieStore(state = defaultState, action) {
+  switch (action.type) {
+    case ADD_MOVIES:
+      return Object.assign({}, state, {
+        movies: action.movies,
+      })
+    case SELECT_MOVIE:
+      return Object.assign({}, state, {
+        selectedMovieIndex: action.index,
+      })
+    default:
+      return state
+  }
 }

src/public/js/store.js

@@ -5,17 +5,8 @@ import { browserHistory } from 'react-router'
 // Import the root reducer
 import rootReducer from './reducers/index'
 
-// Set the default state
-const defaultState = {
-  movieStore: {
-    movies: [],
-    selectedMovie: {},
-    selectedMovieIndex: 0,
-  },
-};
-
 // Export the store
-const store = createStore(rootReducer, defaultState);
+const store = createStore(rootReducer);
 
 // Sync history with store
 export const history = syncHistoryWithStore(browserHistory, store);