132 lines
3.3 KiB
JavaScript
132 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
|
|
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'
|
|
|
|
export default class ListPosters extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
items: 30,
|
|
hasMore: true,
|
|
};
|
|
this.loadMore = this.loadMore.bind(this);
|
|
}
|
|
loadMore() {
|
|
if (!this.state.hasMore || this.props.data.length === 0) {
|
|
return
|
|
}
|
|
|
|
const addItems = 30;
|
|
if (this.state.items + addItems >= this.props.data.length) {
|
|
this.setState({
|
|
items: this.props.data.length,
|
|
hasMore: false,
|
|
});
|
|
} else {
|
|
this.setState({
|
|
items: this.state.items + addItems,
|
|
hasMore: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let elmts = this.props.data.slice();
|
|
const listSize = elmts.length;
|
|
const colSize = (listSize !== 0) ? "col-xs-5 col-md-8" : "col-xs-12";
|
|
|
|
// Filter the list of elements
|
|
if (this.props.filter !== "") {
|
|
const filtered = fuzzy.filter(this.props.filter, elmts, {
|
|
extract: (el) => el.title
|
|
});
|
|
elmts = filtered.map((el) => el.original);
|
|
} 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 !== "") {
|
|
displayFilter = false;
|
|
}
|
|
|
|
return (
|
|
<div className={colSize}>
|
|
<ListFilter
|
|
listSize={listSize}
|
|
display={displayFilter}
|
|
formModel={this.props.formModel}
|
|
controlModel={this.props.filterControlModel}
|
|
controlPlaceHolder={this.props.filterControlPlaceHolder}
|
|
/>
|
|
<ExplorerOptions
|
|
type={this.props.type}
|
|
display={!displayFilter}
|
|
params={this.props.params}
|
|
router={this.props.router}
|
|
fetchOptions={this.props.fetchExploreOptions}
|
|
options={this.props.exploreOptions}
|
|
explore={this.props.explore}
|
|
/>
|
|
<Posters
|
|
elmts={elmts}
|
|
loading={this.props.loading}
|
|
hasMore={this.state.hasMore}
|
|
loadMore={this.loadMore}
|
|
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>
|
|
);
|
|
}
|