Add button to refresh the movie details

src/public/js/actions/actionCreators.js

@@ -69,6 +69,13 @@ export function getUserInfos() {
   )
 }
 
+export function getMovieDetails(imdb_id) {
+  return request(
+    'MOVIE_GET_DETAILS',
+    configureAxios().get(`/movies/${imdb_id}/get_details`)
+  )
+}
+
 export function fetchMovies(url) {
   return request(
     'MOVIE_LIST_FETCH',

src/public/js/components/movies/list.js

@@ -64,29 +64,63 @@ function MovieDetails(props) {
   return (
     <div className="col-xs-7 col-md-4">
       <div className="movie-detail affix">
-        <h1 className="hidden-xs">{props.data.title}</h1>
+        <h1 className="hidden-xs">{props.movie.title}</h1>
-        <h3 className="visible-xs">{props.data.title}</h3>
+        <h3 className="visible-xs">{props.movie.title}</h3>
         <p>
           <i className="fa fa-clock-o"></i>
-          {props.data.runtime} min
+          {props.movie.runtime} min
         </p>
         <p>
           <i className="fa fa-star-o"></i>
-          {props.data.rating} <small>({props.data.votes} counts)</small>
+          {props.movie.rating} <small>({props.movie.votes} counts)</small>
         </p>
-        <p className="movie-plot">{props.data.plot}</p>
+        <p className="movie-plot">{props.movie.plot}</p>
       </div>
+      <MovieButtons {...props} />
     </div>
   );
 }
 
+class MovieButtons extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick(e) {
+    e.preventDefault();
+    this.props.getMovieDetails(this.props.movie.imdb_id);
+  }
+  render() {
+    const imdb_link = 'http://www.imdb.com/title/' + this.props.movie.imdb_id;
+    return (
+      <div className="hidden-xs movie-details-buttons btn-toolbar">
+        <a type="button" className="btn btn-default" onClick={this.handleClick}>
+          {this.props.fetching ||
+            <span>
+              <i className="fa fa-refresh"></i> Refresh
+            </span>
+          }
+          {this.props.fetching &&
+            <span>
+              <i className="fa fa-spin fa-refresh"></i> Refreshing
+            </span>
+          }
+        </a>
+        <a type="button" className="btn btn-warning" href="#">
+          <i className="fa fa-external-link"></i> IMDB
+        </a>
+      </div>
+    );
+  }
+}
+
 export default class MovieList extends React.Component {
   componentWillMount() {
     this.props.fetchMovies(this.props.moviesUrl);
   }
   render() {
     const movies = this.props.movieStore.movies;
-    const index = this.props.movieStore.selectedMovieIndex;
+    const index = this.props.movieStore.selectedMovie.index;
     const selectedMovie = movies[index];
     return (
       <div className="row" id="movie-library">
@@ -96,7 +130,11 @@ export default class MovieList extends React.Component {
           onClick={this.props.selectMovie}
         />
         {selectedMovie &&
-          <MovieDetails data={selectedMovie} />
+          <MovieDetails
+            movie={selectedMovie}
+            fetching={this.props.movieStore.selectedMovie.fetchingDetails}
+            getMovieDetails={this.props.getMovieDetails}
+          />
         }
       </div>
     );

src/public/js/reducers/movies.js

@@ -1,6 +1,9 @@
 const defaultState = {
   movies: [],
-  selectedMovieIndex: 0,
+  selectedMovie: {
+    index: 0,
+    fetchingDetails: false,
+  },
 };
 
 export default function movieStore(state = defaultState, action) {
@@ -9,11 +12,32 @@ export default function movieStore(state = defaultState, action) {
       return Object.assign({}, state, {
         movies: action.payload.data,
       })
-    case 'MOVIE_LIST_FETCH_PENDING':
+    case 'MOVIE_GET_DETAILS_PENDING':
-      return state
-    case 'SELECT_MOVIE':
       return Object.assign({}, state, {
-        selectedMovieIndex: action.index,
+        selectedMovie: Object.assign({}, state.selectedMovie, {
+          fetchingDetails: true,
+        }),
+      })
+    case 'MOVIE_GET_DETAILS_FULFILLED':
+      let movies = state.movies.slice();
+      movies[state.selectedMovie.index] = action.payload.data;
+      return Object.assign({}, state, {
+        movies: movies,
+        selectedMovie: Object.assign({}, state.selectedMovie, {
+          fetchingDetails: false,
+        }),
+      })
+    case 'SELECT_MOVIE':
+      // Don't select the movie if we're fetching another movie's details
+      if (state.selectedMovie.fetchingDetails) {
+        return state
+      }
+
+      const selectedMovie = Object.assign({}, state.selectedMovie, {
+        index: action.index,
+      })
+      return Object.assign({}, state, {
+        selectedMovie: selectedMovie,
       })
     default:
       return state