From e13ec0a6ca4e0a5cb89df9adf77001166d66c5f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Tue, 15 Nov 2016 13:47:35 +0100 Subject: [PATCH] Use redux in movie list --- src/public/js/actions/actionCreators.js | 12 ++++- src/public/js/app.js | 2 +- src/public/js/components/movie-list.jsx | 60 ++++++++----------------- src/public/js/components/navbar.jsx | 1 + src/public/js/components/user-login.jsx | 35 +++++++++++++++ src/public/js/reducers/movie-store.js | 22 ++++++++- src/public/js/store.js | 11 +---- 7 files changed, 88 insertions(+), 55 deletions(-) create mode 100644 src/public/js/components/user-login.jsx diff --git a/src/public/js/actions/actionCreators.js b/src/public/js/actions/actionCreators.js index f85e3de..b1fa1e4 100644 --- a/src/public/js/actions/actionCreators.js +++ b/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 + } +} diff --git a/src/public/js/app.js b/src/public/js/app.js index 66e178d..04d89ec 100644 --- a/src/public/js/app.js +++ b/src/public/js/app.js @@ -34,7 +34,7 @@ class Main extends React.Component { function mapStateToProps(state) { return { movieStore: state.movieStore, - }; + } } function mapDispatchToProps(dispatch) { diff --git a/src/public/js/components/movie-list.jsx b/src/public/js/components/movie-list.jsx index 1b85aa2..d473c61 100644 --- a/src/public/js/components/movie-list.jsx +++ b/src/public/js/components/movie-list.jsx @@ -6,12 +6,16 @@ function MoviePosters(props) { return (
- {movies.map((movie, index) => + {movies.map(function(movie, index) { + const selected = (index === props.selectedMovieIndex) ? true : false; + return ( props.onClick(e, index) } + selected={selected} + onClick={() => props.onClick(index)} /> + )} )}
@@ -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 (
@@ -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 (
- - + + {selectedMovie && + + }
); } diff --git a/src/public/js/components/navbar.jsx b/src/public/js/components/navbar.jsx index b4d6252..f256c9b 100644 --- a/src/public/js/components/navbar.jsx +++ b/src/public/js/components/navbar.jsx @@ -17,6 +17,7 @@ export default class NavBar extends React.Component {
  • Movies
    • +
  • Login
diff --git a/src/public/js/components/user-login.jsx b/src/public/js/components/user-login.jsx new file mode 100644 index 0000000..ad56848 --- /dev/null +++ b/src/public/js/components/user-login.jsx @@ -0,0 +1,35 @@ +import React from 'react' + +export default class UserLoginForm extends React.Component { + render() { + return ( +
+
+
+

Log in

+
+
+
+ +
+ +

+
+
+ +
+ +

+
+
+ +
+
+ Cancel +
+
+
+
+ ); + } +} diff --git a/src/public/js/reducers/movie-store.js b/src/public/js/reducers/movie-store.js index 36e48db..0e19060 100644 --- a/src/public/js/reducers/movie-store.js +++ b/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 + } } diff --git a/src/public/js/store.js b/src/public/js/store.js index 7d22292..7d6109a 100644 --- a/src/public/js/store.js +++ b/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);