From 85672b52429b08e93c14b58ec9c3397d733d7700 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Thu, 24 Nov 2016 20:21:02 +0100 Subject: [PATCH 1/2] Fix user edit frontend and backend --- package.json | 1 + src/internal/users/handlers.go | 11 ++++++----- src/internal/users/users.go | 7 +++++-- src/public/js/components/users/edit.js | 19 ++++++++----------- src/public/js/reducers/index.js | 7 +++++-- yarn.lock | 18 +++++++++++++++++- 6 files changed, 42 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index f8f40e3..db8bd19 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react-bootstrap": "^0.30.6", "react-dom": "^15.3.2", "react-redux": "^4.4.6", + "react-redux-form": "^1.2.4", "react-router": "^3.0.0", "react-router-bootstrap": "^0.23.1", "react-router-redux": "^4.0.7", diff --git a/src/internal/users/handlers.go b/src/internal/users/handlers.go index 7f95366..eda6af9 100644 --- a/src/internal/users/handlers.go +++ b/src/internal/users/handlers.go @@ -134,7 +134,7 @@ func EditHandler(e *web.Env, w http.ResponseWriter, r *http.Request) error { return err } - if data.Password == "" && data.PasswordConfirm != "" { + if data.Password != "" && data.PasswordConfirm != "" { if data.Password != data.PasswordConfirm { return e.RenderError(w, fmt.Errorf("Passwords empty or missmatch")) } @@ -145,10 +145,6 @@ func EditHandler(e *web.Env, w http.ResponseWriter, r *http.Request) error { if err != nil { return err } - - if err := user.Update(e.Database); err != nil { - return err - } } // Update the polochon config @@ -162,5 +158,10 @@ func EditHandler(e *web.Env, w http.ResponseWriter, r *http.Request) error { return err } + // Save the user with the new configurations + if err := user.Update(e.Database); err != nil { + return err + } + return e.RenderOK(w, "user updated") } diff --git a/src/internal/users/users.go b/src/internal/users/users.go index ad1b224..30b7d25 100644 --- a/src/internal/users/users.go +++ b/src/internal/users/users.go @@ -55,8 +55,7 @@ func (u *User) GetConfig(key string, v interface{}) error { // SetConfig marshal v into json for specified config key func (u *User) SetConfig(key string, v interface{}) error { var configMap map[string]*json.RawMessage - err := u.RawConfig.Unmarshal(&configMap) - if err != nil { + if err := u.RawConfig.Unmarshal(&configMap); err != nil { return err } @@ -65,6 +64,10 @@ func (u *User) SetConfig(key string, v interface{}) error { return err } + if configMap == nil { + configMap = map[string]*json.RawMessage{} + } + r := json.RawMessage(b) configMap[key] = &r b, err = json.Marshal(configMap) diff --git a/src/public/js/components/users/edit.js b/src/public/js/components/users/edit.js index ca34331..4e28e8b 100644 --- a/src/public/js/components/users/edit.js +++ b/src/public/js/components/users/edit.js @@ -1,4 +1,5 @@ import React from 'react' +import { Control, Form } from 'react-redux-form'; export default class UserEdit extends React.Component { componentWillMount() { @@ -8,19 +9,15 @@ export default class UserEdit extends React.Component { super(props); this.handleSubmit = this.handleSubmit.bind(this); } - handleSubmit(e) { - e.preventDefault(); + handleSubmit() { this.props.updateUser({ - 'polochon_url': this.refs.polochonUrl.value, - 'polochon_token': this.refs.polochonToken.value, + 'polochon_url': this.props.userStore.polochonUrl, + 'polochon_token': this.props.userStore.polochonToken, 'password': this.refs.newPassword.value, 'password_confirm': this.refs.newPasswordConfirm.value, }); } render() { - // TODO make this fields editable - const polochonUrl = this.props.userStore.polochonUrl; - const polochonToken = this.props.userStore.polochonToken; return (
@@ -28,15 +25,15 @@ export default class UserEdit extends React.Component {

Edit user

-
this.handleSubmit(e)}> + this.handleSubmit(val)}>
- +
- +
@@ -54,7 +51,7 @@ export default class UserEdit extends React.Component {
-
+
diff --git a/src/public/js/reducers/index.js b/src/public/js/reducers/index.js index 8fb7d7c..9b8c802 100644 --- a/src/public/js/reducers/index.js +++ b/src/public/js/reducers/index.js @@ -1,11 +1,14 @@ -import { combineReducers } from 'redux'; +import { combineForms } from 'react-redux-form' import { routerReducer } from 'react-router-redux' import movieStore from './movies' import userStore from './users' import errors from './errors' -const rootReducer = combineReducers({ +// Use combine form form react-redux-form, it's a thin wrapper arround the +// default combinedReducers provided with React. It allows the forms to be +// linked directly to the store. +const rootReducer = combineForms({ routing: routerReducer, movieStore, userStore, diff --git a/yarn.lock b/yarn.lock index 59f4ae6..09d5596 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1795,6 +1795,10 @@ https-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd" +icepick@^1.1.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/icepick/-/icepick-1.3.0.tgz#e4942842ed8f9ee778d7dd78f7e36627f49fdaef" + iconv-lite@~0.4.13: version "0.4.13" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2" @@ -1866,7 +1870,7 @@ invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1: dependencies: loose-envify "^1.0.0" -invariant@^2.1.0: +invariant@^2.1.0, invariant@~2.2.1: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -2306,6 +2310,10 @@ lodash.templatesettings@^3.0.0: lodash._reinterpolate "^3.0.0" lodash.escape "^3.0.0" +lodash@^4.10.0: + version "4.17.2" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42" + lodash@^4.2.0: version "4.16.6" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777" @@ -3093,6 +3101,14 @@ react-redux: lodash "^4.2.0" loose-envify "^1.1.0" +react-redux-form: + version "1.2.4" + resolved "https://registry.yarnpkg.com/react-redux-form/-/react-redux-form-1.2.4.tgz#924c5ac06dd52f21efc961df6aed9c10bfe27de9" + dependencies: + icepick "^1.1.0" + invariant "~2.2.1" + lodash "^4.10.0" + react-router: version "3.0.0" resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.0.tgz#3f313e4dbaf57048c48dd0a8c3cac24d93667dff" From b7d61e725773851ef7464dfd2f09ca0af730fd83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Fri, 25 Nov 2016 14:59:00 +0100 Subject: [PATCH 2/2] Add filter on the movie list --- package.json | 1 + src/public/js/actions/actionCreators.js | 8 ++-- src/public/js/components/movies/list.js | 63 +++++++++++++++++++------ src/public/js/reducers/movies.js | 9 ++-- src/public/less/app.less | 4 ++ yarn.lock | 4 ++ 6 files changed, 68 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index db8bd19..ad355fd 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "bootstrap": "^3.3.6", "bootswatch": "^3.3.7", "font-awesome": "^4.7.0", + "fuzzy": "^0.1.3", "history": "^4.4.0", "jquery": "^2.2.4", "jwt-decode": "^2.1.0", diff --git a/src/public/js/actions/actionCreators.js b/src/public/js/actions/actionCreators.js index c9ba18c..a3d41dc 100644 --- a/src/public/js/actions/actionCreators.js +++ b/src/public/js/actions/actionCreators.js @@ -1,10 +1,10 @@ import { configureAxios, request } from '../requests' // Select Movie -export function selectMovie(index) { +export function selectMovie(imdbId) { return { type: 'SELECT_MOVIE', - index + imdbId } } @@ -69,10 +69,10 @@ export function getUserInfos() { ) } -export function getMovieDetails(imdb_id) { +export function getMovieDetails(imdbId) { return request( 'MOVIE_GET_DETAILS', - configureAxios().get(`/movies/${imdb_id}/get_details`) + configureAxios().get(`/movies/${imdbId}/get_details`) ) } diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js index 0baccf0..f31a612 100644 --- a/src/public/js/components/movies/list.js +++ b/src/public/js/components/movies/list.js @@ -1,29 +1,36 @@ import React from 'react' import axios from 'axios' +import { Control, Form } from 'react-redux-form'; +import fuzzy from 'fuzzy'; function MoviePosters(props) { - // TODO handle the limit from the url - const perPage = 30; + let movies = props.movies.slice(); - let movies; - // Let's limit the number for now - if (props.movies.length > perPage) { - movies = props.movies.slice(0, perPage); - } else { - movies = props.movies; + // Filter the movies + if (props.filter !== "") { + const filtered = fuzzy.filter(props.filter, movies, { + extract: (el) => el.title + }); + movies = filtered.map((el) => el.original); + } + + // Limit the number of results + if (movies.length > props.perPage) { + movies = movies.slice(0, props.perPage); } return (
+
{movies.map(function(movie, index) { - const selected = (index === props.selectedMovieIndex) ? true : false; + const selected = (movie.imdb_id === props.selectedMovieId) ? true : false; return ( props.onClick(index)} + onClick={() => props.onClick(movie.imdb_id)} /> )} )} @@ -32,6 +39,28 @@ function MoviePosters(props) { ); } +class MovieListFilter extends React.Component { + render() { + return ( +
+
+
+ + + + + +
+
+ ); + } +} + function MoviePoster(props) { const selected = props.selected ? ' thumbnail-selected' : ''; const imgClass = 'thumbnail' + selected; @@ -115,13 +144,19 @@ export default class MovieList extends React.Component { } render() { const movies = this.props.movieStore.movies; - const index = this.props.movieStore.selectedMovie.index; + const selectedMovieId = this.props.movieStore.selectedMovie.imdbId; + let index = movies.map((el) => el.imdb_id).indexOf(selectedMovieId); + if (index === -1) { + index = 0; + } const selectedMovie = movies[index]; return (
{selectedMovie && diff --git a/src/public/js/reducers/movies.js b/src/public/js/reducers/movies.js index 220b9cd..506268f 100644 --- a/src/public/js/reducers/movies.js +++ b/src/public/js/reducers/movies.js @@ -1,7 +1,9 @@ const defaultState = { movies: [], + filter: "", + perPage: 30, selectedMovie: { - index: 0, + imdbId: "", fetchingDetails: false, }, }; @@ -20,7 +22,8 @@ export default function movieStore(state = defaultState, action) { }) case 'MOVIE_GET_DETAILS_FULFILLED': let movies = state.movies.slice(); - movies[state.selectedMovie.index] = action.payload.data; + let index = movies.map((el) => el.imdb_id).indexOf(action.payload.data.imdb_id); + movies[index] = action.payload.data; return Object.assign({}, state, { movies: movies, selectedMovie: Object.assign({}, state.selectedMovie, { @@ -35,7 +38,7 @@ export default function movieStore(state = defaultState, action) { return Object.assign({}, state, { selectedMovie: Object.assign({}, state.selectedMovie, { - index: action.index, + imdbId: action.imdbId, }), }) default: diff --git a/src/public/less/app.less b/src/public/less/app.less index 7f7cf31..90b81a8 100644 --- a/src/public/less/app.less +++ b/src/public/less/app.less @@ -23,6 +23,10 @@ body { right: 1%; } +.movie-list-filter { + padding-bottom: 10px; +} + .navbar { opacity: 0.95; } diff --git a/yarn.lock b/yarn.lock index 09d5596..b746505 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1461,6 +1461,10 @@ function-bind@^1.0.2: version "1.1.0" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771" +fuzzy: + version "0.1.3" + resolved "https://registry.yarnpkg.com/fuzzy/-/fuzzy-0.1.3.tgz#4c76ec2ff0ac1a36a9dccf9a00df8623078d4ed8" + gauge@~2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.6.0.tgz#d35301ad18e96902b4751dcbbe40f4218b942a46"