Update explore view to a more stable version
* no more state * loading is in the posters module, not the whole page
This commit is contained in:
parent
fa73dc09c2
commit
a44cdd3a42
@ -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
|
||||
props.fetchOptions();
|
||||
// Explore
|
||||
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.props.fetchOptions();
|
||||
}
|
||||
|
||||
// Initial explore
|
||||
if (this.propsValid(props)) {
|
||||
props.explore(props.params.source, props.params.category);
|
||||
}
|
||||
|
||||
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({
|
||||
selectedSource: source,
|
||||
selectedCategory: category,
|
||||
categories: this.props.options[source],
|
||||
});
|
||||
this.props.explore(source, category);
|
||||
this.props.router.push(`/${this.props.type}/explore/${source}/${category}`);
|
||||
}
|
||||
handleCategoryChange(event) {
|
||||
this.setState({ selectedCategory: event.target.value });
|
||||
this.props.router.push(`/${this.props.type}/explore/${this.state.selectedSource}/${event.target.value}`);
|
||||
let source = this.props.params.source;
|
||||
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);
|
||||
}
|
||||
|
||||
// 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],
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
prettyName(name) {
|
||||
@ -93,11 +74,15 @@ export default class ExplorerOptions extends React.Component {
|
||||
return null;
|
||||
}
|
||||
|
||||
// State is not yet set
|
||||
if (!this.state.selectedSource && !this.state.selectedCategory) {
|
||||
return null;
|
||||
// Invalid props
|
||||
if (!this.propsValid(this.props)) {
|
||||
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>
|
||||
|
||||
@ -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 &&
|
||||
<div className="jumbotron">
|
||||
<h2>No result</h2>
|
||||
</div>
|
||||
}
|
||||
<InfiniteScroll
|
||||
<Posters
|
||||
elmts={elmts}
|
||||
loading={this.props.loading}
|
||||
hasMore={this.state.hasMore}
|
||||
loadMore={this.loadMore}
|
||||
className="row"
|
||||
>
|
||||
{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>
|
||||
selectedImdbId={this.props.selectedImdbId}
|
||||
onClick={this.props.onClick}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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} >
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user