Add filter on the movie list

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",

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
-  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 (
     <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}
-          selectedMovieIndex={index}
+          movies={movies}
+          selectedMovieId={selectedMovieId}
+          filter={this.props.movieStore.filter}
+          perPage={this.props.movieStore.perPage}
           onClick={this.props.selectMovie}
         />
         {selectedMovie &&

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"