Update explore view to a more stable version

* no more state
* loading is in the posters module, not the whole page

src/public/js/components/list/explorerOptions.js

@@ -4,45 +4,29 @@ import { Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap'
 export default class ExplorerOptions extends React.Component {
   constructor(props) {
     super(props);
-    let source = null;
-    let category = null;
-    let categories = [];
-
-    // Check if the options are present
     if (Object.keys(this.props.options).length === 0) {
-      // Fetch options
+      this.props.fetchOptions();
-      props.fetchOptions();
+    }
-      // Explore
+
-      if (this.propsValid(props)) {
+    // Initial explore
-        props.explore(props.params.source, props.params.category);
+    if (this.propsValid(props)) {
-      }
+      props.explore(props.params.source, props.params.category);
-    } else {
-      source = this.props.params.source;
-      category = this.props.params.category;
-      categories = this.props.options[this.props.params.source];
     }
 
-    this.state = {
-      selectedSource: source,
-      selectedCategory: category,
-      categories: categories,
-    };
     this.handleSourceChange = this.handleSourceChange.bind(this);
     this.handleCategoryChange = this.handleCategoryChange.bind(this);
   }
   handleSourceChange(event) {
     let source = event.target.value;
     let category = this.props.options[event.target.value][0];
-    this.setState({
+    this.props.explore(source, category);
-      selectedSource: source,
-      selectedCategory: category,
-      categories: this.props.options[source],
-    });
     this.props.router.push(`/${this.props.type}/explore/${source}/${category}`);
   }
   handleCategoryChange(event) {
-    this.setState({ selectedCategory: event.target.value });
+    let source = this.props.params.source;
-    this.props.router.push(`/${this.props.type}/explore/${this.state.selectedSource}/${event.target.value}`);
+    let category = event.target.value;
+    this.props.explore(source, category);
+    this.props.router.push(`/${this.props.type}/explore/${source}/${category}`);
   }
   propsValid(props) {
     if (!props.params
@@ -60,20 +44,17 @@ export default class ExplorerOptions extends React.Component {
       return
     }
 
+    // No previous params
+    if (!this.props.params.source && !this.props.params.category) {
+      this.props.explore(this.props.params.source, this.props.params.category);
+      return;
+    }
+
     // Explore params changed
     if ((this.props.params.source !== nextProps.params.source)
       || (this.props.params.category !== nextProps.params.category)) {
       this.props.explore(nextProps.params.source, nextProps.params.category);
-    }
+      return;
-
-    // State must be updated
-    if ((this.state.selectedSource !== nextProps.params.source)
-      || (this.state.selectedCategory !== nextProps.params.category)) {
-      this.setState({
-        selectedSource: nextProps.params.source,
-        selectedCategory: nextProps.params.category,
-        categories: nextProps.options[nextProps.params.source],
-      });
     }
   }
   prettyName(name) {
@@ -93,11 +74,15 @@ export default class ExplorerOptions extends React.Component {
       return null;
     }
 
-    // State is not yet set
+    // Invalid props
-    if (!this.state.selectedSource && !this.state.selectedCategory) {
+    if (!this.propsValid(this.props)) {
-      return null;
+      return
     }
 
+    let source = this.props.params.source;
+    let category = this.props.params.category;
+    let categories = this.props.options[this.props.params.source];
+
     return (
       <div className="row">
         <div className="col-xs-12 col-md-12">
@@ -110,7 +95,7 @@ export default class ExplorerOptions extends React.Component {
                     bsClass="form-control input-sm"
                     componentClass="select"
                     onChange={this.handleSourceChange}
-                    value={this.state.selectedSource}
+                    value={source}
                   >
                     {Object.keys(this.props.options).map(function(source) {
                       return (<option key={source} value={source}>{this.prettyName(source)}</option>)
@@ -125,9 +110,9 @@ export default class ExplorerOptions extends React.Component {
                     bsClass="form-control input-sm"
                     componentClass="select"
                     onChange={this.handleCategoryChange}
-                    value={this.state.selectedCategory}
+                    value={category}
                   >
-                    {this.state.categories.map(function(category) {
+                    {categories.map(function(category) {
                       return (<option key={category} value={category}>{this.prettyName(category)}</option>)
                     }, this)}
                   </FormControl>

src/public/js/components/list/posters.js

@@ -7,6 +7,8 @@ import ListFilter from './filter'
 import ExplorerOptions from './explorerOptions'
 import ListPoster from './poster'
 
+import Loader from '../loader/loader'
+
 export default class ListPosters extends React.Component {
   constructor(props) {
     super(props);
@@ -78,30 +80,52 @@ export default class ListPosters extends React.Component {
           options={this.props.exploreOptions}
           explore={this.props.explore}
         />
-        {elmts.length === 0 &&
+        <Posters
-            <div className="jumbotron">
+          elmts={elmts}
-              <h2>No result</h2>
+          loading={this.props.loading}
-            </div>
-        }
-        <InfiniteScroll
           hasMore={this.state.hasMore}
           loadMore={this.loadMore}
-          className="row"
+          selectedImdbId={this.props.selectedImdbId}
-        >
+          onClick={this.props.onClick}
-          {elmts.map(function(el, index) {
+        />
-            const selected = (el.imdb_id === this.props.selectedImdbId) ? true : false;
-            return (
-              <ListPoster
-                index={index}
-                data={el}
-                key={el.imdb_id}
-                selected={selected}
-                onClick={() => this.props.onClick(el.imdb_id)}
-              />
-            )}
-            , this)}
-        </InfiniteScroll>
       </div>
     );
   }
 }
+
+function Posters(props) {
+  if (props.loading) {
+    return (<Loader />);
+  }
+
+  if (props.elmts.length === 0)  {
+    return (
+      <div className="jumbotron">
+        <h2>No result</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <InfiniteScroll
+        hasMore={props.hasMore}
+        loadMore={props.loadMore}
+        className="row"
+      >
+        {props.elmts.map(function(el, index) {
+          const selected = (el.imdb_id === props.selectedImdbId) ? true : false;
+          return (
+            <ListPoster
+              index={index}
+              data={el}
+              key={el.imdb_id}
+              selected={selected}
+              onClick={() => props.onClick(el.imdb_id)}
+            />
+          )}
+        )}
+        </InfiniteScroll>
+      </div>
+  );
+}

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

@@ -5,7 +5,6 @@ import TorrentsButton from './torrents'
 import ActionsButton from './actions'
 import ListPosters from '../list/posters'
 import ListDetails from '../list/details'
-import Loader from '../loader/loader'
 
 function MovieButtons(props) {
   const imdb_link = `http://www.imdb.com/title/${props.movie.imdb_id}`;
@@ -58,11 +57,6 @@ export default class MovieList extends React.Component {
     }
     const selectedMovie = movies[index];
 
-    // Loading
-    if (this.props.movieStore.loading) {
-      return (<Loader />);
-    }
-
     return (
       <div className="row" id="container">
         <ListPosters
@@ -80,6 +74,7 @@ export default class MovieList extends React.Component {
           onClick={this.props.selectMovie}
           params={this.props.params}
           router={this.props.router}
+          loading={this.props.movieStore.loading}
         />
         {selectedMovie &&
           <ListDetails data={selectedMovie}>

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

@@ -2,7 +2,6 @@ import React from 'react'
 
 import ListDetails from '../list/details'
 import ListPosters from '../list/posters'
-import Loader from '../loader/loader'
 import ShowButtons from './listButtons'
 
 export default class ShowList extends React.Component {
@@ -21,11 +20,6 @@ export default class ShowList extends React.Component {
     }
     const selectedShow = shows[index];
 
-    // Loading
-    if (this.props.showStore.loading) {
-      return (<Loader />);
-    }
-
     return (
       <div className="row" id="container">
         <ListPosters
@@ -43,6 +37,7 @@ export default class ShowList extends React.Component {
           onClick={this.props.selectShow}
           router={this.props.router}
           params={this.props.params}
+          loading={this.props.showStore.loading}
         />
         {selectedShow &&
           <ListDetails data={selectedShow} >