Merge branch 'fixInput' into 'master'

Fix user edit frontend and backend

See merge request !22

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",
@@ -15,6 +16,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",

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")
 }

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 := u.RawConfig.Unmarshal(&configMap); err != nil {
-	if 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)

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`)
   )
 }
 

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
+  let movies = props.movies.slice();
-  const perPage = 30;
 
-  let movies;
+  // Filter the movies
-  // Let's limit the number for now
+  if (props.filter !== "") {
-  if (props.movies.length > perPage) {
+    const filtered = fuzzy.filter(props.filter, movies, {
-    movies = props.movies.slice(0, perPage);
+      extract: (el) => el.title
-  } else {
+    });
-    movies = props.movies;
+    movies = filtered.map((el) => el.original);
+  }
+
+  // Limit the number of results
+  if (movies.length > props.perPage) {
+    movies = movies.slice(0, props.perPage);
   }
 
   return (
     <div className="col-xs-5 col-md-8">
+      <MovieListFilter />
       <div className="row">
         {movies.map(function(movie, index) {
-          const selected = (index === props.selectedMovieIndex) ? true : false;
+          const selected = (movie.imdb_id === props.selectedMovieId) ? true : false;
           return (
             <MoviePoster
               data={movie}
-              key={movie.ID}
+              key={movie.imdb_id}
               selected={selected}
-              onClick={() => props.onClick(index)}
+              onClick={() => props.onClick(movie.imdb_id)}
             />
           )}
         )}
@@ -32,6 +39,28 @@ function MoviePosters(props) {
   );
 }
 
+class MovieListFilter extends React.Component {
+  render() {
+    return (
+      <div className="col-xs-12 col-md-12 movie-list-filter">
+        <div className="row">
+          <Form model="movieStore" className="input-group" >
+            <Control.text
+              model="movieStore.filter"
+              className="form-control input-sm"
+              placeholder="Filter movies..."
+              updateOn="change"
+            />
+            <span className="input-group-btn">
+              <button className="btn btn-default btn-sm" type="button">Filter</button>
+            </span>
+          </Form>
+        </div>
+      </div>
+    );
+  }
+}
+
 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 (
       <div className="row" id="container">
         <MoviePosters
-          movies={this.props.movieStore.movies}
+          movies={movies}
-          selectedMovieIndex={index}
+          selectedMovieId={selectedMovieId}
+          filter={this.props.movieStore.filter}
+          perPage={this.props.movieStore.perPage}
           onClick={this.props.selectMovie}
         />
         {selectedMovie &&

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) {
+  handleSubmit() {
-    e.preventDefault();
     this.props.updateUser({
-      'polochon_url': this.refs.polochonUrl.value,
+      'polochon_url': this.props.userStore.polochonUrl,
-      'polochon_token': this.refs.polochonToken.value,
+      '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 (
       <div className="container">
         <div className="content-fluid">
@@ -28,15 +25,15 @@ export default class UserEdit extends React.Component {
             <h2>Edit user</h2>
             <hr />
 
-            <form ref="userEditForm" className="form-horizontal" onSubmit={(e) => this.handleSubmit(e)}>
+            <Form model="userStore" className="form-horizontal" onSubmit={(val) => this.handleSubmit(val)}>
               <div className="form-group">
                 <label className="control-label">Polochon URL</label>
-                <input autoFocus="autofocus" className="form-control" type="text" ref="polochonUrl" value={polochonUrl} />
+                <Control.text model="userStore.polochonUrl" className="form-control" />
               </div>
 
               <div className="form-group">
                 <label className="control-label">Polochon token</label>
-                <input className="form-control" ref="polochonToken" type="text" value={polochonToken} />
+                <Control.text model="userStore.polochonToken" className="form-control"/>
               </div>
 
               <hr />
@@ -54,7 +51,7 @@ export default class UserEdit extends React.Component {
               <div>
                 <input className="btn btn-primary pull-right" type="submit" value="Update"/>
               </div>
-            </form>
+            </Form>
           </div>
         </div>
       </div>

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,

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:

src/public/less/app.less

@@ -23,6 +23,10 @@ body {
     right: 1%;
 }
 
+.movie-list-filter {
+    padding-bottom: 10px;
+}
+
 .navbar {
     opacity: 0.95;
 }

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"
@@ -1795,6 +1799,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 +1874,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 +2314,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 +3105,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"