Add auto selection of the first movie after fetching

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

@@ -144,7 +144,7 @@ export default class MovieList extends React.Component {
   }
   render() {
     const movies = this.props.movieStore.movies;
-    const selectedMovieId = this.props.movieStore.selectedMovie.imdbId;
+    const selectedMovieId = this.props.movieStore.selectedImdbId;
     let index = movies.map((el) => el.imdb_id).indexOf(selectedMovieId);
     if (index === -1) {
       index = 0;
@@ -162,7 +162,7 @@ export default class MovieList extends React.Component {
         {selectedMovie &&
           <MovieDetails
             movie={selectedMovie}
-            fetching={this.props.movieStore.selectedMovie.fetchingDetails}
+            fetching={this.props.movieStore.fetchingDetails}
             getMovieDetails={this.props.getMovieDetails}
           />
         }

src/public/js/reducers/movies.js

@@ -2,23 +2,25 @@ const defaultState = {
   movies: [],
   filter: "",
   perPage: 30,
-  selectedMovie: {
-    imdbId: "",
-    fetchingDetails: false,
-  },
+  selectedImdbId: "",
+  fetchingDetails: false,
 };
 
 export default function movieStore(state = defaultState, action) {
   switch (action.type) {
     case 'MOVIE_LIST_FETCH_FULFILLED':
+      let selectedImdbId = "";
+      // Select the first movie
+      if (action.payload.data.length > 0) {
+        selectedImdbId = action.payload.data[0].imdb_id;
+      }
       return Object.assign({}, state, {
         movies: action.payload.data,
+        selectedImdbId: selectedImdbId,
       })
     case 'MOVIE_GET_DETAILS_PENDING':
       return Object.assign({}, state, {
-        selectedMovie: Object.assign({}, state.selectedMovie, {
-          fetchingDetails: true,
-        }),
+        fetchingDetails: true,
       })
     case 'MOVIE_GET_DETAILS_FULFILLED':
       let movies = state.movies.slice();
@@ -26,20 +28,16 @@ export default function movieStore(state = defaultState, action) {
       movies[index] = action.payload.data;
       return Object.assign({}, state, {
         movies: movies,
-        selectedMovie: Object.assign({}, state.selectedMovie, {
-          fetchingDetails: false,
-        }),
+        fetchingDetails: false,
       })
     case 'SELECT_MOVIE':
       // Don't select the movie if we're fetching another movie's details
-      if (state.selectedMovie.fetchingDetails) {
+      if (state.fetchingDetails) {
         return state
       }
 
       return Object.assign({}, state, {
-        selectedMovie: Object.assign({}, state.selectedMovie, {
-          imdbId: action.imdbId,
-        }),
+        selectedImdbId: action.imdbId,
       })
     default:
       return state