Simplify the search module

src/public/js/components/movies/list.js

@@ -41,41 +41,12 @@ function MovieButtons(props) {
 }
 
 export default class MovieList extends React.Component {
-  handleParams(props = this.props) {
-    // Check if the URL to fetch is in the props
-    if (props.moviesUrl) {
-      this.props.fetchMovies(props.moviesUrl);
-      return
-    }
-
-    // Check for URL parameters
-    if (!props.params) {
-      return
-    }
-
-    // Search param
-    if  (props.params.search && props.params.search !== "") {
-      props.searchMovies({
-        key: props.params.search
-      });
-      return
-    }
+  constructor(props) {
+    super(props);
   }
   componentWillMount() {
-    this.handleParams();
-  }
-  componentWillUpdate(nextProps, nextState) {
-    // No params
-    if (!nextProps.params) {
-      return
-    }
-
-    // Search field changed
-    if (this.props.params.search
-      && (this.props.params.search !== nextProps.params.search)
-      && (nextProps.params.search !== "")) {
-      this.handleParams(nextProps);
-      return
+    if (this.props.moviesUrl) {
+      this.props.fetchMovies(this.props.moviesUrl);
     }
   }
   render() {

src/public/js/components/navbar.js

@@ -30,8 +30,10 @@ export default function NavBar(props) {
             placeholder="Search movies"
             router={props.router}
             search={props.movieStore.search}
+            searchFunc={props.searchMovies}
             path='/movies/search'
             pathMatch='movies'
+            params={props.params}
           />
           <Search
             model="showStore"
@@ -39,8 +41,10 @@ export default function NavBar(props) {
             placeholder="Search shows"
             router={props.router}
             search={props.showStore.search}
+            searchFunc={props.searchShows}
             path='/shows/search'
             pathMatch='shows'
+            params={props.params}
           />
         </Navbar.Collapse>
       </Navbar>
@@ -52,14 +56,40 @@ class Search extends React.Component {
   constructor(props) {
     super(props);
     this.handleSearch = this.handleSearch.bind(this);
+    this.search(this.props);
   }
   handleSearch() {
-    this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`)
+    if (this.props.search === "") {
+      return;
+    }
+    this.search(this.props);
+    this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`);
+  }
+  isActive() {
+    const location = this.props.router.getCurrentLocation().pathname;
+    return (location.indexOf(this.props.pathMatch) !== -1)
+  }
+  search(props) {
+    if (!this.isActive()) {
+      return;
+    }
+
+    // Search from the props if defined
+    if (props.search !== "") {
+      props.searchFunc({ key: props.search });
+      return;
+    }
+
+    // Search from the url params
+    if (props.params
+      && props.params.search
+      && props.params.search !== "") {
+      props.searchFunc({ key: props.params.search });
+      return;
+    }
   }
   render() {
-    const location = this.props.router.getCurrentLocation().pathname;
-    if (location.indexOf(this.props.pathMatch) === -1)
-    {
+    if (!this.isActive()) {
       return null;
     }
 

src/public/js/components/shows/list.js

@@ -6,40 +6,9 @@ import Loader from '../loader/loader'
 import ShowButtons from './listButtons'
 
 export default class ShowList extends React.Component {
-  handleParams(props = this.props) {
-    // Check if the URL to fetch is in the props
-    if (props.showsUrl) {
-      this.props.fetchShows(props.showsUrl);
-      return
-    }
-
-    // Check for URL parameters
-    if (!props.params) {
-      return
-    }
-
-    // Search param
-    if  (props.params.search && props.params.search !== "") {
-      this.props.searchShows({
-        key: this.props.params.search
-      });
-      return
-    }
-  }
   componentWillMount() {
-    this.handleParams();
-  }
-  componentWillUpdate(nextProps, nextState) {
-    // No params
-    if (!nextProps.params) {
-      return
-    }
-
-    // Search field changed
-    if (this.props.params.search
-      && (this.props.params.search !== nextProps.params.search)
-      && (nextProps.params.search !== "")) {
-      this.handleParams(nextProps);
+    if (this.props.showsUrl) {
+      this.props.fetchShows(this.props.showsUrl);
       return
     }
   }