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 (
{displayFilter && }
); } 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, };