From dca372eb698112ac9036e0132921647d45e43e35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Tue, 29 Nov 2016 21:53:04 +0100 Subject: [PATCH] Add auto selection of the first movie after fetching --- src/public/js/components/movies/list.js | 4 ++-- src/public/js/reducers/movies.js | 26 ++++++++++++------------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js index f31a612..8a1fd08 100644 --- a/src/public/js/components/movies/list.js +++ b/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 && } diff --git a/src/public/js/reducers/movies.js b/src/public/js/reducers/movies.js index 506268f..b5bdef6 100644 --- a/src/public/js/reducers/movies.js +++ b/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