151 lines
3.9 KiB
JavaScript
151 lines
3.9 KiB
JavaScript
import React from 'react'
|
|
import { Map, List, fromJS } from 'immutable'
|
|
|
|
import fuzzy from 'fuzzy';
|
|
import InfiniteScroll from 'react-infinite-scroller';
|
|
|
|
import ListFilter from './filter'
|
|
import ExplorerOptions from './explorerOptions'
|
|
import ListPoster from './poster'
|
|
|
|
import Loader from '../loader/loader'
|
|
|
|
const DEFAULT_LIST_SIZE = 30;
|
|
const DEFAULT_ADD_EXTRA_ITEMS = 30;
|
|
|
|
export default class ListPosters extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.loadMore = this.loadMore.bind(this);
|
|
this.state = this.getNextState(props);
|
|
}
|
|
loadMore() {
|
|
// Nothing to do if the app is loading
|
|
if (this.props.loading) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.data === undefined) {
|
|
return;
|
|
}
|
|
|
|
this.setState(this.getNextState(this.props));
|
|
}
|
|
getNextState(props) {
|
|
let totalListSize = props.data !== undefined ? props.data.size : 0;
|
|
let currentListSize = (this.state && this.state.items) ? this.state.items : 0;
|
|
let nextListSize = currentListSize + DEFAULT_ADD_EXTRA_ITEMS;
|
|
let hasMore = true;
|
|
|
|
if (nextListSize >= totalListSize) {
|
|
nextListSize = totalListSize;
|
|
hasMore = false;
|
|
}
|
|
|
|
return {
|
|
items: nextListSize,
|
|
hasMore: hasMore,
|
|
};
|
|
}
|
|
componentWillReceiveProps(nextProps) {
|
|
if (this.props.data === undefined) { return }
|
|
if (nextProps.data === undefined) { return }
|
|
|
|
if (this.props.data.size !== nextProps.data.size) {
|
|
this.setState(this.getNextState(nextProps));
|
|
}
|
|
}
|
|
render() {
|
|
let elmts = this.props.data;
|
|
const listSize = elmts !== undefined ? elmts.size : 0;
|
|
const colSize = (listSize !== 0) ? "col-xs-5 col-md-8" : "col-xs-12";
|
|
|
|
// Filter the list of elements
|
|
if (this.props.filter !== "") {
|
|
elmts = elmts.filter((v) => fuzzy.test(this.props.filter, v.get('title')), this);
|
|
} else {
|
|
elmts = elmts.slice(0, this.state.items);
|
|
}
|
|
|
|
// Chose when to display filter / explore options
|
|
let displayFilter = true;
|
|
if ((this.props.params
|
|
&& this.props.params.category
|
|
&& this.props.params.category !== ""
|
|
&& this.props.params.source
|
|
&& this.props.params.source !== "")
|
|
|| (listSize === 0)) {
|
|
displayFilter = false;
|
|
}
|
|
|
|
return (
|
|
<div className={colSize}>
|
|
{displayFilter &&
|
|
<ListFilter
|
|
updateFilter={this.props.updateFilter}
|
|
placeHolder={this.props.placeHolder}
|
|
/>
|
|
}
|
|
<ExplorerOptions
|
|
type={this.props.type}
|
|
display={!displayFilter}
|
|
params={this.props.params}
|
|
router={this.props.router}
|
|
options={this.props.exploreOptions}
|
|
/>
|
|
<Posters
|
|
elmts={elmts}
|
|
loading={this.props.loading}
|
|
hasMore={this.state.hasMore}
|
|
loadMore={this.loadMore}
|
|
selectedImdbId={this.props.selectedImdbId}
|
|
onClick={this.props.onClick}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Posters extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
render() {
|
|
if (this.props.loading) {
|
|
return (<Loader />);
|
|
}
|
|
|
|
if (this.props.elmts.size === 0) {
|
|
return (
|
|
<div className="jumbotron">
|
|
<h2>No result</h2>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<InfiniteScroll
|
|
hasMore={this.props.hasMore}
|
|
loadMore={this.props.loadMore}
|
|
className="row"
|
|
>
|
|
{this.props.elmts.toIndexedSeq().map(function(movie, index) {
|
|
const imdbId = movie.get('imdb_id');
|
|
const selected = (imdbId === this.props.selectedImdbId) ? true : false;
|
|
return (
|
|
<ListPoster
|
|
index={index}
|
|
data={movie}
|
|
key={imdbId}
|
|
selected={selected}
|
|
onClick={() => this.props.onClick(imdbId)}
|
|
/>
|
|
)
|
|
} ,this)}
|
|
</InfiniteScroll>
|
|
</div>
|
|
);
|
|
}
|
|
}
|