import React, { useState, useEffect } from "react"
import PropTypes from "prop-types"
import { OrderedMap, Map } from "immutable"
import fuzzy from "fuzzy";
import InfiniteScroll from "react-infinite-scroll-component";
import ListFilter from "./filter"
import ExplorerOptions from "./explorerOptions"
import Poster from "./poster"
import Loader from "../loader/loader"
const ListPosters = (props) => {
let elmts = props.data;
const listSize = elmts !== undefined ? elmts.size : 0;
// Filter the list of elements
if (props.filter !== "") {
elmts = elmts.filter((v) => fuzzy.test(props.filter, v.get("title")));
} else {
elmts = elmts.slice(0, listSize.items);
}
// Chose when to display filter / explore options
let displayFilter = true;
if ((props.params
&& props.params.category
&& props.params.category !== ""
&& props.params.source
&& props.params.source !== "")
|| (listSize === 0)) {
displayFilter = false;
}
let displayExplorerOptions = false;
if (listSize !== 0) {
displayExplorerOptions = !displayFilter;
}
return (
);
}
ListPosters.propTypes = {
data: PropTypes.instanceOf(OrderedMap),
onClick: PropTypes.func,
onDoubleClick: PropTypes.func,
onKeyEnter: PropTypes.func,
selectedImdbId: PropTypes.string,
loading: PropTypes.bool.isRequired,
params: PropTypes.object.isRequired,
exploreOptions: PropTypes.instanceOf(Map),
type: PropTypes.string.isRequired,
placeHolder: PropTypes.string.isRequired,
updateFilter: PropTypes.func.isRequired,
filter: PropTypes.string,
};
export default ListPosters;
const Posters = (props) => {
if (props.loading) {
return ();
}
if (props.elmts.size === 0) {
return (
No result
);
}
const addMoreCount = 20;
const [size, setSize] = useState(0);
useEffect(() => {
loadMore()
}, [props.elmts.size]);
const hasMore = () => (size !== props.elmts.size);
const loadMore = () => {
if (!hasMore()) { return }
const newSize = (((size + addMoreCount) >= props.elmts.size)
? props.elmts.size
: size + addMoreCount);
setSize(newSize);
}
return (
}
>
{props.elmts.slice(0, size).toIndexedSeq().map(function(el, index) {
const imdbId = el.get("imdb_id");
const selected = (imdbId === props.selectedImdbId) ? true : false;
return (
props.selectPoster(imdbId)}
onDoubleClick={() => props.onDoubleClick(imdbId)}
/>
)
} ,this)}
);
}
Posters.propTypes = {
elmts: PropTypes.instanceOf(OrderedMap),
selectedImdbId: PropTypes.string,
loading: PropTypes.bool.isRequired,
onDoubleClick: PropTypes.func,
onKeyEnter: PropTypes.func,
selectPoster: PropTypes.func,
};